Typography Rules Every Designer Should Know
Great design starts with readable, thoughtful text. These 8 rules will transform your layouts from amateur to polished — no design degree required.
1. Why Typography Rules Matter (Even More Than You Think)
Typography is the voice of your design. Before someone reads a single word, the look of your text tells them whether to trust you, stay curious, or click away. Bad typography creates friction; good typography feels effortless. These rules aren't arbitrary — they're based on how human eyes and brains process written language.
2. Visual Hierarchy: The Secret to Scannable Design
Hierarchy tells readers where to start, what matters most, and what's supporting detail. Without hierarchy, every word competes for attention — and nothing wins.
This is body text. Notice how your eye naturally flows from largest to smallest. That's hierarchy at work. Use at least 3 distinct levels: headings, subheadings, and body text.
Pro rule: Use different font weights and sizes, not just color. A bold 32px heading, a semibold 20px subheading, and a regular 16px body text create instant visual order.
3. Alignment: The Invisible Grid That Holds Everything Together
Left‑aligned text is the default for a reason: humans read left‑to‑right, so a ragged right edge provides natural rhythm. Center‑align only for short headlines or invitations. Justified text creates awkward gaps (rivers) and should be avoided on the web.
4. Contrast: Make Your Text Unmissable
Low contrast is the number one readability killer. Light grey text on a white background might look "minimal," but it's impossible to read for anyone with less-than-perfect vision — which is most people over 40.
- WCAG 2.1 minimum contrast: 4.5:1 for normal text, 3:1 for large text (18pt+).
- Best practice: Dark grey (#1A1A1A) on white, or off-white (#F5F5F5) on dark backgrounds.
- Never use pure black (#000) on pure white (#FFF) — it strains eyes. Use #1E1E1E or #222 instead.
5. Modular Scale: Mathematical Harmony for Font Sizes
Instead of guessing font sizes, use a modular scale — a ratio-based sequence that creates visual harmony. The most common ratios: 1.25 (minor second), 1.333 (perfect fourth), or 1.5 (perfect fifth).
Pro tip: Start with your body text size (usually 16px), then multiply by 1.333 repeatedly for headings. This ensures everything feels connected.
6. Leading, Kerning & Tracking: The Spacing Trinity
Leading (line‑height): Set between 1.4 and 1.7 for body text. Too tight = crowded; too loose = disconnected. 1.5 is a safe starting point.
Kerning (space between specific pairs): Adjust manually for logos and large headlines. In body text, good fonts handle it automatically.
Tracking (overall letter spacing): Increase slightly (0.5–1px) for ALL CAPS headings. Never apply negative tracking to body text.
7. The Perfect Line Length (50–75 Characters)
Lines that are too long tire the eyes; lines that are too short break reading rhythm. Aim for 50–75 characters per line (including spaces). On desktop, this usually means max-width: 680px for text containers.
8. Common Beginner Mistakes (And How to Fix Them)
❌ Using too many fonts
Stick to 2–3 fonts maximum per project. More than that looks chaotic. Use weights and sizes for variation instead.
❌ Relying on "web safe" fonts only
System fonts like Arial and Times look dated. Google Fonts are free, fast, and make your work feel current.
❌ Ignoring responsive typography
Don't use fixed px sizes for everything. Use rem for font sizes, and decrease heading sizes slightly on mobile.
❌ Underlined text for emphasis
On the web, underlines signal links. Use bold or italics for emphasis instead.
Typography Checklist for Beginners
Frequently Asked Questions
What is the most important typography rule?
Readability comes first. No aesthetic choice matters if people struggle to read your text. That means sufficient contrast, proper font size (minimum 16px for body text), and comfortable line spacing.
How many fonts should I use in one design?
Two is the sweet spot: one for headings (often a serif or bold sans) and one for body text (highly readable sans-serif). Three can work, but only if you're experienced. Four or more almost always looks messy.
What's the best way to learn typography?
Practice + study great design. Use our Font Preview tool to experiment. Look at well‑designed websites and note their font choices, sizes, and spacing.
Do these rules apply to print and web?
Most do, with adjustments. Print can use slightly smaller text (10–12pt) and justified text. Web needs larger text (16px+) and left alignment for comfortable screen reading.