leading-and-line-height-discipline

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

1. Using 1.5 (default browser leading) for body — too tight on serif
2. Using 1.0 for display — letters touch ascenders/descenders
3. Inconsistent leading across components (button vs link)
4. 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.