Spacing

Your h2 has 2rem margin above and below. The heading looks centered between two paragraphs. It belongs to the one above. Readers group it wrong before they finish the section.

The Principle

Typography uses several kinds of spacing. KerningAdjusting space between specific letter pairs, usually handled by the font's built-in kerning tables. adjusts individual letter pairs. TrackingUniform spacing across a range of letters, set in CSS with letter-spacing. changes spacing across a group of letters. Word spacingThe gap between words, controlled in CSS with word-spacing. affects gaps between words. Layout spacing organizes paragraphs, headings, and sections.

The Rule I Follow

I solve layout problems with spacing before changing typography. Keep letter-spacing at 0 on body copy. Separate paragraphs with 1–1.25em. Give headings about 2× more margin above than below so they anchor to the content below.

Try It Yourself

Set tracking to 0, paragraph spacing to 1–1.25em, and heading margins so the title groups with the paragraph below it.

The Mistake I'd Avoid

Increasing tracking on long paragraphs. Letter spacing helps small labels and uppercase text. Body copy reads best at the typeface default.

Remember This

Space doesn't just separate things. It explains how they relate.

p {
margin-bottom: 1.25em;
}

h2, h3 {
margin-top: 1.5em; /* more space above than below */
margin-bottom: 0.5em;
}

h2 + p,
h3 + p {
margin-top: 0; /* heading belongs to the paragraph below */
}

p {
margin-bottom: 1.25em;
}

h2, h3 {
margin-top: 1.5em; /* more space above than below */
margin-bottom: 0.5em;
}

h2 + p,
h3 + p {
margin-top: 0; /* heading belongs to the paragraph below */
}