← ALL PAIRS

DARKER GROTESQUE + WORK SANS

The Quick Brown Fox Jumps Over The Lazy Dog
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing, as well as modifying the space between pairs of letters.

DARKER GROTESQUE

Light 300The quick brown fox jumps over the lazy dog
Regular 400The quick brown fox jumps over the lazy dog
Medium 500The quick brown fox jumps over the lazy dog
SemiBold 600The quick brown fox jumps over the lazy dog
Bold 700The quick brown fox jumps over the lazy dog
ExtraBold 800The quick brown fox jumps over the lazy dog
Black 900The quick brown fox jumps over the lazy dog

WORK SANS

Thin 100The quick brown fox jumps over the lazy dog
ExtraLight 200The quick brown fox jumps over the lazy dog
Light 300The quick brown fox jumps over the lazy dog
Regular 400The quick brown fox jumps over the lazy dog
Medium 500The quick brown fox jumps over the lazy dog
SemiBold 600The quick brown fox jumps over the lazy dog
Bold 700The quick brown fox jumps over the lazy dog
ExtraBold 800The quick brown fox jumps over the lazy dog
Black 900The quick brown fox jumps over the lazy dog

CHARACTER SET · DARKER GROTESQUE

Aa
Bb
Cc
Dd
Ee
Ff
Gg
Hh
Ii
Jj
Kk
Ll
Mm
Nn
Oo
Pp
Qq
Rr
Ss
Tt
Uu
Vv
Ww
Xx
Yy
Zz
0
1
2
3
4
5
6
7
8
9
!
@
#
$
%
&
*
(
)
?
.
,
;
:
+
=

WORK SANS

Aa
Bb
Cc
Dd
Ee
Ff
Gg
Hh
Ii
Jj
Kk
Ll
Mm
Nn
Oo
Pp
Qq
Rr
Ss
Tt
Uu
Vv
Ww
Xx
Yy
Zz
0
1
2
3
4
5
6
7
8
9
!
@
#
$
%
&
*
(
)
?
.
,
;
:
+
=

USE THIS PAIR

# npm
npm install @fontsource/darker-grotesque @fontsource/work-sans

# yarn
yarn add @fontsource/darker-grotesque @fontsource/work-sans

# pnpm
pnpm add @fontsource/darker-grotesque @fontsource/work-sans

# Then import in your app entry point:
import '@fontsource/darker-grotesque';
import '@fontsource/work-sans';

# CSS usage after import:
# font-family: 'Darker Grotesque', sans-serif;
# font-family: 'Work Sans', sans-serif;

ABOUT

Darker Grotesque

A condensed, high-contrast sans-serif by Gabriel Lam. Its narrow proportions pack information density into headlines while maintaining legibility through generous vertical spacing.

Gabriel Lam, 2018

sans-serif · 7 styles

Variable

Recommended: 400, 700, 900

Available: 300900

→ Google Fonts ↗

Work Sans

A utilitarian sans-serif designed by Wei Huang, optimized for screen use at medium sizes. Its slightly condensed proportions and even color make it efficient for UI work and body text.

Wei Huang, 2015

sans-serif · 18 styles

Variable · Italic

Recommended: 400, 500, 600

Available: 100900

→ Google Fonts ↗

Darker Grotesque's condensed, high-contrast forms pack density into headlines. Work Sans provides utilitarian readability. Ideal for news sites, editorial layouts, and data-rich dashboards.

DARKER GROTESQUE × WORK SANS20 / 38