Course home · Phase 4: Making It Not Ugly

13: Typography That Doesn't Hurt Eyes

Pick two fonts, not five. Hierarchy comes from size, weight, and spacing. Not rainbow colors.

Font stacks as used in shared.css

Serif: Georgia, 'Times New Roman', serif for body text (this course uses it)

Sans: -apple-system, Helvetica, Arial, sans-serif for headings and UI

Mono: ui-monospace, SFMono-Regular, Menlo, monospace for code

body { font-family: Georgia, 'Times New Roman', serif; }
h1,h2,h3 { font-family: -apple-system, Helvetica, Arial, sans-serif; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
Why stacks: Not every OS has the same fonts. Browser tries first, falls back to next. serif/sans-serif/monospace are guaranteed generics.

Size, line-height, spacing

Good line-height (1.6) versus tight (1.1)

Line height 1.6 is airy and readable for body. The quick brown fox jumps over the lazy dog. Keeps eyes moving without strain.

Line height 1.1 is cramped and hard to follow. The quick brown fox jumps over the lazy dog. Do not use this for paragraphs.

letter-spacing for headings

Spaced Uppercase Heading with letter-spacing 0.08em

Normal heading with no letter-spacing

body { font-size: 16px; line-height: 1.6; } /* 1.5–1.7 for body */
h2   { line-height: 1.25; }                 /* tighter for headings */
h3   { letter-spacing: 0.04em; text-transform: uppercase; font-size: 14px; }

Web fonts: @font-face and Google Fonts

This is Inter from Google Fonts, loaded via <link>.

IBM Plex Serif is another Google Font, a serif.

<!-- in <head> -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

<style>
  body { font-family: 'Inter', sans-serif; }
</style>
Performance: Each font weight is a download. Don't load 6 weights if you use 2. Add &display=swap so text shows immediately with fallback while font loads.

Text alignment and the centering callback

text-align: left is the default and most readable

center is for headings and hero sections

justify creates rivers of whitespace. Avoid it on the web

line-height = height centers a single line vertically (Module 07 section 6)

Live demo: typeset an article with hierarchy only

Field notes · Aug 2026

Typography is mostly whitespace

The best typography is invisible. You notice it only when it is wrong: cramped lines, five fonts, centered paragraphs that hurt to read.

Start with one serif for body, one sans for headings. Set line-height: 1.6 on body and 1.25 on headings. Add space, remove color.

Set in Georgia and -apple-system. No images, just type.

article { max-width: 35em; } /* ~35 characters wide is readable */
h2 { font-size: 1.4rem; line-height: 1.25; }
p  { line-height: 1.6; }
.meta { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #888; }
Exercise: Typeset an article (20 min)
  1. Take a long article (or lorem ipsum) and wrap it in <article>.
  2. Create hierarchy with only font-size, font-weight, line-height, and letter-spacing. No colors.
  3. Limit line length with max-width: 35em on the article.
  4. Try one Google Font and keep it to 2 weights.
Prev12: Responsive or It Didn't Happen Next14: Color, Backgrounds & Borders