Typography tokens

Overview

Every type role in the system, with the four values it resolves to and the components that consume it. Generated from tokens/type.json by scripts/build-tokens.mts; nothing here is typed by a person, and pnpm check:generated fails the build if it is.

The specimens render from the generated values rather than from a screenshot, so what you see is the token itself. They also render at more than one text-size multiplier, because a type token whose value you know at 1× and not at 1.3× is a token you do not actually know.

How it works

tokens/type.json holds one entry per role, and each entry is four values:

• size is expressed relative to the root, never in pixels, so the reader's multiplier and browser zoom both apply.
• line height is a unitless ratio, so it scales with the size rather than being recomputed per role.
• tracking is a letter-spacing adjustment, negative at the large end and slightly positive at the small end. Type set at one tracking across a whole scale looks wrong at both extremes.
• weight is a numeric weight the platform font can actually produce.

There is no per-role tabular flag and no scaleRate field, because the file holds neither. Tabular figures are not a property of a size role at all. The product theme sets font-variant-numeric: tabular-nums on anything carrying the data-opsinjs-value attribute, and the numeric family is reached through font-opsin-numeric, so a measurement gets aligned digits from what it is rather than from the step it sits in. Every role also scales by the same factor, because the reader's multiplier is applied once at the root font size and never tuned per role. See Type scale.

The generator emits both a --opsin-text-<role>-* group of custom properties and a Tailwind --text-* mapping, so a role is reachable as a utility class or as a raw variable depending on how the consuming product is built.

Using it

Read the Used by column first. It is the fastest way to find the role you want: if a role is used by nothing, either you have found the one you need or the role should not exist.

Set a number in a value context, not just in a size role. A size role gives a number its size; it is the data-opsinjs-value attribute and font-opsin-numeric that give it tabular, aligned digits. A number rendered without them shifts the layout every time it changes, whichever role it is in.

Copy the role name, never the computed size. A pixel value pasted into a component is a component that no longer participates in Dynamic Type, and the failure only appears for readers who have changed their text size. Those are the readers least likely to be in the room when it is reviewed.

Compare across text sizes, not just at 1×. The specimens on this page are rendered at several multipliers precisely so that a role which looks correct by default and wrong at 1.3× is visible here rather than in production.

Tokens

Your blood pressure was 148 over 92

At 200%

Your blood pressure was 148 over 92

Accessibility impact

• The generated table is what makes the scale reviewable. Because every value is emitted rather than typed, "the type scales" stops being a claim: anyone can read the size and weight of every role, at more than one multiplier, and check it against what renders.
• Every pairing of a role with a surface is measured for contrast at the role's own size and weight. APCA is size- and weight-sensitive, so a single ratio for the whole scale would be wrong for most of it. The measured results are on Contrast conformance.
• The minimum size is published and enforced. caption2 is the floor; a generated table makes it obvious when something has been set below it.
• The specimens are real text. They are selectable, translatable and readable by a screen reader, not images of type. That is also the rule the rest of the system follows.

Related

• Type scale says what each role is for, and covers how a measurement gets tabular figures.
• Dynamic Type says what these values become at the reader's own text size, and covers the 1.3× bar.
• Reference → Tokens has the same rows alongside every other family.