html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS letter-spacing property

Definition

The CSS letter-spacing property allows us to specify the spacing between text characters.

Applies To

All elements.

Property Values

inherit - Text attributes inherited from the parent element.

length - Defines a letter spacing value in a unit measurement such as em or pixel.

normal - The normal spacing as applied to the current font (default).

Default Value

Default value is set to normal which produces spacing applicable to the current font.

Inheritance

The letter-spacing property is inherited from the parent element if none is applied to the current element.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS letter-spacing property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS letter-spacing Property</title>

<!-- Valid values for CSS letter-spacing Property are:
	
	inherit, length and normal.
	
--> 

<style type="text/css">

/* Body letter spacing set to 8 pixels to show inheritance */
.bodypos8 {
  letter-spacing: 8px;
}

/* Paragraph with positive letter spacing (increases space between characters) */
.parapos2 {
  letter-spacing: 2px;
}

/* Paragraph with positive letter spacing (increases space between characters) */
.parapos5 {
  letter-spacing: 5px;
}

/* Paragraph with normal letter spacing (defaults to current font) */
.paranormal {
  letter-spacing: normal;
}

/* Paragraph with normal letter spacing (inherits from parent element) */
.paraparent {
  letter-spacing: inherit;
}

/* Paragraph with negative letter spacing (decreases space between characters) */
.paraneg1 {
  letter-spacing: -1px;
}

/* Paragraph with negative letter spacing (decreases space between characters) */
.paraneg2 {
  letter-spacing: -2px;
}

</style>

</head>
<body class="bodypos8">
<p class="parapos2">Paragraphs letter spacing has been increased by 2 pixels</p>
<p class="parapos5">Paragraphs letter spacing has been increased by 5 pixels</p>
<p class="paranormal">Paragraph has letter spacing as applied to the current font</p>
<p class="paraparent">Paragraph letter spacing will be inherited from parent element
   which in this case is the body element which has letter spacing set to 8 pixels</p>
<p class="paraneg1">Paragraph letter spacing has been reduced by 1 pixel</p>
<p class="paraneg2">Paragraphs letter spacing has been reduced by 2 pixels</p>
</body>
</html>

How It Looks

The results of using the letter-spacing property with the values above will look something like the following:

notepad
CSS left    << Prev          Next >>   CSS line-height

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.