CSS Letter-spacing

CSS letter-spacing Property – Control Space Between Letters

The letter-spacing property in CSS is used to control the space between characters in text. It can be applied to any text element, affecting the horizontal spacing between each character, also known as “tracking.”

1. Syntax

letter-spacing: normal | length | initial | inherit;
  • normal: Default spacing. This lets the browser set the spacing.
  • length: Specifies the amount of space between characters. It can be a positive or negative value, using units like px, em, rem, etc.
  • initial: Resets the property to its default value.
  • inherit: Inherits the letter-spacing value from the parent element.

2. Usage

The letter-spacing property is typically used to improve readability, create stylistic text effects, or fit text within a specific design layout.

3. Examples

Example 1: Increasing Letter Spacing

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Letter Spacing Example</title>
  <style>
    .spaced {
      letter-spacing: 2px;
    }
  </style>
</head>
<body>
  <p class="spaced">This text has increased letter spacing.</p>
</body>
</html>

Try It Now

Explanation: The text in the paragraph has a letter-spacing of 2px, which increases the space between each character by 2 pixels.

Example 2: Decreasing Letter Spacing

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Letter Spacing Example</title>
  <style>
    .tight {
      letter-spacing: -1px;
    }
  </style>
</head>
<body>
  <p class="tight">This text has reduced letter spacing.</p>
</body>
</html>

Try It Now

Explanation: The text in this paragraph has a letter-spacing of -1px, reducing the space between each character by 1 pixel, making the characters appear closer together.

Example 3: Using em for Relative Spacing

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Letter Spacing Example</title>
  <style>
    .relative-spacing {
      letter-spacing: 0.1em;
    }
  </style>
</head>
<body>
  <p class="relative-spacing">This text has relative letter spacing.</p>
</body>
</html>

Try It Now

Explanation: Using 0.1em as the letter-spacing makes the spacing relative to the current font size, allowing for more flexible and scalable designs.

4. Considerations

  • Readability: Too much or too little spacing can affect readability. Aim for a balance that enhances the text’s legibility.
  • Design Consistency: Use letter-spacing consistently across similar elements to maintain a uniform design.
  • Font Considerations: Some fonts may render letter-spacing differently, so testing across various fonts and devices is essential.

5. Best Practices

  • Adjust for Readability: Use letter-spacing to improve the readability of long text or headings.
  • Responsive Design: Consider adjusting letter-spacing for different screen sizes to ensure optimal readability.
  • Pair with font-size: When adjusting letter-spacing, also consider the font-size to ensure the overall text appearance remains visually appealing.

The letter-spacing property is a valuable tool for enhancing text presentation, providing control over the horizontal spacing between characters to suit various design and readability needs.