The Quick Brown Fox
Typography is the art of arranging type to make written language legible, readable, and appealing when displayed.
DARKER GROTESQUE + WORK SANS
DARKER GROTESQUE
WORK SANS
CHARACTER SET · DARKER GROTESQUE
WORK SANS
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: 300–900
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: 100–900
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.
RELATED PAIRS
The Quick Brown Fox
Typography is the art of arranging type to make written language legible, readable, and appealing when displayed.
The Quick Brown Fox
Typography is the art of arranging type to make written language legible, readable, and appealing when displayed.
The Quick Brown Fox
Typography is the art of arranging type to make written language legible, readable, and appealing when displayed.