Alignment & layout
Fixing widows, rag, and the line breaks that ruin headlines
The word _Typography_ sits alone on the second line. One word, stranded. That's a widow.
## Widows and orphans
A **widow** is a single word stranded on the last line of a paragraph or headline. An **orphan** is a single line stranded at the top or bottom of a column.
### Headlines: fix them
Insert a non-breaking space between the last two words:
```html
<h1>Getting Started with Web Typography</h1>
```
Or use `text-wrap: balance` to redistribute words across lines:
```css
h1 {
text-wrap: balance;
}
```
`text-wrap: pretty` is the milder version for body text. It prevents single-word last lines.
### Body paragraphs: don't fight it
Responsive layouts reflow constantly. Reserve manual fixes for headlines, navigation, and cards.
## Hanging punctuation
**Hanging punctuation** pulls punctuation marks (opening quotes, commas, hyphens, periods) _outside_ the text column so the visible edges stay optically aligned.
CSS has `hanging-punctuation: first last;`, but only Safari supports it. Workarounds: negative `text-indent` for blockquotes, manual hanging for display headlines. Apply to **blockquotes and large display text** only.
## Justified text
**Justified text** aligns flush on both edges by varying word spaces. Books are justified because typesetting software hyphenates well. Browsers do not. Without good hyphenation, the browser stretches word spaces:
- **Rivers**: vertical streams of whitespace running down the column.
- **Stretched lines** with awkward gaps.
- **Compressed lines** where long words force spaces to shrink.
Justification needs all three:
- **Long line lengths** (60+ characters). Short measures amplify rivers.
- **Strong hyphenation.** `hyphens: auto` plus the correct `lang` on `<html>`.
- **16px or larger font size.** Small text exaggerates gaps.
```css
article.justified {
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
max-width: 65ch;
}
html {
lang: "en";
}
```
Never use `letter-spacing` to fill justified lines. Never justify narrow columns, navigation, buttons, or short blocks.
## Centre alignment
Centre alignment works for short lines: a card title, a hero tagline, a caption. Beyond two or three lines the eye has no left edge to return to.
## Practical defaults
```css
h1,
h2,
h3 {
text-wrap: balance;
}
p {
text-wrap: pretty;
}
.prose {
max-width: 65ch;
margin-inline: auto;
}
```