Typography arranges text through mathematical relationships among font size, line height, spacing, and width. A coherent type scale, often built with ratios such as 1.2 or 1.618, creates visual rhythm while supporting readability and accessibility. section 1.2.2 section 8.0
A readable text block balances three typographical properties:
- font-size sets the scale of the text. section 8.1.5
- line-height controls vertical separation between lines. section 8.1.5
- max-width limits line length so paragraphs remain easier to scan. section 8.1.5
- CSS calc() can scale these values together instead of treating them as unrelated fixed numbers. section 1.2.2
Scaling a text article
An article that inherits a 16px font, 1.2 line-height, and full body width can feel cramped and difficult to scan. Choosing a 20px font size and scaling the related values produces a 1.41 line-height and a 600px maximum width. The CSS expresses the relationship with custom properties and calc(), rather than isolated guesses. section 8.1.5
Figure 1.2 A type scale based on the golden ratio (approximately 1.618).
Visualizes a type scale based on the golden ratio, approximately 1.618. section 1.2.2
