Module typography

Remarks

Faces — fontFamily carries the body face, fontFamilyHeading the one a title is set in and fontFamilyMono the one a code span or a figure aligns on. Each ships as a brand face ahead of a generic stack covering it until it loads, so an app supplying a face of its own keeps the fallbacks by restating them.

Sizes — fontSize is absolute, while fontSizeSmall and fontSizeLarge follow what they sit in.

Headings — fontSizeHeading sizes every heading level, so an app resizing it resizes all headings together. The first level scales up from it, while the levels below take it as it stands, since their hierarchy is carried by the face, the weight and the space around a heading rather than by a ladder of sizes, which keeps a deep outline readable in a column. letterSpacingHeading ships neutral and lets the brand face decide, so an app supplying a condensed or a wide face corrects the tracking without restating the rule.

Weights — fontWeight is text at rest, fontWeightStrong a run marked out, fontWeightHeavy a title or header.