Stage 2 · Lesson 3 of 7
Typography: scales, line height and line length
Text does most of the work in an interface. Use one or two at most. Then set a : a fixed set of sizes, such as 12, 14, 16, 20, 24, 32 and 40, where each step looks clearly different.
Body text on screens is usually 16 pixels or more. Its , the distance from one line to the next, is usually around 1.4 to 1.6 times the text size. Keep the line length to roughly 45 to 75 characters, so the eye can easily find the start of the next line.
Separate headings from body text with weight and size. Save all caps and italics for short labels or emphasis. A clear scale feeds straight into hierarchy, then into in and tokens in code.
Common trapusing many sizes that differ by a pixel or two, which looks accidental rather than intentional.
A question to check yourself, an AI practice session and 2 cheat sheet entries come with the full roadmap. Unlock
Resources for this stage
Start with· follow one of these
- GuideFreeMaterial Design 3
Google
Free, detailed foundations on layout, colour roles and type scales from a system used by millions of apps
- BookPaidRefactoring UI
Adam Wathan and Steve Schoger · About $99
Paid, practical visual design tactics explained for people without a design background
Practise
Keep handy
Also worth your time
How size, colour, contrast and spacing create reading order, with examples