Typography

Inter for reading, Inter Display for headlines, mono for the machine's voice.

v1.0.0·Updated Jul 10, 2026 · 23:00
Two voices

Inter is the reading voice; at large sizes its optical axis becomes Inter Display, set light so headlines feel open. Geist Mono is the machine voice. Leading is tuned to match our components: tight for display, loose for body. Composed from tokens/primitive/typography.json and named in tokens/semantic/typography.json.

Display

Inter Display (opsz 32), light, tight leading. This is the page-title style (.title) at three sizes.

Optimistic
display-1 · 72px · Light 300 · lh 76px (1.05) · -0.03em
Ship it first
display-2 · 60px · Light 300 · lh 63px (1.05) · -0.03em
Assume the best
display-3 · 54px · Light 300 · lh 57px (1.05) · -0.03em
Header

Inter, semibold. Section titles, h1 down to h5.

The system at work
header-1 · 36px · Semibold 600 · lh 45px (1.25) · -0.02em
How it fits together
header-2 · 28px · Semibold 600 · lh 35px (1.25) · -0.02em
Foundations
header-3 · 24px · Semibold 600 · lh 30px (1.25) · -0.01em
Components and tokens
header-4 · 18px · Semibold 600 · lh 23px (1.25) · -0.01em
One warm pixel
header-5 · 14px · Semibold 600 · lh 18px (1.25)
Sub Heading

Inter, medium. A step lighter than a header at the same size.

Render, then reconcile
subheading-1 · 24px · Medium 500 · lh 32px (1.35) · -0.01em
Tokens, not values
subheading-2 · 18px · Medium 500 · lh 24px (1.35)
Optimistic updates
subheading-3 · 16px · Medium 500 · lh 22px (1.35)
Honest feedback
subheading-4 · 14px · Medium 500 · lh 19px (1.35)
Body

Inter, regular, relaxed leading (1.6), cool greys. Body 1 (16px) is the recommended reading size.

Every decision starts life as a Figma Variable, then becomes a token.
body-1 · 16px · Regular 400 · lh 26px (1.6)
Tokens compose into components, and components compose into products.
body-2 · 14px · Regular 400 · lh 22px (1.6)
Trace any line on screen and it ends in shipped software.
body-3 · 12px · Regular 400 · lh 19px (1.6)
Dense tables and captions read comfortably at this size.
body-4 · 11px · Regular 400 · lh 18px (1.6)
The smallest supporting text, used sparingly.
body-5 · 10px · Regular 400 · lh 16px (1.6)
The floor: legal, footnotes, micro-labels.
body-6 · 9px · Regular 400 · lh 14px (1.6)
Machine voice

Geist Mono, uppercase eyebrows with wide tracking (.eyebrow / .secLabel). Code, statuses, numerals.

How it works
eyebrow · 11px · Regular 400 · lh 15px (1.35) · 0.2em
POST /v1/hearts optimistic -> reconciled 142ms
code · 12px · Regular 400 · lh 16px (1.35)
Weights

Five weights: Light for display, Regular for body, Medium for sub-headings, Semibold for headers, Bold for emphasis.

Optimistic by defaultLight · 300
Optimistic by defaultRegular · 400
Optimistic by defaultMedium · 500
Optimistic by defaultSemibold · 600
Optimistic by defaultBold · 700
Rules
PropertyValueWhere
Leadingdisplay 1.05 · heading 1.25 · body 1.6Tuned per role, not one ratio
DisplayInter Display · light 300 · opsz 32Headlines only, one per view
Header vs Sub Headingsemibold 600 vs medium 500Same size, different emphasis
Recommended bodyBody 1 · 16px · regularThe default reading size
Text greyscool #9AA0A8 / #767B87Never warm-tinted