Letter Spacing

CSS Letter Spacing

The CSS letter-spacing property controls the horizontal space between characters in text. Increasing or decreasing this spacing can change the appearance and readability of headings, labels, paragraphs, and other text.

The letter-spacing Property

The CSS letter-spacing property adds or removes horizontal space between characters. It accepts the keyword normal or a length value.

p {
  letter-spacing: 2px;
}

This rule adds 2 pixels of additional space between characters.

The normal Value

The normal value uses the normal character spacing for the selected font. It is the initial value of the letter-spacing property.

p {
  letter-spacing: normal;
}

Using normal allows the browser and font to use their standard spacing between characters.

Positive Letter Spacing

A positive length value increases the space between characters. Larger values spread the characters farther apart.

h2 {
  letter-spacing: 3px;
}

Additional letter spacing is sometimes used with headings, labels, or short uppercase text to create a more open appearance.

Negative Letter Spacing

A negative length value reduces the space between characters, bringing them closer together.

h2 {
  letter-spacing: -1px;
}

Negative values should be used carefully because excessive tightening can cause characters to overlap or make text difficult to read.

Letter Spacing Units

The letter-spacing property accepts CSS length units such as px, em, and rem. Relative units can be useful when spacing should scale with text size.

.pixels {
  letter-spacing: 2px;
}

.relative {
  letter-spacing: 0.1em;
}

A pixel value provides a fixed amount of additional spacing, while an em value scales with the element's font size.

For example, 0.1em adds spacing equal to one tenth of the element's current font size.

Try Different Letter Spacing

Edit the letter-spacing values in the example to compare normal, wider, and tighter character spacing.

Letter Spacing and Inheritance

The letter-spacing property is inherited. Descendant elements generally use the letter spacing of their parent unless another CSS rule specifies a different value.

section {
  letter-spacing: 2px;
}

section p {
  letter-spacing: normal;
}

Text inside the section inherits the additional spacing, while paragraph text returns to normal character spacing.

Letter Spacing and Readability

Small changes in letter spacing can affect how easily text is read. Excessive positive spacing can make words appear disconnected, while excessive negative spacing can make individual characters difficult to distinguish.

The appropriate amount depends on the font, font size, capitalization, and type of content. Body text usually works best with the font's normal spacing or only minor adjustments.

When to Use Letter Spacing

Letter spacing can be useful for adjusting the appearance of headings, navigation, labels, buttons, and other short text. It is especially common when styling uppercase text, where a small amount of additional spacing may improve its appearance.

Use letter spacing as a typographic adjustment rather than as a substitute for spaces in the HTML content. Actual spaces between words belong in the document text.

Summary

The CSS letter-spacing property controls the horizontal space between characters. The normal value uses the font's normal spacing, positive length values increase spacing, and negative values reduce it. Length units such as px and em can be used depending on how the spacing should behave.

The next tutorial covers Word Spacing and how CSS controls the additional space between words.