CSS propertyTypography
letter-spacing
Changes the spacing between letters.
- Initial value
normal- Inherited
- Yes
- Animatable
- yes, as a length
- Applies to
- all elements
- JavaScript
element.style.letterSpacing = "0.1em"
Example
#CSS
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.75rem;
}Example HTML
<p class="eyebrow" style="text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; color: #a78bfa; margin: 0">New module</p>
<h2 style="margin: 4px 0 0">Animations in CSS</h2>Preview
Definition and usage
#The letter-spacing property adds or removes space between characters. A positive value spreads the letters out, a negative one pulls them together. It’s most convenient to give it in em, since it then scales with the font size.
Letter spacing looks good in short, uppercase text, for example in labels and buttons. Large headings often benefit from slight tightening, e.g. -0.02em.
In running text, change the spacing carefully. Letters that are too tight or too spread out reduce readability.
Syntax
#Syntax
letter-spacing: normal | <length>;Values
#Values in practice
#normal
The spacing designed into the font.
.demo { letter-spacing: normal; }0.2em
A clear spread, typical for labels.
.demo { letter-spacing: 0.2em; }-0.05em
Tighter letters.
.demo { letter-spacing: -0.05em; }4px
A fixed spacing in pixels.
.demo { letter-spacing: 4px; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Small uppercase labels almost always need a bit of extra spacing, around 0.05-0.15em.
- Use the
emunit so the spacing grows together with the font.
Related entries
#Spotted a mistake or missing an example? Write to us.