CSS letter-spacing Property

Description

The letter-spacing property defines the spacing between characters within an element. Browsers usually set the distance between characters based on the type and type of font, its size and the settings of the operating system. To change this value, this property is applied. It is acceptable to use a negative value, but in this case you need to make sure that the readability of the text is maintained.

Initial value: normal
Applies to: All elements
Inherited: Yes
Media: Visual
Computed value: An absolute length
Animatable: Yes
CSS Version: CSS1, CSS2, CSS3
JavaScript syntax: object.style.letterSpacing

Syntax

letter-spacing: normal | <length>

Values

normalNo additional spacing is applied.
<length>Specifies additional spacing between characters. Values may be negative, but there may be implementation-dependent limits.
inherit

Example

HTML

<p class="test">letter-spacing: -1px</p> 

<p class="test2">letter-spacing: normal</p> 

<p class="test3" >letter-spacing: 2px</p> 

<p class="test4">letter-spacing: 10px</p>

CSS

.test {
   letter-spacing: -1px; 
}
.test2 {
   letter-spacing: normal;
}
.test3 {
   letter-spacing: 2px; 
}
.test4 {
   letter-spacing: 10px;
}

Result

Browser Support

Desktop

4	12	1	1	3.5	1

Tablets / Mobile

≤37	18	4	10.1	1	1.0

Last updated by CSSPortal on: 3rd November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu