Lesson 2 of 4
Type – The interface, mostly
Most of an interface is text, so type decisions do more work than any other single choice. Three sub-problems – how sizes relate, how faces combine, how comfortable a paragraph actually is – and each has a system, not a vibe.
Count the pixels on almost any screen you use and text owns most of them. That makes typography the highest-leverage system in the visual stack: get it right and the interface feels considered before a single icon loads; get it wrong and no amount of polish elsewhere rescues it.
The good news for a non-designer: the three type decisions that matter are all systems you can name and check, not talents you’d need to acquire.
Sizes that belong to one family
The amateur tell is font sizes picked one at a time – 14 here, 17 there, 22 because it looked nice on Tuesday. The professional move is a modular scale: pick a base size and a ratio, and let multiplication generate the family. Every size then has a mathematical relationship to every other, which your eye reads as harmony without knowing why.
Generate a type scale
One base, one ratio – a whole family
The ratio is a register decision. Tight ratios (1.125–1.25) produce the dense, professional feel of tools like Linear; big ratios (1.414–1.618) produce editorial drama – magazine covers, landing-page heroes. Neither is right; owning one of them is.
Two faces, maximum – usually one
Type pairing has a single governing rule: contrast, don’t collide. Two nearly-identical typefaces fight like two near-matching plaids; two clearly different ones read as intent. The reliable shape is one “voice” face for display and one “workhorse” built for legibility at small sizes.
But here’s the practitioner secret that saves you from the whole problem: most professional interfaces ship one typeface in several weights. Linear, Apple, most serious design systems – one family, weight doing the differentiation. Reach for weight and size contrast before you ever reach for a second font. (This site: one sans for everything you’re reading, one mono for code. The pairing is sans-versus-mono, which can’t collide.)
The paragraph you can actually finish
Two research-backed numbers govern reading comfort, and neither is taste:
- Measure – line length. 50–75 characters per line is the readable range (Baymard Institute’s synthesis of the classic research; the related WCAG guideline says 80 or fewer). Wider and the eye loses the return trip; narrower and reading turns stop-start.
- Leading – line height. Body text starts around 145–150% of the font size (16px text → roughly 24px lines), loosening for dense passages, tightening for big display type, which needs proportionally less air.
Set the measure
Where does reading start to feel like work?
Reading is a return trip: your eye runs to the end of a line, then has to find the start of the next one. Short lines make the trip constantly; long lines make the return leg risky – land one line off and you re-read or skip. The comfortable middle is wide enough to build momentum and narrow enough that the way back is never in doubt.
Marathon lines: watch your eye lose the return trip to the left edge.
The measure rule explains a layout decision you’ll now notice everywhere: quality sites don’t let paragraphs stretch to fill wide screens. The column stops growing even when the window doesn’t – that’s not wasted space, that’s the reading protected.
This page practises it:Every text size on this page comes from one scale, its paragraphs cap at 68 characters, and it uses exactly two typefaces (one voice, one workhorse for code) – the rules it teaches, obeyed in front of you.