Typography

Typography ships as type-* classes, one per role and size. Each class sets font-family, font-weight, font-size, line-height and text-transform in one declaration, and the type-surface-* roles set letter-spacing as well, so two elements carrying the same class render identically wherever they sit.

The surface and component split from the token tree runs through the classes as well, with surface type sized against prose and component type against controls.

Surface roles

Sized roles are type-surface-<role>-<size>, and the roles that only come in one size are type-surface-<role>.

<h1 class="type-surface-title-md">Page title</h1>
<p class="type-surface-body-md">Body copy.</p>
<p class="type-surface-footnote">Footnote.</p>

Component sizes

Component type is type-component-<size>, running from 5xs to 5xl and sized against controls rather than prose.

<span class="type-component-sm">Save changes</span>
<span class="type-component-md -strong">Save changes</span>
<span class="type-component-md -number">1234567890</span>

Modifier classes

Weight and family variations are chained onto the role class rather than replacing it.

<p class="type-surface-body-sm -strong">A strong lead sentence.</p>

A modifier only changes the one property it names, so -strong resolves against whichever role it is attached to: type-surface-title-md -strong takes the title role’s strong weight and type-surface-body-sm -strong takes the body role’s, and a theme is free to set the two apart.

Limitations

A type-* class sets the whole stack at once, and there is no font-*, text-<size>, leading-* or tracking-* escape hatch into the token values. Mixing a title’s size with a body’s line height is the drift the roles exist to prevent. The cost is that a real exception has to be written as plain CSS, which we think is the right place for it to be visible.

Tailwind’s own text-left, truncate and friends are untouched, since we only own the type roles.