Typography is invisible design. When a page is comfortable to read and you naturally flow from beginning to end, you rarely notice the typography. But when the font is too small, the line height too tight, or too many typefaces compete for attention, you feel uncomfortable without being able to pinpoint why. Understanding basic typographic principles helps make content easier to read — and easier to trust.
1. Font Categories: The Five Types You Need to Know
Fonts aren't just about aesthetics — different type categories serve different reading contexts:
| Category | Characteristics | Examples | Best for |
|---|---|---|---|
| Serif | Decorative strokes at the ends of letterforms | Times New Roman, Georgia | Long-form articles, academic writing, print |
| Sans-serif | Clean strokes without decorative serifs | Arial, Helvetica, Noto Sans | Web body text, UI interfaces, mobile |
| Monospace | Every character has equal width | Courier, Fira Code, JetBrains Mono | Code, terminal output, data alignment |
| Script | Mimics handwriting | Brush Script, Pacifico | Headlines, decorative accents, brand logos |
| Display | Strong personality, not suited for body text | Impact, Bebas Neue | Large headlines, posters, advertisements |
The most common choice for web body text is sans-serif. On screen, serif fonts' fine details don't render as crisply as in print, while sans-serif fonts maintain legibility across all sizes.
2. Line Height: The Single Biggest Readability Factor
Line height (CSS line-height) has the greatest single impact on readability. Too tight and the eye loses its place; too loose and paragraph cohesion disappears:
- Body text: 1.5–1.7× — the standard comfortable reading range for Latin text
- CJK body text: 1.7–1.8× — Chinese, Japanese, and Korean characters are denser, requiring more breathing room
- Headings: 1.1–1.3× — large text is heavy; too much line height breaks the headline's visual unity
- Code blocks: ~1.5× — needs structural clarity without feeling too loose
Use unitless values in CSS (e.g. line-height: 1.7) rather than fixed pixels (e.g. line-height: 28px). Unitless values scale proportionally when font size changes, preventing mismatched ratios across different text sizes.
3. Font Size and Letter Spacing
Font size
The minimum readable font size for web body text is 16px — also the browser default. Desktop long-form reading can go up to 17–18px. Avoid shrinking body text below 14px: users may not complain, but they'll leave the page faster.
Letter spacing
For most Latin body text, the default letter spacing is well-calibrated. Uppercase headings and display text can benefit from slight positive tracking (+0.05em to +0.1em). For CJK body text, avoid adding letter spacing — it makes the text look scattered and breaks typographic conventions.
4. Mixed CJK and Latin Text
Mixing Chinese/Japanese/Korean with Latin text is a common challenge. Key rules:
- Add a space between CJK and Latin characters: e.g. "使用 CSS 設定樣式" — the space between the Chinese and "CSS" adds visual breathing room
- Add a space between numbers and units: "1.7 倍行距" not "1.7倍行距"
- Don't mix CJK and Latin punctuation: use CJK full-width punctuation in CJK sentences
- Font-family declaration order matters: list CJK fonts before Latin fonts in CSS
font-family, so CJK characters use the CJK typeface and Latin falls back to the Latin typeface
5. Text Contrast: The Accessibility Baseline
The contrast ratio between text and background directly affects readability for users with low vision, people using phones in bright sunlight, and older readers. WCAG defines clear standards:
- AA level: body text ≥ 4.5:1; large text (18px+ or bold 14px+) ≥ 3:1
- AAA level: body text ≥ 7:1; large text ≥ 4.5:1
A common failure: gray text like #999 on a white background has a contrast ratio of ~2.85:1 — well below AA — but looks fine on a high-contrast monitor.
6. Font Pairing Strategies
Most pages need two typefaces: a heading font (visual guidance) and a body font (reading comfort). Common pairing approaches:
- Serif headline + sans-serif body: classic editorial feel, suits blogs and news sites
- Display headline + sans-serif body: bold personality, suits brand pages and events
- Same family, different weights: the safest choice — e.g. Noto Sans Bold for headings, Regular for body — stylistically unified, hard to get wrong
Avoid more than three typefaces on one page. Each additional font adds load time and visual noise.
7. Web Font Performance
CJK fonts are performance-heavy: a complete Chinese font file typically exceeds 5 MB, compared to 50–200 KB for Latin fonts. Key strategies:
- Use subsetting (Google Fonts): load only the characters your page actually uses
- font-display: swap: show system fonts immediately while the web font loads, preventing blank flashes (FOIT)
- Prefer system fonts when possible: using
-apple-system, BlinkMacSystemFont, "Segoe UI"eliminates font load time entirely when brand-specific fonts aren't required
Summary
- Use sans-serif fonts for web body text; set line height to 1.5–1.7× for Latin, 1.7–1.8× for CJK
- Minimum body font size is 16px; don't shrink below 14px
- Add spaces between CJK and Latin characters; use full-width punctuation in CJK sentences
- Ensure text contrast meets WCAG AA (4.5:1 minimum)
- Use at most 3 typefaces per page; prefer system fonts for better load performance