| name | leading-and-line-height-discipline |
| description | Use when setting line-height for body and display type. Default 1.5 is too tight for editorial body; too loose for display.
|
Leading and Line-Height Discipline
Body 1.6-1.7, display 1.1-1.2, captions 1.4. Adjusting leading is the fastest way to elevate visible quality.
Leading by text role
| Role | Line-height | Why |
|---|
| Display (40pt+) | 1.1-1.2 | Tight; lines act as visual block |
| Subhead (24-32pt) | 1.3 | Moderate breathing |
| Body (16-20pt) | 1.6-1.7 | Optimal reading |
| Pull-quote | 1.4 | Slightly tighter than body |
| Caption (11-13pt) | 1.4-1.5 | Tight for compact reference |
| Footnote | 1.5 | Compact but readable |
CSS implementation
h1 { line-height: 1.1; }
h2 { line-height: 1.2; }
h3 { line-height: 1.3; }
p, li { line-height: 1.65; }
blockquote { line-height: 1.45; }
small { line-height: 1.4; }
Common mistakes
- Using
1.5 (default browser leading) for body — too tight on serif
- Using
1.0 for display — letters touch ascenders/descenders
- Inconsistent leading across components (button vs link)
- Not accounting for font family — Fraunces needs more leading than Inter Tight
Where this fits in the X3 empire
Foundation typography rule for CardPrepAI. The single biggest readability improvement on long-form content.
