7 Typography Mistakes Even Experienced Designers Make

Typography is deceptively difficult. Even experienced designers — people who work with type daily — fall into consistent patterns that weaken their work. Here are the 7 most common mistakes, and exactly how to fix each one.

1. Wrong Line Height

Line height (leading) is the space between lines of text. Most beginners set it to 1.0 (no extra space) or the browser default (1.2). For comfortable reading, body text needs 1.5–1.7. Display text needs 1.1–1.2.

Fix: Set line-height: 1.6 for body text as your default. Tighten to 1.1 for headlines above 48px. Loosen to 1.7 for small text under 14px.

2. Too Many Fonts

Three fonts are almost always one too many. Four fonts is a design emergency. More fonts = more visual noise = less clarity.

Fix: Use one font family with multiple weights to create hierarchy. If you must use two families, make them obviously different — serif + sans, not two sans-serifs.

3. Ignoring Optical Alignment

Mathematically centred text often looks off-centre because our eyes perceive different characters differently. A capital 'O' aligned to a baseline looks lower than a capital 'H' aligned to the same baseline.

Fix: Trust your eyes over the measurements. Nudge elements visually until they feel right, especially for logos and display type.

4. Bad Kerning on Headlines

Kerning is the spacing between individual letter pairs. Display text (large headlines) needs manual kerning because the automatic kerning tables built into fonts are optimised for body sizes.

Fix: For any text over 48px, zoom in and manually adjust spacing between pairs that feel too tight or too loose. "AV", "To", "We" are classic problem pairs.

5. Using a Screen Font for Print

Fonts designed for screen rendering (like Inter) look flat and lifeless when printed. They lack the optical compensation that print fonts have for ink spread.

Fix: Use print-optimised fonts for anything going to paper: Garamond, Caslon, Freight Text, or similar.

6. Widows and Orphans

A widow is a single word left on the last line of a paragraph. An orphan is the last line of a paragraph left alone at the top of a column or page. Both look unpolished.

Fix: Rewrite the text, adjust the container width, or add widows: 2; orphans: 2 in CSS to prevent single-line remnants.

7. All Caps Without Tracking

All-caps text is difficult to read without extra letter-spacing. The letters are designed for mixed-case context; in all-caps, they sit too close together.

Fix: Add letter-spacing: 0.05em to 0.12em for any all-caps text. The wider the font and the longer the word, the more spacing you need.