CSS letter-spacing Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 27 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The letter-spacing property in CSS is used to control the spacing between characters in text. By adjusting the letter spacing, you can enhance the readability and visual appeal of your text.

This property is particularly useful for creating different typographic effects and ensuring that your text fits well within its designated space.

💡 Syntax

The syntax for the letter-spacing property is simple. It can be applied to any text-containing element.

Syntax

Copied

element {
  letter-spacing: value;
}

Here, value can be any valid CSS length unit (such as px, em, rem, etc.) or the keyword normal.

🎛️ Default Value

The default value of the letter-spacing property is normal, which means the default spacing between characters is used, as determined by the font's design.

🏠 Property Values

Value	Description
normal	Default character spacing as specified by the font.
length	Specifies the exact space between characters. This can be a positive or negative value, allowing you to increase or decrease the space, respectively.

📄 Example

In this example, we'll apply different letter spacings to a heading and a paragraph.

index.html

Copied

<!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>
    h1 {
      letter-spacing: 2px; /* Increased spacing */
    }
    p {
      letter-spacing: -0.5px; /* Decreased spacing */
    }
  </style>
</head>
<body>
  <h1>Increased Letter Spacing</h1>
  <p>This paragraph has slightly decreased letter spacing, making the text appear more condensed.</p>
</body>
</html>

🖥️ Browser Compatibility

The letter-spacing property is widely supported across all major modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is a reliable property to use in your web projects for controlling text appearance.

🎉 Conclusion

The letter-spacing property is an effective tool for web designers looking to refine the presentation of text on their websites.

Whether you're aiming for a particular aesthetic or need to adjust text for better readability, controlling letter spacing can make a significant difference. Experiment with different values to see how this property can enhance the typography of your content.