Typographic Scale
A constrained set of type sizes and their paired line heights and spacing.
A typographic scale is a small, deliberately chosen set of font sizes — usually related by a ratio — with each size paired with the line height, letter spacing, and weight appropriate to it. Constraining sizes to a scale is what makes a document look composed rather than assembled.
The pairings matter as much as the sizes. Leading (line height) should tighten as type gets larger: body text wants generous leading for readability, display type wants tight leading or it falls apart into disconnected lines. Tracking (letter spacing) moves in the opposite direction, opening slightly for small uppercase text and tightening for large display. Treating these as independent knobs rather than properties of a scale step is how interfaces end up with headings that read as accidents.
Scale is also contextual. Application chrome — toolbars, menus, controls — generally wants a compact scale that is quite different from content typography, and menus should match the control that opened them. Mixing content scale into chrome makes an interface feel bloated; mixing chrome scale into content makes it feel cramped.
Measure line length too. Readability falls off sharply beyond roughly seventy-five characters, and in a terminal or a narrow column it must be derived from the available width rather than assumed. See Terminal User Interface.
See also4
Hand-picked in the note itself — the neighbours worth reading next.
Design System
A shared vocabulary of tokens, primitives, and rules that makes independent work converge.
Design & Interface9 connections
Design Token
Named design decisions — colour, spacing, radius, type — stored as data so they can be shared and re-themed.
Design & Interface14 connections
Web Font Loading
How custom typefaces are fetched and shown, and why the cost is easy to misattribute.
Web Platform9 connections
Plain Language
Writing so that the intended reader can find, understand, and use the information the first time.
Meaning & Society14 connections
Related5
Nearby in the graph rather than deliberately chosen. Looser, sometimes surprising.
Linked from6
Notes elsewhere in the wiki that reach for this one.
- Design SystemDesign & Interface
A shared vocabulary of tokens, primitives, and rules that makes independent work converge.
- Design TokenDesign & Interface
Named design decisions — colour, spacing, radius, type — stored as data so they can be shared and re-themed.
- Plain LanguageMeaning & Society
Writing so that the intended reader can find, understand, and use the information the first time.
- Terminal User InterfaceGraphics & Games
An interface rendered as text in a terminal, and the design conventions that make command-line tools humane.
- Utility-First CSSDesign & Interface
Composing styles from many small single-purpose classes rather than authoring semantic rules.
- Web Font LoadingWeb Platform
How custom typefaces are fetched and shown, and why the cost is easy to misattribute.