Web/CSS/letter-spacing

The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Syntax

/* Keyword value */
letter-spacing: normal;

/* <length> values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;

/* Global values */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;

Values

normal: The normal letter spacing for the current font. Unlike a value of 0, this keyword allows the user agent to alter the space between characters in order to justify text.
<length>: Specifies extra inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.

Accessibility concerns

A large positive or negative letter-spacing value will make the word(s) the styling is applied to unreadable. For text styled with a very large positive value, the letters will be so far apart that the word(s) will appear like a series of individual, unconnected letters. For text styled with a very large negative value, the letters will overlap each other to the point where the word(s) may be unrecognizable.

Legible letter-spacing must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.

Formal definition

Initial value	`normal`
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
Inherited	yes
Computed value	an optimum value consisting of either an absolute length or the keyword `normal`
Animation type	a length

Formal syntax

normal | <length>

Examples

Setting letter spacing

HTML

<p class="normal">letter spacing</p>
<p class="em-wide">letter spacing</p>
<p class="em-wider">letter spacing</p>
<p class="em-tight">letter spacing</p>
<p class="px-wide">letter spacing</p>

CSS

.normal   { letter-spacing: normal; }
.em-wide  { letter-spacing: 0.4em; }
.em-wider { letter-spacing: 1em; }
.em-tight { letter-spacing: -0.05em; }
.px-wide  { letter-spacing: 6px; }

Result

Specifications

Specification	Status	Comment
CSS Text Module Level 3The definition of 'letter-spacing' in that specification.	Working Draft	No change.
CSS Level 2 (Revision 1)The definition of 'letter-spacing' in that specification.	Recommendation	No change.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of 'letter-spacing' in that specification.	Recommendation	Initial SVG definition.
CSS Level 1The definition of 'letter-spacing' in that specification.	Recommendation	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`letter-spacing`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 4	Opera Full support 3.5	Safari Full support 1	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
SVG support	Chrome Full support 1	Edge Full support 12	Firefox Full support 72	IE Full support 9	Opera Full support 7	Safari Full support 5.1	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android No support No	Opera Android Full support 10.1	Safari iOS Full support 5.1	Samsung Internet Android Full support 1.0

Legend

Full support: Full support
No support: No support