Spacing & rhythm

Right typeface, right size, right measure, still feels wrong. The problem is spacing. ## Paragraph separation A new paragraph needs **either** a blank line **or** a first-line indent. Never both. Books use indents. Websites use line breaks. Web readers skim rather than read sequentially, so line breaks work better on screen. ### Line breaks (web default) ```css p { margin-bottom: 1em; text-indent: 0; } ``` One line of space. ### Indents (longform / editorial) ```css p { margin-bottom: 0; } p + p { text-indent: 1.5em; } ``` The first paragraph never gets an indent. Use `p + p`. ## Letterspacing: the default rule For body text: _leave it alone_. The type designer already set the spacing. ### When to add letterspacing - **Uppercase text.** Capitals need extra air. Add 0.05–0.15 em. - **Tiny text** (10px and below). A hint of tracking helps legibility. - **Large display headlines.** At 72px, body spacing feels too open. Tighten with `letter-spacing: -0.02em`. ### When _not_ to add letterspacing - **Body text in mixed case.** Don't. - **Monospaced fonts.** Tracking breaks the grid. - **Connected scripts** (handwriting, Arabic, Devanagari). Tracking breaks the joins. - **Justified text** to fill a line. ## Subhead proximity ```css h2 { margin-top: 2.5em; /* generous space above */ margin-bottom: 0.5em; /* tight space below */ } ``` ## Vertical rhythm Set `line-height` first, then derive paragraph spacing from it. A paragraph margin of one line-height produces even vertical rhythm. Baseline-grid alignment is impractical on the web. Prioritise consistent _feel_ over mathematical purity. ## Padding and margins - **Column gutters.** Wide enough that the eye doesn't jump to the adjacent column. - **Outer margins.** At least 16px of horizontal padding on mobile. - **Thumb space.** Interactive text needs enough padding to be tappable. Two to four sentences per paragraph. Shorter paragraphs invite scanning. Longer ones stall it.