Lesson 2: Typography & Spacing Scale — Visual Rhythm From a System
A designer hands you a mockup with 11 different font sizes and 7 random spacing values. Without a scale, every screen looks slightly off. This lesson teaches you to define a `type scale` and a `spacing scale` as tokens in `tailwind.config.ts` — fixed steps that create visual rhythm instead of guessw
A scale is like shoe sizes: there's a fixed set of steps everyone shares, instead of measuring each foot in random millimeters. That's how all the pairs end up matching.
- type scale
- A defined set of font sizes that step up by a fixed ratio — for example `sm`, `base`, `lg`, `xl` — so every piece of text is picked from a small set of steps rather than a free-form size.
- spacing scale
- A set of spacing tokens built on a base unit (usually 4px) — `1`, `2`, `4` — that feed padding, margin, and gap so every gap in the UI aligns to the same grid.
- modular scale
- A scale where each step is the previous one times a fixed ratio (e.g. 1.25) — giving typography a harmonious progression instead of random jumps.
- base unit
- The small number every spacing value is a multiple of — usually 4px or 8px — so every grid value divides by it and no gap falls 'between' the steps.
