Alignment & Layout

The previous lessons covered what text looks like. This one covers how text sits on the page — the invisible decisions about line breaks, column edges, and whitespace that determine whether a paragraph feels composed or accidental.

Widows and orphans

A widow is a single word stranded on the last line of a paragraph or headline — Getting Started with Web Typography breaking just before Typography, leaving it alone on a second line. An orphan is a single line stranded at the top or bottom of a column, separated from the rest of its paragraph.

Both are visually awkward. They make finished pages look unloved.

Headlines: fix them

Insert a non-breaking space between the last two words so they break together:

<h1>Getting Started with Web&nbsp;Typography</h1>

For richer control, modern CSS offers text-wrap: balance (supported in Chromium and Firefox), which redistributes words across available lines:

h1 { text-wrap: balance; }

text-wrap: pretty is the milder version — same idea but less aggressive, suited to body text. It specifically targets widows, preventing single-word last lines in paragraphs.

Widow

Getting Started with Web Typography

"Typography" stranded alone on the last line

Balanced

Getting Started with Web Typography

text-wrap: balance redistributes the words

Body paragraphs: do not fight it

In responsive layouts, body paragraphs reflow constantly. Trying to ban widows everywhere is a losing battle and produces hand-tuned overrides that break the next time content changes. Accept imperfection in body copy; reserve manual fixes for headlines, navigation, and call-out cards.

Hanging punctuation

Hanging punctuation pulls punctuation marks — opening quotes, commas, hyphens, periods — outside the text column so the visible left and right edges stay optically aligned.

Without it, the line that starts with a quotation mark looks slightly indented. The eye reads this as a small dent in the column edge. Hanging punctuation moves the mark into the margin, leaving a clean vertical line of letterforms.

CSS has a property for this: hanging-punctuation: first last;. But only Safari supports it broadly. Workarounds include negative text-indent for blockquotes and manual hanging for display headlines. The practical recommendation: implement hanging punctuation on blockquotes and large display text where the benefit is most obvious; leave body text alone until browser support catches up.

Justified text

Justified text aligns flush at both left and right edges by varying the spaces between words. Books are typically justified because typesetting software can hyphenate words and adjust spacing fractionally. Most websites should not be justified, because browsers do this poorly.

Without good hyphenation, the browser has only one tool for filling a line: stretching the word spaces. The result:

Rivers — vertical streams of whitespace running down the column.
Stretched-out lines with awkward gaps.
Compressed lines where a long word forces spaces to shrink unnaturally.

Justification works only with:

Long line lengths (60+ characters). Short measures amplify rivers.
Strong hyphenation. hyphens: auto plus the correct lang on <html> so the browser pulls the right dictionary.

article.justified {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  max-width: 65ch;
}
html { lang: "en"; }

Never use letter-spacing to fill justified lines — word spaces are bad enough; stretched letterspacing is grotesque. Never justify narrow columns, navigation, buttons, or short blocks. Reserve for long-form prose only.

Non-breaking spaces

A non-breaking space ( ) tells the layout engine: do not break the line here. It is the most useful typographic character most developers never use deliberately.

Where to use it:

Between the last two words of a headline — prevents widows.
Between a number and its unit — 10 MB, 100 km.
In keyboard shortcuts — Cmd + K.
Around an em dash used for attribution — the important thing — Robert Bringhurst.

Do not overuse. Sprinkling   through every paragraph defeats the browser's line-breaking algorithm and produces worse layouts on narrow screens.

Center alignment

Avoid center-aligned body text. It works for short lines — a card title, a hero tagline, a photo caption — but more than two or three lines of centered text becomes hard to read because the eye has no consistent left edge to snap back to.

If you center-align text, increase line height to compensate for the irregular starting position of each line. Use centered alignment sparingly and intentionally, for formal or display contexts.

Practical defaults

For most web projects, these defaults will serve you well:

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.prose { max-width: 65ch; margin-inline: auto; }

Three lines of CSS that prevent widows in headings, minimize them in body text, and constrain the measure. They cost nothing and fix the most common layout problems in typeset text.