Why typography is the first thing designers get wrong
Most people think typography is about choosing fonts. It isn't. Typography is about spacing, rhythm, and hierarchy — the invisible structure that guides the reader's eye before they consciously decide where to look. A beautiful font ruined by bad leading, wrong tracking, or no hierarchy communicates less effectively than Times New Roman used correctly. These 8 concepts explain why.
The 8 fundamentals
Tracking
Letter-spacing applied globally to a word or block of text. Increase it on uppercase labels; tighten it on display headlines.
All-caps text needs +10–20% tracking to breathe. Lowercase body text almost never does.
Kerning
Spacing between two specific character pairs. 'AV', 'To', 'WA' sit too far apart by default — good kerning fixes these invisible gaps.
Auto kerning handles most cases well. Toggle it off in the demo to feel exactly what it's correcting.
Leading
The vertical space between lines of text. Too tight and text suffocates. Too loose and the eye loses the thread between lines.
Body text sweet spot: 1.4–1.6× the font size. Display headlines can go tighter, around 1.0–1.2×.
Font Weight
The stroke thickness — from thin (100) to black (900). Weight creates hierarchy before the reader consciously reads a single word.
Limit yourself to 2 weights per design: one for body, one for headings. More than 2 creates chaos.
Serif vs Sans-serif
Serifs have small finishing strokes on letterforms. Sans-serifs don't. Serifs aid long-form reading on paper; sans-serifs win on screens at small sizes.
For web body text under 18px, sans-serif almost always wins legibility.
Text Alignment
How lines sit in their container — left, center, right, justified. Left alignment is correct for almost all body text.
Never justify body text on web. It creates uneven word gaps called 'rivers' that break reading flow.
Type Scale
The size ratio between your heading levels. A consistent multiplier (1.25×, 1.414×, 1.618×) creates visual rhythm and harmony throughout a page.
Pick one ratio and apply it consistently. Arbitrary heading sizes are the single biggest source of visual chaos in amateur designs.
Contrast
The visual difference between elements — size, weight, color, style. Without contrast there is no hierarchy. Without hierarchy, nothing gets read.
If two elements look somewhat similar, make them identical or make the contrast dramatic. The middle ground reads as an accident.
Don't just read about it — feel it
Every concept above has a live interactive demo on our Learn page. Drag sliders for tracking and leading, toggle serif vs sans-serif, adjust weight in real time. Typography clicks when you move it — not when you read about it.
AaOpen interactive lesson →Need a designer who applies these principles to your site?
Let's talk →About
Patrick Chen — indie developer and web designer behind Sublimearts.io. I built the Typography Fundamentals lesson because every design course spends 2 hours on color theory and 10 minutes on type. That felt backwards.