Typography Explained: 7 Rules Every Designer Should Know
Hierarchy, pairing, spacing and the rules that make text readable. A good companion to the lesson on type scales, because it covers the judgement calls a scale cannot make for you.
Watch on YouTube (opens in a new tab)Third-party video. It is loaded from YouTube and is not hosted by the academy.
By the end of this lesson you can
- Choose a readable typeface for an interface and explain the choice.
- Build a small type scale with sizes, line heights and weights.
- Set body text for comfortable reading: size, line length, line height and contrast.
- Pair typefaces only when there is a reason, and avoid common pairing mistakes.
The idea
Most interfaces are mostly text. Typography is therefore the single biggest factor in how readable and professional a product feels.
Choosing a typeface
For interface text, prioritise legibility over personality. Good interface typefaces have a generous x-height (the height of lowercase letters), open shapes, clearly different characters (capital I, lowercase l and number 1 should not look identical), a range of weights, and support for the languages you need. Many well-made typefaces are free, including system fonts that load instantly. Choose one family for most uses; a second is optional.
Type scale
A type scale is a small set of sizes that you reuse everywhere. Some designers derive sizes from a ratio, for example multiplying by 1.25 each step (16, 20, 25, 31, 39). Others pick sizes by hand. Either way, keep it small: five to seven sizes cover most products. A fixed scale makes hierarchy consistent and speeds up decisions.
Readability of body text
- Size: 16px is a common minimum for body text on the web; reading-heavy pages often use 17 to 20px.
- Line height: around 1.4 to 1.7 times the font size for body text. Headings need tighter line height, around 1.1 to 1.3.
- Line length: roughly 45 to 75 characters per line is a widely used guideline. Very long lines make it hard to find the start of the next line.
- Contrast: body text should meet at least 4.5:1 against its background (WCAG AA).
- Alignment: left-align body text in left-to-right languages. Justified text creates uneven gaps; centred text is hard to read beyond a few lines.
- Weights: two or three are usually enough, for example regular, medium and semibold.
Pairing
Pairing two typefaces can add character, for example a serif for headings and a sans serif for body text. Pair only when it serves a purpose, choose typefaces with clearly different roles, and make sure they share similar proportions so they sit comfortably together. Two similar sans serifs side by side look like a mistake.
Why it matters in real projects
Poor typography slows reading, increases errors and makes products feel untrustworthy. Small type and long lines make forms harder to fill in, especially for older readers and anyone on a small screen. A defined type scale also saves enormous time: instead of choosing a size each time, designers and developers pick from a short list, and screens stay consistent.
A realistic example
A health information website uses 14px light grey text in lines over 120 characters long, and nine different heading sizes chosen over several years. Visitors, many of them older, report the articles are "hard to read" and they print them out.
The redesign sets body text at 18px with 1.6 line height in a high-contrast dark grey, limits the text column to about 68 characters, and replaces the nine heading sizes with three. The same articles are now readable on a phone without zooming, and the team can build new pages faster because every text style is predefined.
Step by step
Choose the body size first
Start with body text because it is used most. Try 16 to 18px and read a full paragraph on a phone.
Set body line height and line length
Try a line height of 1.5 to 1.6 and limit the text column to roughly 60 to 75 characters.
Build the scale upwards
Pick a ratio such as 1.2 or 1.25, calculate four or five larger steps and one smaller step, and round them.
Assign roles
Name each size by role (caption, body, lead, h3, h2, h1) and decide its weight and line height.
Test on real content
Apply the scale to a real page with long headings, short headings, lists and captions. Adjust where it breaks.
Check mobile
Large headings often need to be smaller on phones. Define the mobile sizes too.
Common mistakes
Mistake Light grey, thin body text because it "looks elegant".
Instead Use regular weight and check contrast meets at least 4.5:1.
Mistake Too many sizes and weights.
Instead Limit to five to seven sizes and two or three weights.
Mistake Full-width text on desktop.
Instead Constrain the reading column so lines stay roughly 45 to 75 characters.
Mistake Using all caps for long text.
Instead Reserve all caps for short labels, and add letter spacing when you use it.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 40 min
Build and apply a type scale
Create a type scale for a recipe website and apply it to one recipe page with a title, intro, ingredient list, numbered steps and a tip box.
Steps
- Choose one typeface and justify it in two sentences.
- Define five to seven styles with size, line height and weight.
- Lay out the recipe page on mobile and desktop using only those styles.
- Check the body text contrast with a contrast checker.
- Ask someone to read the steps aloud from a phone and note any difficulty.
Deliverable
A type scale table and the recipe page on mobile and desktop.
Assignment
Assignment
Typography audit
Audit the typography of one real website. List every distinct text style you can find (size, weight, colour, line height). Propose a reduced scale and show three screens before and after applying it.
Deliverables
3 items
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
5 items
Summary
- Choose legible typefaces with a good x-height, distinct characters and the weights you need.
- Use a small, named type scale.
- Body text: around 16 to 18px, line height 1.4 to 1.7, 45 to 75 characters per line, at least 4.5:1 contrast.
- Pair typefaces only with a clear purpose.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
- Practical Typography (opens in a new tab)Matthew Butterick
A free online book with clear, opinionated typography rules.
- Google Fonts Knowledge (opens in a new tab)Google Fonts
Free articles on choosing and using type.
Your notes
Marking complete updates your course and roadmap progress.