The type layer

Slate does not own its type. @erikakers/typography does, and this page states the whole of the arrangement on Slate's side: the inputs below. Everything derived from them, the role ladder, every size, leading, tracking and measure, is the module's own surface and lives on typography.erikakers.com.

The governing rule

Slate informs the module's inputs; the module owns everything derived from them.

A consequence this page states by omission: there is no role ladder here, no specimen markup and no size table, because a number Slate cannot state as a measurement of Slate is not Slate's to state. The values below are read out of the module at build time, the same way the contrast ratios are, so a configuration change in settings/_type.scss shows up here without a second edit.

The seven inputs

• $scale-base1.15625rem18.5px, the drawn prose body. Petrona’s x-height is why it is not 16px.
• $scale-ratio1.214252Anchored so the derived display role lands on the drawn 72px.
• $leading-base1.68The drawn body leading.
• $font-family-baseHanken Grotesk, Hanken Grotesk Fallback, Helvetica Neue, Helvetica, Arial, sans-serifHanken Grotesk. Structure: headings, navigation, buttons, labels.
• $font-family-codeFragment Mono, Fragment Mono Fallback, ui-monospace, SFMono-Regular, Menlo, Consolas, monospaceFragment Mono. Data: metadata, tags, code.
• $role-overridestext → the prose stack; fine → the mono stackPetrona on the reading roles, via the module’s text group. The fine entry is the typography#77 workaround.
• $tracking-uppercase0.12emThe drawn --tr-label tracking, 2.4 times the module’s 0.05em convention.

The reading stack

The $role-overrides row above names the module's text group, which reaches body, lead and caption and no heading. The stack it sets is $slate-family-prose:

Petrona, Petrona Fallback, Georgia, Times New Roman, serif

For the role ladder and the specimen, go to typography.erikakers.com, which owns that surface.