Typography
Most of a design is text, so this is where the course starts. Typefaces, sizes, spacing, alignment and color — every guideline explained, then demonstrated with live demos you can play with.
01 Why Typography Carries the DesignFree preview Most of a design is text, so typography does most of the work. Why it's a system, not a feeling. 02 Choosing TypefacesFree preview Why the safe answer is a neutral sans, how to pair fonts, and where to find the good ones. 03 Font Sizing and Type Scales One scale, around ten sizes, picked by hand — and why 16px body copy is the rule. 04 Font Weight and Hierarchy Size is not the only lever — weight and color do the real hierarchy work. 05 Line Height The highest-impact fix in typography — 1.5 for body, 1.1 for headings, and why the value travels with the size. 06 Letter Spacing Leave body copy alone. Tighten big headings, widen all-caps — and that's nearly everything. 07 Line Length The 45–75 character rule, one line of CSS, and why text never fills the container. 08 Alignment Left by default, center only short text, numbers right with tabular figures, mixed sizes on the baseline. 09 Tabular Numbers One CSS property that stops columns wobbling and timers twitching. 10 Color and Contrast for Text Dark gray on off-white, three shades of text, a 4.5:1 floor — and why gray dies on colored backgrounds. 11 Font Smoothing and Rendering Why the same font looks different on every OS, and what the CSS everyone copies actually does. 12 Building a Reusable Type System (+ AI Prompt) The whole module on one sheet — in code, as a checklist, and as an AI prompt you can paste anywhere.