Spacing and Line Height
Fine-tuned spacing is what separates amateur designs from professional ones. This page covers every CSS property that controls whitespace around and within text.
1. Line Height (line-height)
The line-height property sets the amount of space between lines of text (also called "leading").
/* Unitless (recommended) — scales with font-size */
p { line-height: 1.6; }
/* Fixed — does NOT scale with font-size changes */
p { line-height: 24px; }
/* Relative */
p { line-height: 150%; }
Recommended Values by Context:
| Context | Value |
|---|---|
| Body text | 1.6 – 1.8 |
| Headings | 1.1 – 1.3 |
| UI labels / buttons | 1 – 1.2 |
| Code blocks | 1.5 |
2. Letter Spacing (letter-spacing)
Controls the space between individual characters (tracking in typography terms).
/* Precise and accessible */
.hero-title { letter-spacing: -0.03em; } /* Tight for large display text */
.body-text { letter-spacing: 0; } /* Default — don't touch body */
.label-caps { letter-spacing: 0.12em; } /* Wide for ALL CAPS labels */
[!TIP] For uppercase/small-caps text, always add positive letter-spacing (
0.05emor more) — all-caps text is harder to read without it.
3. Word Spacing (word-spacing)
Controls the space between words. Rarely needed, but useful for logos or display type.
.logo { word-spacing: 0.1em; }
4. Text Indent (text-indent)
Indents the first line of a block of text — classic magazine/book style.
article p { text-indent: 2em; }
5. Margin vs Padding vs Line Height: Which to Use?
| Need | Use |
|---|---|
| Space between paragraphs | margin-bottom on <p> |
| Space inside a text box/card | padding on the container |
| Space between lines of text | line-height |
| Space between heading letters | letter-spacing |
| Breathing room on a section | padding: 5rem 2rem on <section> |
6. The CSS Spacing Scale (Practical)
Establish a consistent spacing scale via CSS variables and never use arbitrary pixel values again:
:root {
--space-1: 0.25rem; /* 4px — micro gap */
--space-2: 0.5rem; /* 8px — icon gap */
--space-3: 0.75rem; /* 12px — tight */
--space-4: 1rem; /* 16px — default */
--space-6: 1.5rem; /* 24px — comfortable */
--space-8: 2rem; /* 32px — section sub-item */
--space-12: 3rem; /* 48px — section gap */
--space-16: 4rem; /* 64px — major section */
--space-24: 6rem; /* 96px — hero padding */
}
section { padding: var(--space-16) var(--space-4); }
.card { padding: var(--space-8); }
p + p { margin-top: var(--space-4); }
h2 { margin-bottom: var(--space-6); }
7. AI Prompt for Typography Spacing
Review this CSS and improve the vertical rhythm:
- Set line-height 1.6 on body, 1.2 on headings
- Space between paragraphs: 1.2em margin-bottom
- Section padding: clamp(3rem, 8vw, 6rem) top/bottom, 1.5rem left/right
- Headings should have -0.02em letter-spacing
- ALL CAPS labels should have 0.1em letter-spacing
Use CSS variables for all spacing values.