Line Height & Text Spacing

Spacing properties control the vertical and horizontal rhythm of text, making a significant impact on readability.

line-height

Sets the height of a line box. A unitless number (e.g., 1.6) is recommended — it acts as a multiplier of the element's own font-size and is inherited correctly by children.

letter-spacing

Adds or removes space between characters. Use em units so spacing scales with font-size. Slightly positive values improve readability of all-caps and small text.

word-spacing

Controls the gap between words. Useful in justified text to prevent large gaps.

text-indent

Indents the first line of a block. A negative value combined with matching positive padding creates a hanging indent.

Example

/* Comfortable line height for body text */
body {
    line-height: 1.6;
}

/* Tighter for headings — they are already large */
h1, h2, h3 {
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* All-caps label — wider tracking for legibility */
.label {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    font-weight: 600;
}

/* Hanging bullet indent */
.custom-list li {
    text-indent: -1.5em;
    padding-left: 1.5em;
}

/* Balanced heading text wrapping (Chrome 114+) */
.headline {
    text-wrap: balance;
}

CSS

Full Editor

Pro Tip

Use the unitless form for line-height (e.g., 1.6 not 1.6em). With units, the computed value is inherited by children, causing incorrect line heights when a child has a different font size.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned