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 also10
Web Font Loading
How custom typefaces are fetched and shown, and why the cost is easy to misattribute.
Web Platform12 connections
Utility-First CSS
Composing styles from many small single-purpose classes rather than authoring semantic rules.
Design & Interface15 connections
UI Primitive
The small set of typed components through which all interface markup is expressed.
Design & Interface12 connections
Design System
A shared vocabulary of tokens, primitives, and rules that makes independent work converge.
Design & Interface22 connections
Design Token
Named design decisions — color, spacing, radius, type — stored as data so they can be shared and re-themed.
Design & Interface21 connections
Plain Language
Writing so that the intended reader can find, understand, and use the information the first time.
Meaning & Society28 connections
Naming
Choosing identifiers so the code states its own meaning without commentary.
Method59 connections
Taxonomy
A controlled vocabulary for classifying things, and the choice between hierarchy, facets, and free tagging.
Meaning & Society34 connections
Silent Failure
A failure that produces no signal, so the absence of an error reads as success.
Method73 connections
Lorem Ipsum
The scrambled Latin filler typesetters and designers use to show a layout before the real words exist, useful for judging type and dangerous because it hides what real content will do to the design.
Design & Interface6 connections
Linked from12
- 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.
- Visual HierarchyDesign & Interface
Arranging elements so their visual weight matches their importance, telling the eye where to look first, second, and last.
- Web Font LoadingWeb Platform
How custom typefaces are fetched and shown, and why the cost is easy to misattribute.