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
Design System
A shared vocabulary of tokens, primitives, and rules that makes independent work converge.
Design & Interface17 connections
Design Token
Named design decisions — color, spacing, radius, type — stored as data so they can be shared and re-themed.
Design & Interface17 connections
Web Font Loading
How custom typefaces are fetched and shown, and why the cost is easy to misattribute.
Web Platform11 connections
Plain Language
Writing so that the intended reader can find, understand, and use the information the first time.
Meaning & Society27 connections
Related5
Nearby in the graph rather than deliberately chosen. Looser, sometimes surprising.
Linked from11
- Container QueryDesign & Interface
Styling based on the size of an element's container rather than the viewport.
- Design SystemDesign & Interface
A shared vocabulary of tokens, primitives, and rules that makes independent work converge.
- Design TokenDesign & Interface
Named design decisions — color, spacing, radius, type — stored as data so they can be shared and re-themed.
- Gestalt PrinciplesDesign & Interface
A set of perceptual rules describing how the eye groups discrete elements into wholes before conscious analysis begins.
- Grid SystemDesign & Interface
A shared set of columns, gutters, and alignment lines that constrains where content can sit, so unrelated layouts still read as one system.
- KerningDesign & Interface
The per-pair adjustment of horizontal space between two specific letters, distinct from uniform spacing applied across a whole string.
- Plain LanguageMeaning & Society
Writing so that the intended reader can find, understand, and use the information the first time.
- Terminal User InterfaceGraphics & Rendering
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.
- Variable FontsDesign & Interface
A single font file that encodes a continuous design space, letting weight, width, and other axes be set to any value at runtime.
- Web Font LoadingWeb Platform
How custom typefaces are fetched and shown, and why the cost is easy to misattribute.