Curriculum

Anatomy & vocabulary

Week 1 · 4 lessons · 52 min

You cannot fix what you cannot name. We start with the parts of a letter and the words that describe how they behave together.

1. Strokes, stems, counters, apertures — a tour of the letterform
2. x-height, cap height, and why two 16px fonts look different sizes
3. Classification without the history lecture: what actually predicts behaviour
4. Reading a specimen: what to look for in the first ninety seconds

Exercise — Annotate three typefaces from a product you use daily. Crit: Thursday.

The scale

Week 2 · 4 lessons · 61 min

Most type systems are a pile of sizes someone added under deadline. We replace the pile with a ratio you can explain.

1. Modular scales: choosing a ratio and living with it
2. Six sizes, not fourteen — pruning an existing scale without a rewrite
3. Fluid type with clamp(): the maths, the traps, the accessibility floor
4. Weight as a second axis: when to change size and when to change weight

Exercise — Build the scale you'll use for the remaining four weeks.

Measure, leading & rhythm

Week 3 · 4 lessons · 58 min

The module the course is named after. Line length is the variable that silently controls how everything else has to be set.

1. Measure: the 45–75 character rule and the three times to break it
2. Leading as a function of measure, not a fixed 1.5
3. Vertical rhythm on the web: spacing scales that survive real content
4. Rag, widows, orphans, and the CSS that quietly handles them

Exercise — Reset a long-form article page. Same content, new rhythm.

Pairing & voice

Week 4 · 4 lessons · 47 min

Pairing is not a matter of taste, it's a matter of contrast and intent. Here's the method.

1. Contrast axes: era, structure, contrast, width — pick one to differ on
2. The superfamily shortcut and when it's a cop-out
3. Voice: matching a typeface to what your product is claiming about itself
4. Licensing, budgets, and making a good case to whoever signs off

Exercise — Three pairings for one brand, each with a written rationale.

Type on screens

Week 5 · 4 lessons · 66 min

The technical module. Rendering, loading, and the variable-font features most teams pay for and never switch on.

1. Variable fonts: registered axes, custom axes, and optical sizing that actually works
2. Font loading: FOUT, FOIT, size-adjust, and killing layout shift for good
3. Subsetting and unicode-range: how to lose 70% of the bytes
4. Rendering across platforms — hinting, antialiasing, and what you can't control

Exercise — Cut your font payload in half without changing how the page looks.

Systems & handoff

Week 6 · 4 lessons · 55 min

A type system is only as good as the documentation that outlives you. We finish by making yours durable.

1. Naming tokens so people use them correctly without asking
2. Documenting intent: what each style is for, not just what it looks like
3. Running a type review — the four questions, in order
4. Keeping it alive: governance that doesn't require a committee

Final project — A documented type system in CSS custom properties, reviewed live.