Typography Fundamentals Every Designer Should Know
From kerning to leading to hierarchy, a grounding in the principles that make text readable and beautiful.
Why Typography Matters
Typography is 95% of web design. It carries your message before anyone reads a word. Good typography is invisible; bad typography is all anyone notices.
The Key Terms
Font vs. typeface — A typeface is the design (Helvetica); a font is the specific file (Helvetica Bold 12pt). Most people use them interchangeably now.
Kerning — Adjusting space between two specific letters. Critical for large display text.
Tracking — Adjusting spacing across a whole block of text uniformly.
Leading — The vertical space between lines of text. Too tight and lines crowd; too loose and they disconnect.
Hierarchy
Establish a clear visual order using size, weight, and color. Readers should scan the page and understand what's most important without reading every word.
Readability Rules
- Body text: 16px minimum on web
- Line length: 45-75 characters per line
- Line height: 1.5-1.6 for body text
- Limit to two typefaces per project
Choosing Typefaces
Pair a distinctive display face with a clean, readable body face. Contrast is the goal — two similar typefaces look like a mistake, not a choice.
Practice
Study well-designed magazines and books. The more good typography you expose yourself to, the better your instincts become.