CSS `letter-spacing`: Adjusting Character Spacing for Enhanced Typography

Learn how to fine-tune the spacing between characters in your text using CSS `letter-spacing`. This tutorial explains how to use different units (pixels, ems, etc.) and the `normal` keyword to adjust letter spacing for improved readability, creating visually appealing and professional typography in your web designs.

Adjusting Letter Spacing with CSS `letter-spacing`

Understanding `letter-spacing`

The CSS `letter-spacing` property controls the spacing between letters within a block of text. It allows you to adjust the horizontal spacing between characters, making text more or less condensed. This can enhance readability or create specific visual effects. The property affects all characters within the selected element(s).

`letter-spacing` Property Syntax and Values

The syntax is:

letter-spacing: normal | | initial | inherit;

The property values are:

  • normal (default): Uses the browser's default letter spacing (typically 0).
  • (e.g., `2px`, `0.5em`, `1cm`): Specifies extra spacing (positive values) or less spacing (negative values) using length units. Larger values increase the space between letters; negative values bring them closer together.
  • initial: Resets the property to its default value (normal).
  • inherit: Inherits the value from its parent element.

Example: Different `letter-spacing` Values

This example shows different `letter-spacing` values. You would need to create corresponding HTML elements (e.g., paragraphs) to see these effects in a browser. The CSS `letter-spacing` property is applied directly to the text element.

CSS Code

p:nth-child(1) { letter-spacing: normal; }
p:nth-child(2) { letter-spacing: 7px; }
p:nth-child(3) { letter-spacing: 0.7em; }
p:nth-child(4) { letter-spacing: -1px; }

Observe how the letter spacing changes with different values. Extremely large positive values will make the letters very spread out; very large negative values can cause the letters to overlap.