CSS Detailed explanation of letter-spacing

1. What is letter-spacing?

In CSS, letter-spacing is a property used to control the spacing between characters in text. By setting different letter-spacing values, we can adjust the horizontal spacing between characters, thereby changing the layout of the text.

letter-spacing can be applied to all text content, including body copy, headings, links, and more.

2. letter-spacing Syntax

The letter-spacing property has the following syntax:

selector {
letter-spacing: normal|length|initial|inherit;
}

• normal: The default value, character spacing matches the font’s natural spacing.
• length: Sets the character spacing using a specific length. This value can be positive or negative; negative values ​​will make the characters closer together.
• initial: Resets the property to its default value.
• inherit: Inherits the property value from the parent element.

3. How to Use letter-spacing

To use the letter-spacing property, simply apply it to the elements selected by the selector. Here are some common examples.

3.1 Applying to Paragraphs

p {
letter-spacing: 2px; 
} 

The above code will add 2 pixels of horizontal spacing to all paragraph elements.

3.2 Apply to Headings

h1, h2, h3 {
letter-spacing: 1px;
}

The above code will add 1 pixel of horizontal spacing to all h1, h2, and h3 headings.

3.3 Apply to Links

a {
letter-spacing: 0.5em;
}

The above code will add 0.5em of horizontal spacing to all link elements.

4. letter-spacing Value Range

4.1 Using Specific Length Values

letter-spacing can take a specific length value, using units such as pixels (px), percentages (%), and ems. The value can be positive, negative, or zero.

p { 
letter-spacing: 10px; 
} 

The above code will add 10 pixels of horizontal spacing to all paragraph elements.

h1 { 
letter-spacing: -2px; 
} 

The above code will reduce the horizontal spacing of all h1 headings by 2 pixels.

h2 { 
letter-spacing: 0; 
} 

The above code will set the default character spacing for all h2 headings.

h3 { 
letter-spacing: 1em; 
} 

The above code will add 1em of horizontal spacing to all h3 headings.

4.2 Using Keywords

In addition to specific length values, letter-spacing also supports keywords to set character spacing.

• normal: The default value, character spacing is consistent with the font’s natural spacing.

p {
letter-spacing: normal; 
} 

The above code will set the default character spacing for all paragraph elements.

4.3 Inheriting Property Values

If we want a child element to inherit the value of the parent element’s letter-spacing property, we can use the inherit keyword.

.container {
letter-spacing: 2px;
}

.child {
letter-spacing: inherit;
}

In the above code, the element with the .container class will have a 2-pixel character spacing, while the element with the .child class will inherit the parent element’s character spacing.

5. Notes

5.1 Relationship with Font Size

The letter-spacing property does not automatically adjust with font size. If we change the font size, we may need to readjust the character spacing to maintain proper typography.

5.2 Relationship with Chinese Characters

Chinese characters do not have noticeable spacing between characters. Therefore, the value of the letter-spacing property has no visible effect on Chinese text.

6. Compatibility of letter-spacing

The letter-spacing property is well-compatible with most modern browsers. However, some older browsers (such as IE6) may not support it.

To ensure compatibility, we can use a fallback to letter-spacing: the word-spacing property. The word-spacing property sets the spacing between words and achieves a similar effect.

p {
word-spacing: 2px; 
} 

The above code will add 2 pixels of horizontal spacing to all paragraph elements.

Summary

By setting the letter-spacing property, we can easily adjust the horizontal spacing between characters to achieve different text layout effects. However, we need to be aware of issues related to font size, Chinese characters, and browser compatibility.