BlogsDope image BlogsDope

CSS letter-spacing

June 13, 2017 HTML CSS TEXT 177

The letter-spacing property changes the space between the characters in a text. You can either increase or decrease the space between the characters using this property.

CSS

letter-spacing: value;

Values

normal : This is the default value and sets the default spacing between characters.

<length> : It is the amount of extra space in addition to the normal spacing. A positive value adds extra space between characters and a negative value decreases it. Giving 0 has no effect on the spacing. You can give the values in px, pt, em, rem, etc.

initial : Sets the property to the default value.

inherit : Inherits the value from parent element.

Example

An example of letter spacing is given below, in which the space of the characters is changed.

HTML

<p>This text has default letter spacing</p>
<p id="lspacing1">This text has extra letter spacing</p>
<p id="lspacing2">This text has reduced letter spacing</p>

CSS

<p>This text has default letter spacing</p>
<p id="lspacing1">This text has extra letter spacing</p>
<p id="lspacing2">This text has reduced letter spacing</p>

See the Pen CSS Letter Spacing by Aakhya Singh (@aakhya) on CodePen.

Browser Support

This property is supported by all the browsers, except Opera Mini. Versions of IE till 7 don't support the value inherit and are a little buggy.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).