letter-spacing
Quick Summary for 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.
Code Usage for letter-spacing
/* 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; 
More Details for letter-spacing

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.

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.

MDN Understanding WCAG, Guideline 1.4 explanations Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0

Internationalization concerns

Some written languages should not have any letter spacing applied. For instance, languages that use the Arabic script expect connected letters to remain visually connected, as in the following example. Applying letter spacing will lead the text to look broken.

شسيبتنمك

Formal definition

Initial valuenormal
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Computed valuean optimum value consisting of either an absolute length or the keyword normal
Animation typea 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
CSS Text Module Level 3 # letter-spacing-property

See also

font-kerning

Last modified: Sep 10, 2021, by MDN contributors

Select your preferred language English (US)DeutschFrançais日本語한국어PolskiPortuguês (do Brasil)Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Nothing, to my way of thinking, is a better proof of a well ordered mind than a man's ability to stop just where he is and pass some time in his own company.
Seneca
Random CSS Property

scaleY()

The scaleY() CSS function defines a transformation that resizes an element along the y-axis (vertically). Its result is a <transform-function> data type.
scaleY() css reference