📘 What is CSS Letter Spacing?

The CSS letter-spacing property controls the amount of horizontal space between characters in text.

Increasing the value creates more space between letters, while a negative value brings the letters closer together.

🧩 CSS Letter Spacing Syntax

selector {
    letter-spacing: value;
}

The value can be specified using CSS length units such as px, em, rem, etc. The special value normal can also be used.

⚪ Example 1: Normal Letter Spacing

The normal value uses the browser’s normal spacing between characters.

p {
    letter-spacing: normal;
}

↔️ Example 2: Positive Letter Spacing

A positive value adds extra space between characters.

h2 {
    letter-spacing: 2px;
}

📏 Example 3: 5px Letter Spacing

.title {
    letter-spacing: 5px;
}

↔️ Example 4: Negative Letter Spacing

A negative value reduces the space between characters.

h1 {
    letter-spacing: -1px;
}

🔤 Example 5: Using em

Relative units such as em can make letter spacing scale with the element’s font size.

.heading {
    letter-spacing: .15em;
}

📐 Example 6: Large Letter Spacing

Very large spacing should be used carefully because it can make words difficult to read.

.title {
    letter-spacing: 10px;
}

▶️ Live Comparison

Compare different letter-spacing values below.

🎯 Practical Example: Website Heading

Letter spacing is often useful for headings and short uppercase labels.

.section-title {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

🧭 Practical Example: Navigation Menu

.menu a {
    text-transform: uppercase;
    letter-spacing: 1px;
}

🔘 Practical Example: Button

.button {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}

🔍 Letter Spacing vs Word Spacing

💡 Practical Uses

⚠️ Common Mistakes

• Using very large spacing in long paragraphs.
• Confusing letter-spacing with word-spacing.
• Using negative spacing so aggressively that letters overlap.
• Applying excessive spacing to small-screen layouts.
• Forgetting to test typography on mobile devices.

📝 Practice Exercises

Try these exercises in your HTML Runner:

1. Create a heading with letter-spacing: 2px;.
2. Try letter-spacing: 5px;.
3. Create tight text using -1px.
4. Create a heading using 0.15em.
5. Compare normal, positive and negative values.
6. Create a navigation menu using letter spacing.
7. Create a professional “Enroll Now” button.

📚 Quick Reference

🎓 Key Points to Remember

• letter-spacing controls the space between individual characters.
• Positive values increase spacing.
• Negative values decrease spacing.
• normal uses the browser’s normal character spacing.
• Relative units such as em can be useful for scalable typography.
• letter-spacing is different from word-spacing.
• Always prioritize readability when adjusting spacing.