Set the Letter Spacing
By Stephen Bucaro
Use the CSS letter-spacing property to increase or decreases the space between
letters. You might set the letter spacing different than the default setting when you need
the text to fill a predefined area, or when you want to add an attention-getting effect.
You can increase or decrease the letter spacing.
Shown below is the default spacing between letters.
BIG SALE
Increase the letter spacing to get attention. Shown below is the letter-spacing
set to 4 pixels.
<p style="letter-spacing:4px;">BIG SALE</p>
BIG SALE
Decrease the letter spacing to create an over-lapping effect. To decrease the letter
spacing less than the default setting, use a negative value. Shown below is the
letter-spacing set to -4 pixels.
<p style="letter-spacing:-4px;">BIG SALE</p>
BIG SALE
Because the letter-spacing property is inherited, you may need to set it to
the value normal to return the letter spacing to default in a child element.
Shown below, the letter spacing for the div is set to 10 pixels, but the letter spacing
for the span within the div is set to normal.
<div style="letter-spacing:10px;">These words are
<span style="letter-spacing:normal;">
These letters are spaced normally</span>
spaced 10 pixels</div>
These letters are These letters are spaced normally spaced 4 pixels
More CSS Quick Reference:
• Set The Cursor Style
• Set the Border Color
• Specifying Color
• nth-child Selector
• Set an Element's Overlap (z-index)
• Style the First Letter
• Set the Text Decoration
• Set the Background Properties
• Set the Line Spacing
• Set the Border Properties
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
