VOOZH about

URL: https://www.geeksforgeeks.org/css/css-letter-spacing-property/

⇱ CSS letter-spacing Property - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

CSS letter-spacing Property

Last Updated : 22 May, 2026

The letter-spacing property in CSS is used to control the spacing between characters in a text element. It helps improve readability and allows developers to create unique text styling effects.

  • Supports both positive and negative values to increase or decrease character spacing.
  • Commonly used in headings, titles, and paragraphs for better text appearance.
  • Helps enhance typography and create visually appealing web designs.

Syntax

letter-spacing: normal | length | initial | inherit;

Property Values

PropertyDescriptionExample
letter-spacingAdjusts the space between characters in text.letter-spacing: 2px;
normalApplies the default letter spacing for the current font (no extra space between characters).letter-spacing: normal;
lengthAdds or subtracts space between characters using a specified length (positive or negative).letter-spacing: 1em;
initialResets the property to its default value (normal).letter-spacing: initial;
inheritInherits the letter-spacing value from the parent element.letter-spacing: inherit;
Positive valueIncreases the space between characters.letter-spacing: 3px;
Negative valueDecreases the space between characters, pulling them closer together.letter-spacing: -1px;

CSS letter-spacing Property Examples

Here are some examples of the CSS letter-spacing property:

Example 1: Using letter-spacing with normal value

Here, we apply the letter-spacing: normal; property to a paragraph, which means the text will use the default character spacing for the font. No additional space is added between characters. The page also features centered text with a green heading.

Example 2: Spreading out the text

Here, we apply the letter-spacing: 5px; property to the paragraph, which increases the space between characters by 5 pixels. The text will appear more spaced out, creating a wider gap between each character in the paragraph. The text is also centered, with a green heading.

Comment
Article Tags: