Skip to content
Browse the guide
Foundations

Typography

Establish readable hierarchy with real fonts, content and scripts.

On this page

Use type to establish reading order and distinguish information roles. Choose a small, coherent set of heading, body, label, supporting and code styles. A role is more useful than a list of unrelated font sizes.

#Set a readable hierarchy

Begin with the body text in its actual measure. Establish line height for the font and scripts the product supports, then set headings that make sections easy to find. Labels should remain readable at the control's intended density. Small supporting text is still content, not decoration.

Use real copy to judge hierarchy. A long translated heading, mixed-script name or two-line label reveals constraints that a short English specimen hides. Avoid fixed manual line breaks unless the content is intentionally authored as a fixed composition.

#Respect the font

A font's visible size, weight and metrics matter more than its nominal size alone. Load the actual font before measuring alignment. Keep project fonts and fallback behavior unless changing them is part of the brief. Review CJK glyph shapes, punctuation, mixed Latin runs and regional font selection together.

Use tabular numerals where values must align, not throughout all prose. Keep literal code and commands intact; typography enhancement must not change copied text or significant whitespace.

#Scale and wrap

Allow text to resize and controls to grow. Test 200% text, long unbreakable identifiers and narrow layouts. Use wrapping that respects language and punctuation; global break-all and negative tracking can hide layout problems while damaging reading.

#Review

Read a full paragraph and scan a complete form or list at native size. Check headings, captions, links, numbers and controls in both themes. Verify font loading does not move the primary action unexpectedly. See typographic craft for glyph edges, line boxes, numbers and CJK mechanisms.