pub enum Text {
Fine,
Note,
Body,
Lead,
Subhead,
Head,
Title,
Display,
Hero,
}Expand description
What a piece of text is, from which its size follows.
The type axis, and the same move Gap makes on the spacing axis: name
the role and let the size follow, so the choice is reviewable. Whether a
caption should be 13px or 14px is unanswerable in isolation; whether a
piece of text is a caption is not.
§Why the ratios are their own ramp
Type does not reuse Step. The spacing scale is built in eighths of the
base because that is what the HIG’s distances land on, and a type ramp
needs different rungs — 7/8 and 9/8 sit either side of body copy and have
no spacing meaning at all, while Hair and Tight are far below any
legible size. Sharing the enum would have meant widening it for rungs
spacing never asks for.
What is shared is the thing that matters: every rung here is a Ratio
of --geometry-base, so text tracks the user’s chosen root size exactly
as spacing does, and one knob still moves the whole design.
§Why the floor is 3/4
Twelve pixels at the default base, and nothing below it. Sizes under that are a legibility problem rather than a tier, and a scale that offers one is a scale that invites it. Text that needs to recede should recede by colour or weight, which cost no legibility.
§Why type does not shift on touch
Density is a claim about the contact patch and nothing else, and text
is not a tap target. The reader’s own root font size is already the knob
for how large text should be, and it already moves this whole ramp. So the
type axis is density-invariant, and a phone gets the same tiers a desktop
does.
Variants§
Fine
Three quarters of the base. Timestamps, badges, legal lines.
Note
Seven eighths of the base. Secondary text: metadata, table cells, captions, form help.
Body
The base itself. Running copy, and the size everything else is read against.
Lead
Nine eighths of the base. Emphasised copy: intros, card titles.
Subhead
Five quarters of the base. The third heading level.
Head
One and a half times the base. Section headings, the second level.
Title
Twice the base. The page’s own title, the first level.
Display
Two and a half times the base. Display copy, above the document hierarchy rather than at the top of it.
Hero
Three times the base. One per page at most: a landing hero.