Aa Typography

Type System

Configure font families, scale, spacing and preview your type system live.

Font Families

Choose fonts for primary, secondary and monospace roles.

Primary

The quick brown fox

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

Secondary

The quick brown fox

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

Monospace

const x = 42;

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

Full size scale from xs to 9xl. Click any row to copy the CSS.

Adjust and preview spacing properties in real time.

Font size — 32px

Line height — 1.5

Letter spacing — 0em

Font weight

Preview

The quick brown fox jumps over the lazy dog. Typography shapes the experience.

Type anything below and see it rendered with your font system.

The quick brown fox jumps over the lazy dog.

Size

Curated combinations for headings and body text. Click Apply to use a pairing.