Typography

One typographic standard with two font stacks. The type scale, weights, and hierarchy are shared across brand and product work — only the font families change depending on context.

Font families

Internal applications use Inter (sans-serif), Source Serif 4 (serif, V2), and JetBrains Mono (code). All are open source, self-hosted, and free of licensing constraints. They are optical equivalents of the brand typefaces used on external-facing properties.

Inter

Sans-serif · Variable · Open source

All UI text, headings, body, labels, and navigation. Primary typeface across the entire system.

Source Serif 4

Serif · Variable · Open source

Long-form editorial content. Deferred to V2. Replaces Freight Text Pro from brand guidelines.

JetBrains Mono

Monospace · Variable · Open source

Code blocks, inline code, token names, and technical content throughout the documentation site.

Brand-to-system mapping

The brand guidelines specify licensed Adobe typefaces for external-facing work. Internal applications substitute open-source equivalents that match the optical characteristics, metrics, and personality of the originals.

Role	Brand typeface	System typeface	Context	CSS token
Sans-serif	Proxima Nova	Inter	All UI, headings, body	--font-family-sans
Serif	Freight Text Pro	Source Serif 4	Long-form editorial (V2)	--font-family-serif
Monospace	—	JetBrains Mono	Code, tokens, technical	--font-family-mono

Why two font stacks?

The brand typefaces (Proxima Nova, Freight Text Pro) require Adobe Fonts licenses. Internal applications may run in environments without Adobe access, need offline rendering, or require self-hosting for performance. Inter and Source Serif 4 are metrically similar open-source fonts that preserve the brand’s visual identity without licensing constraints.

Type scale

The scale defines every text style in the system. Sizes, weights, line heights, and letter spacing are consistent across both font stacks — only the font family changes by context.

display48px / 700The quick brown fox jumps
h136px / 700The quick brown fox jumps
h230px / 600The quick brown fox jumps
h324px / 600The quick brown fox jumps
h420px / 600The quick brown fox jumps
h518px / 500The quick brown fox jumps
body.lg18px / 400The quick brown fox jumps
body.md16px / 400The quick brown fox jumps
body.sm14px / 400The quick brown fox jumps
label14px / 500The quick brown fox jumps
caption12px / 400The quick brown fox jumps
overline12px / 600CATEGORY LABEL
code14px / 400const token = value;

Token reference

Token	Size	Weight	Line height	Letter spacing	Usage
type.display	48px	700	1.25	-0.025em	Hero text. One per page max.
type.h1	36px	700	1.25	-0.025em	Page title.
type.h2	30px	600	1.25	-0.025em	Section heading.
type.h3	24px	600	1.25	0	Subsection heading.
type.h4	20px	600	1.25	0	Minor heading.
type.h5	18px	500	1.5	0	Smallest heading.
type.body.lg	18px	400	1.75	0	Lead paragraphs, intro text.
type.body.md	16px	400	1.5	0	Default reading size.
type.body.sm	14px	400	1.5	0	Dense content, secondary info.
type.label	14px	500	1.5	0	Form labels, button text.
type.caption	12px	400	1.5	0	Footnotes, timestamps.
type.overline	12px	600	1.5	0.1em	Category labels, eyebrow text.
type.code	14px	400	1.5	0	Code blocks, inline code.

Weights

Four weights cover the full range from body text to display headings. Inter’s variable font format means any intermediate weight is technically available, but the system constrains to these four for consistency.

Regular

400 · var(--font-weight-regular)

Body text, captions

Medium

500 · var(--font-weight-medium)

Labels, small headings

Semibold

600 · var(--font-weight-semibold)

H2–H5, overlines

Bold

700 · var(--font-weight-bold)

Display, H1

Usage guidelines

Hierarchy rules

Never skip heading levels. An H3 must follow an H2, not an H1. Screen readers navigate by heading level, so skipping breaks the document outline.
One Display per page, maximum. Display is for hero moments. Most pages use H1 as the top-level heading.
Use semantic tokens, not raw values. Write var(--type-h2-size), not 30px. If the scale changes, every component updates automatically.
Body text minimum is 16px. The type.body.sm (14px) style is for secondary information, not primary reading. Captions (12px) are for metadata only.

Do / Don’t

Use type.body.md (16px) for primary reading content. Comfortable at any screen distance.

Don’t

Use type.caption (12px) for paragraphs. Captions are for metadata, not reading.

Use Inter for all internal applications. It’s the system typeface — no licensing, no external dependencies.

Don’t

Use Proxima Nova in internal apps. Adobe Fonts require a subscription and won’t render in offline or air-gapped environments.

Pair heading weights with body weights for contrast: Bold (700) or Semibold (600) headings over Regular (400) body.

Don’t

Use Bold for body text or Regular for headings. Without weight contrast, hierarchy collapses and users can’t scan the page.

Accessibility

Minimum body text size is 16px for primary reading. WCAG 1.4.4 requires text to be resizable up to 200% without loss of content.
Line height for body text is at least 1.5 (WCAG 1.4.12). Headings use 1.25 — acceptable because they are short runs of text.
Paragraph spacing is at least 2× the font size (WCAG 1.4.12). The spacing tokens enforce this.
Letter spacing never goes below -0.025em (tight). Tighter tracking reduces legibility for dyslexic readers.
Text color meets WCAG 2.2 AA contrast minimums in both light and dark themes. See the Color System page for full contrast validation.