Begin by defining roles. Common tiers include Display, H1–H6, Subtitle, Body, Label, Caption, and Code. These are not just sizes; they are promises about emphasis and behavior. Document each role with size, weight, line height, letter spacing, and intended use. Give examples that demonstrate how roles combine on real screens—article pages, dashboards, settings—to prevent theoretical choices from failing in practice.
Choose typefaces for function first. Readability across sizes, legible numerals, and distinct letterforms matter more than novelty. Pairing faces works best when roles are clear: a sturdy sans for UI and a humanist serif for long-form reading, for instance. If you use one family, exploit its optical sizes and variable axes to gain range without clutter. Pay attention to how your numerals look in tables, how quotes render in block text, and whether italics carry enough contrast.
Scale is the backbone of hierarchy. Modular scales (e.g., 1.125, 1.25, 1.333) produce predictable steps while keeping relationships harmonious. Keep line length in check: roughly 45–75 characters for reading, shorter for dense UI. Line height should open text without creating zebra stripes; typically 1.4–1.6 for body and tighter for headlines. Use spacing to signal grouping: larger gaps between sections, tighter gaps within cards.
Contrast is the currency of attention. Use weight, size, color, and spacing to signal importance, but avoid shouting in every direction. Reserve your loudest style for true headings. Labels and helper text deserve restraint to avoid competing with the content they support. Remember that color contrast must meet accessibility guidelines; test key combinations in light and dark themes and under increased text sizes.
Localization is the stress test. Scripts with taller ascenders, longer words, or complex diacritics will expose fragile choices. Design with generous line height and flexible containers so nothing crashes when content expands. Include rules for truncation versus wrapping, and prefer progressive disclosure over squeezing everything into a single line.
Execution details matter: use real caps for acronyms if legible, hanging punctuation for quotes, and tabular numerals for data. Mind orphans and widows in long text. Align baselines across columns, and ensure links and buttons remain clearly distinct from body text. When the typographic system anticipates reality, users barely notice it—and that’s the point.
