Typography

Sixteen steps across five families. Each step is a single font shorthand token, so a component sets type with one declaration and can never half-apply a style.

Families

Momo Trust DisplayDisplay--font-display

One weight only (400). Asking for 600 makes the browser fake it and 64px goes mushy.

Momo Trust SansTitles--font-title

Carries headings and interface labels.

InterBody--font-body

Reading text at every size.

BarlowData--font-data

Numerals only — narrower, and tabular by default.

JetBrains MonoCode--font-mono

Tokens, IDs, snippets.

Scale

t-display-xl--t-display-xl400 · 64/1.02

Design and ship

t-display-l--t-display-l400 · 48/1.06

Design and ship

t-display-m--t-display-m400 · 36/1.10

Design and ship

t-title-l--t-title-l600 · 28/1.22

Section heading

t-title-m--t-title-m600 · 22/1.32

Section heading

t-title-s--t-title-s600 · 18/1.42

Section heading

t-body-l--t-body-l400 · 17/1.65

The quick brown fox jumps over the lazy dog.

t-body-m--t-body-m400 · 15/1.60

The quick brown fox jumps over the lazy dog.

t-body-s--t-body-s400 · 13.5/1.55

The quick brown fox jumps over the lazy dog.

t-label-l--t-label-l500 · 13/1.30

Interface label

t-label-s--t-label-s500 · 11/1.30 · .12em

OVERLINE LABEL

t-data-xl--t-data-xl600 · 32/1.05

1,284,406.28

t-data-l--t-data-l600 · 24/1.10

1,284,406.28

t-data-m--t-data-m500 · 17/1.30

1,284,406.28

t-data-s--t-data-s500 · 13/1.35

1,284,406.28

t-code--t-code400 · 13/1.55

const ratio = 0.618

Why data has its own family

Numbers in a dashboard are scanned in columns, not read in sentences. Barlow is narrower than Inter at the same size and every t-data-* step sets tabular-nums, so figures line up on the decimal without hand-tuned letter spacing.

Body font

1,284,406.28

99,112.04

7,000,000.00

Data font · tabular

1,284,406.28

99,112.04

7,000,000.00