Letter-spacing - Property CSS
Summary of characteristics of the letter-spacing property
normalnormalComputed value : during an animation, the letter-spacing property gradually changes from one value to another.Syntax diagram of the letter-spacing property.
Description of the terms used on the diagram:
lengthis a numeric value followed by one of the CSS dimension units.%is a percentage calculated in relation to the size of the characters.
Description.
letter-spacing defines the spacing between characters, or more precisely the value to be added or subtracted
of the normal spacing between characters.
No spaces are added before the first character of the element.
In principle, no spaces should be added after the last character of the element, but browsers however, apply an extra space after the last character.
This is important when the property is applied to an inline element, which can therefore be preceded and followed by characters not affected
by the additional spacing.
Example: in this sentence, the syllable "ce" of espacement is included a span tag on which we asked for an additional 5px spacing.
See also the CSS property word-spacing to manage word spacing.
Interaction of letter-spacing with justified text.
The extra space imposed by letter-spacing is also added to the last character of the lines.
If the text is justified, it can give the impression of a larger margin on the right.
However, this disadvantage will be very little visible given the fact that letter-spacing adds very small spaces between characters
Interaction of letter-spacing with ligatures.
A ligature is the replacement of a pair of letters with a unique character of better aesthetics.
Activating ligatures is handled with the font-variant-ligatures property.
When the letter spacing is changed with letter-spacing, the browser should not apply ligature.
Indeed, the uniqueness of the ligature could not reflect the spacing requested.
In the following example, the letters f and i have been replaced by fi.
For a trained eye, the ligation is clearly visible because the dot of the i has been fused with the loop of the f.
However, on the second and third lines, character spacing has been added with letter-spacing.
Depending on the browser you are using, ligation may no longer be done, or is still being done.
Cursive scripts.
A script is said to be cursive when its characters are intertwined. Handwritten, this translates to a pen or pen that doesn't lift off the paper. Many fonts are called cursive, because they imitate this type of writing. Some languages, such as Arabic, are mainly written in cursive script.
In principle, browsers should not add spaces between characters in a cursive font. That is, the letter-spacing property should
have no effect on this type of font, or else, the connecting strokes would have to be stretched to always join the letters.
But tests show that this is not the case.
Sofia font, in cursive script
Inheritance mechanism.
The letter-spacing property is inherited by default. The inheritance mechanism depends on the unit chosen to express the value of the parent.
If it is an absolute unit, it is of course inherited identically. Units relative to a character dimension (em, cap,
etc.) are also inherited in calculated value.
But percentages are inherited as percentages, i.e. recalculated according to the font size of the child element
(However, the percentages are still very poorly managed by browsers - 2024).
letter-spacing expressed in em on the parent element.
letter-spacing expressed as percentages on the parent. ⚠
Values for letter-spacing.
- letter-spacing: normal;
Default. The space between characters is the one defined by the font.
- letter-spacing: 1px;
The space between characters will be increased or decreased by the value indicated.
A positive or negative numeric value, followed by a dimension unit (see the CSS dimension units). A negative value causes the characters to merge. Decimal values are processed. Percentages are allowed in the specification but rarely processed by browsers.
Values common to all properties:
letter-spacing: initial (normal)
letter-spacing: inherit
letter-spacing: revert
letter-spacing: revertLayer
letter-spacing: unset
Common values are presented on these pages: initial, inherit, revert, revert-layer, unset.
Animation of the letter-spacing property.
The animation of letter-spacing is very smooth: numeric values are interpreted with many decimal places.
Serializing and manipulating letter-spacing programmatically.
Change the value of letter-spacing with Javascript.
In Javascript, here's how to change the value of letter-spacing for an el element.
We see that Javascript offers a syntax with the typical CSS notation, in kebab-case (a hyphen to separate words),
and another syntax with camel-case notation (a capital letter to separate words).
let el = document.getElementById('id');
el.style['letter-spacing'] = '0.2em';
// or
let el = document.getElementById('id');
el.style.letterSpacing = '0.2em';
Read in Javascript the value of letter-spacing.
This code works if the property has been assigned directly to the element itself through the style attribute of the HTML, and not by passing
by a CSS selector.
let el = document.getElementById('id');
let value = el.style['letter-spacing'];
// or
let el = document.getElementById('id');
let value = el.style.letterSpacing;
Read the computed value of letter-spacing in Javascript.
The calculated value is the one that results from the valuation of the relative units (in particular the percentage) and the possible taking into account of inherited values. Otherwise, it will be the initial value of the property.
In the case of letter-spacing, the value 0 is returned by the word normal.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('letter-spacing');
Change the value of the letter-spacing property with JQuery.
$('#id').css('letter-spacing', '0.2em');
// or
$('#id').css('letterSpacing', '0.2em');
Read the computed value of the letter-spacing property with JQuery.
The property can be read with the following code.
let value = $('#id').css('letter-spacing');
Other code examples.
More examples of Javascript and JQuery code are given on the Javascript and CSS page.
Take the test yourself.
The buttons below apply the entered value to the letter-spacing property and then display either the value as applied,
or the computed value. This second option allows you to see how the value of letter-spacing is stored (serialized). In particular, we note
that the percentages are well remembered as percentages. All other units are converted to pixels.
Simulator.
Browser support (compatibility).
No support issues for the letter-spacing property.
letter-spacing property.letter-spacingproperty
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
KaiOS Browser
Opéra Mobile
Opéra
Firefox pour Androïd
Samsung Internet
Chrome
Edge
Firefox
Androïd Brower
Chrome pour Androïd
Baidu Browser
QQ Browser
Safari
Safari sur IOS
UC Browser pour Androïd
Opéra mini
letter-spacing property historic.
-
Cascading Style Sheets specification - Version 1
Initial definition of theword-spacingproperty in the first version of CSS.
November 17, 1995Working Draft.
November 12, 1996Proposed for recommendation.
December 17, 1996Recommendation .
September 13, 2018Old specification, declared obsolete. -
Cascading Style Sheets Level 2 - Revision 1 Specification
Theinheritvalue is accepted by theword-spacingproperty.November 04, 1997Working Draft.March 24, 1998Proposed for recommendation.May 11, 1998Recommendation . -
CSS Text Module Level 3
No change regarding theletter-spacingproeprty.January 27, 1999Working Draft.
December 22, 2020Candidate Recommendation. -
CSS Text Module Level 4
Percentage values are accepted by theletter-spacingproperty.September 22, 2015Working Draft.
On text management, see also.
Everything related to text management (alignment, spacing, hyphenation, overflow, etc.) is described in the CSS Text Module specification.
The letter-spacing property in this module, along with the following properties:
Properties:
text-align).