Leading & Line Height
Vertical rhythm in dynamic text.
Non-Linear Scaling
Line height cannot be a static multiplier. As font size increases, the proportional line height must decrease.
A static 1.5 line height on a 48px heading creates a massive 24px gap, fracturing the visual block.
Common Leading Mistakes
| Mistake | Impact | Solution |
|---|---|---|
| Global line-height: 1.6 | Headers look disjointed. | Use calc() formulas that decrease leading as size increases. |
Dynamic Leading Calc
FAQ
What is the baseline grid?
Aligning text to an invisible vertical grid. Hard on the web, but achievable with exact pixel math.
Explore the Architecture
Connect this concept to the broader system: