Typography

Type waterfall

Every step of the scale, the three families and the display weights — rendered live from tokens/typography.css. Each line is annotated with its token, px, rem and the role it pairs with. Switch the signature/theme/density to see how the same roles re-skin.

Signature

Density

Viewport

Theme follows the navbar ☀/☾ toggle

Live demo

Open ↗

Families

Display / headings — Roboto Flex, a variable face with a wide optical-size and weight range, used for titles and anything that needs presence.
Body / UI — Atkinson Hyperlegible Next, chosen for exactly what its name says: it keeps similar letterforms distinct, which helps every reader and especially low-vision users.
Mono — Atkinson Hyperlegible Mono, for code, data and tabular figures.

Reference them through --font-display, --font-body and --font-mono rather than by name.

Size scale

The scale uses the same steps as a familiar utility scale, so there are no in-between sizes to argue about: xs 12px, sm 14px, base 16px, lg 18px, xl 20px, then 2xl through 9xl for display. Picking "the next size up" is unambiguous because there is only one next size.

Role tokens

Day to day you should not reach for raw sizes. Use the role tokens, which already pair size, line-height and weight, and which respond to the viewport:

--text-body, --text-body-sm — running text and dense UI.
--text-title, --text-heading, --text-display — headings, scaling up on larger surfaces.
--text-label, --text-caption — form labels and small print.

On larger scales — including data-scale="cinema" for the ten-foot tier — the same roles resolve to larger values, so a layout written once reads correctly from a phone to a television.

Rules

One display weight per view. Hierarchy comes from size and spacing, not from stacking many weights.
Body copy stays at --text-body; do not shrink it to fit. If text does not fit, the layout is wrong.
Use text-wrap: pretty on headings and balance on short blocks — Prism's prose components already do.