totn CSS

CSS: letter-spacing property

This CSS tutorial explains how to use the CSS property called letter-spacing with syntax and examples.

Description

The CSS letter-spacing property defines the amount of space between characters of text.

Syntax

The syntax for the letter-spacing CSS property is:

letter-spacing: value;

Parameters or Arguments

value

The amount of extra space to display between text characters (in addition to the standard spacing for the font). It can be one of the following:

Value Description
fixed Fixed value expressed in px, em, ...
p { letter-spacing: 0.5em; }
normal Normal spacing based on the chosen font
p { letter-spacing: normal; }

Note

  • If the letter-spacing property is expressed as a fixed value, it can be either a positive or negative value.
    • A positive value would add additional space between characters (in addition to standard spacing for the font).
    • A negative value would remove space between characters.
  • If the letter-spacing property is set to normal, the selected font would determine the space between characters.

Browser Compatibility

The CSS letter-spacing property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the letter-spacing property below, exploring examples of how to use this property in CSS.

Positive Fixed Value

Let's look at an example where we set additional space between characters of text using the letter-spacing property with a positive fixed value.

The CSS would look like this:

p { letter-spacing: 5px; }

The HTML would look like this:

<div>
  <p>This paragraph was written by techonthenet.com.</p>
</div>

The result would look like this:

CSS

In this CSS letter-spacing example, we have set 5px of additional space between the characters in the <p> tag. The additional space is over and above the spacing that is determined by the selected font.

Negative Fixed Value

Let's take a look at what would happen if we applied a negative value to the letter-spacing property.

The CSS would look like this:

p { letter-spacing: -1px; }

The HTML would look like this:

<div>
  <p>This paragraph was written by techonthenet.com.</p>
</div>

The result would look like this:

CSS

In this CSS letter-spacing example, we have removed 1px of space between the characters by setting a -1px value for the letter-spacing property. This removes some of the character spacing that has been added by the selected font.

Normal

Finally, let's look at what this text would look like if we set the letter-spacing property to normal (or the default, if the letter-spacing property is not set).

The CSS would look like this:

p { letter-spacing: normal; }

The HTML would look like this:

<div>
  <p>This paragraph was written by techonthenet.com.</p>
</div>

The result would look like this:

CSS

In this CSS letter-spacing example, we have set the letter-spacing property to normal which means that the spacing between characters is determined by the chosen font.

Share on: