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
Computed value: An absolute length
Animatable: Yes
JavaScript syntax: object.style.letterSpacing

Interactive Demo

letter-spacing: normal;

letter-spacing: 2px;

letter-spacing: .1rem;

letter-spacing: -1px;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

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

Editor

Browser Support

The following table will show you the current browser support for the CSS letter-spacing property.

Desktop

12	1	1	3.5	1

Tablets / Mobile

18	4	10.1	1	1	37

Last updated by CSSPortal on: 2nd January 2024

Support Us