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

Modifiers 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.

Typefaces

Two typefaces carry the text in these classes, both named by the token set.

Mirage is the standard family: every surface role except code, and all component text, render in it. Mirage is a commercial typeface and is licensed through Dreamtype at dreamtype.xyz/typefaces/mirage.

Index is the numeric and code family: type-surface-code and the -number modifier resolve to it, and the stock monotheme sets every role in it except display and subtitle, which keep Mirage. Index is free and open source, published at github.com/magicasaservice/index.

The tokens name the families and the classes repeat them; loading the font files is your app’s job. To set different typefaces, change the fontFamily tokens in your own source.

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.