CSS letter-spacing Property

CSS letter-spacing Property

The CSS letter-spacing property controls the horizontal space between characters in text.

Letter spacing can be increased or decreased to change the appearance and readability of text. CSS allows the browser's normal character spacing to be used or additional spacing to be specified with positive or negative length values.

letter-spacing Syntax

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

p {
  letter-spacing: 2px;
}

This rule adds 2px of spacing between the characters in matching <p> elements.

Normal Letter Spacing

The initial value of letter-spacing is normal. This allows the browser and font to use their normal character spacing.

p {
  letter-spacing: normal;
}

Using normal does not necessarily mean the same thing as specifying a length of 0. The normal value allows the browser some flexibility when adjusting text, while 0 specifies no additional spacing.

Positive Letter Spacing

A positive value increases the space between characters. This technique is sometimes used for headings, labels, navigation text, or other short pieces of text.

h2 {
  letter-spacing: 3px;
}

Larger values spread the characters farther apart. Excessive spacing can make words harder to recognize and should generally be used carefully.

Negative Letter Spacing

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

h1 {
  letter-spacing: -1px;
}

Negative letter spacing can create a more compact appearance, but values that are too large can cause characters to crowd or overlap.

Letter Spacing Units

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

.pixels {
  letter-spacing: 2px;
}
.em-units {
  letter-spacing: 0.1em;
}
.rem-units {
  letter-spacing: 0.1rem;
}

With em, the spacing is calculated from the element's font size. For example, 0.1em with a 20px font size produces 2px of additional spacing.

Letter Spacing and Readability

Letter spacing affects more than the visual style of text. Increasing or decreasing the spacing too much can make words more difficult to read, especially in longer paragraphs.

Small adjustments are generally more appropriate for body text. Larger spacing adjustments are more commonly used with short headings, labels, or other display text where the effect can be evaluated carefully.

When text must remain accessible, avoid forcing extremely tight character spacing and allow users to adjust text spacing without causing content to become unreadable or unusable.

Inheriting letter-spacing

The letter-spacing property is inherited. Descendant text normally uses the computed letter spacing of its parent unless another CSS rule specifies a different value.

article {
  letter-spacing: 0.05em;
}

Text within the <article> will normally inherit the resulting letter spacing unless it is changed by another rule.

letter-spacing Example

The following example uses the letter-spacing property to add space between the characters. Open the example in the editor and change 2px to another value. Try normal, 0, 4px, -1px, or 0.1em, then run the code to compare the results.

p {
  letter-spacing: 2px;
}