Letter Spacing and Line Height

Good typography is about controlling spacing. Two essential properties are letter-spacing and line-height.

Letter Spacing

Controls the space between characters:

/* Tight spacing for headings */
h1 {
    letter-spacing: -0.02em;
}

/* Wider spacing for uppercase labels */
.label {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
}

/* Normal spacing */
p {
    letter-spacing: normal;  /* or 0 */
}

Line Height

Controls the space between lines of text. It's one of the most important properties for readability:

/* Unitless value — recommended */
body {
    line-height: 1.6;
}

/* Headings need less line height */
h1 { line-height: 1.2; }
h2 { line-height: 1.3; }

/* Body text needs more breathing room */
p { line-height: 1.6; }
.article-body { line-height: 1.8; }

Line Height Units

• Unitless (recommended) — 1.6 means 1.6× the font-size
• Pixels — 24px (fixed, doesn't scale)
• Em/Rem — 1.6em
• Percentage — 160%

Best Practices

• Body text: line-height: 1.5 to 1.8
• Headings: line-height: 1.1 to 1.3
• Always use unitless values for line-height