Typography

Font Families

The design system uses two font families, both self-hosted for performance and privacy.

Source Sans Pro Web (sans)

--flex-font-sans

The quick brown fox jumps over the lazy dog. 0123456789

Roboto Mono Web (mono)

--flex-font-mono

The quick brown fox jumps over the lazy dog. 0123456789

Type Scale

All font sizes use --flex-text-* tokens. Components must not use hardcoded px/rem for font sizes (exception: USWDS visual conformance).

Extra small--flex-text-xs: 0.7em

Small--flex-text-sm: 0.82em

Base--flex-text-base: 0.9em

USWDS normalized base--flex-text-uswds: 1.06rem

Tag/badge text--flex-text-tag: 0.875rem

Font Weights

300 — Light: The quick brown fox jumps over the lazy dog.

400 — Regular: The quick brown fox jumps over the lazy dog.

700 — Bold: The quick brown fox jumps over the lazy dog.

Line Heights

1.15 — HTML default (set on html)

This paragraph uses the default HTML line-height of 1.15. It is tighter and suitable for UI chrome, navigation, and short labels where vertical compactness matters.

1.5 — Prose / body text (set on .prose)

This paragraph uses the prose line-height of 1.5. It provides comfortable reading for longer passages of text, matching USWDS guidance for body content and form instructions.

1.3 — Headings and controls

Headings use 1.3 line-height. This keeps multi-line headings visually cohesive without feeling cramped.

Measure

Reading text is constrained to a maximum width of 68ex (roughly 45-75 characters per line), following USWDS measure guidance. This is applied automatically in .prose blocks via max-width: 68ex.

This paragraph is constrained to 68ex max-width, matching the USWDS measure for comfortable reading. Research shows that line lengths of 45-75 characters optimize reading speed and comprehension. Longer lines cause readers to lose their place when returning to the left margin.

Heading Hierarchy

Prose headings follow USWDS sizing. The design system uses Source Sans Pro (not Merriweather) as an intentional difference from USWDS defaults.

h1 — 2.44rem

h2 — 1.95rem

h3 — 1.34rem

h4 — 0.98rem

h5 — 0.91rem

h6 — 0.87rem (uppercase, regular weight)