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 Font Variant
• Use word-wrap Property to allow Line Breaks in the Middle of Words
• Set Text Justification
• Set the Font Slant
• Set the border-collapse
• Use Image for List Item Bullets
• nth-child Selector
• Set the Text Case
• Set an Element's Float
• Set the Letter Spacing
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
