Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

CSS: Fonts and Text : Page 8

Learn all kinds of things about altering fonts and text.


advertisement
Letter Spacing: {letter-spacing: normal/XXunit/%}
The letter-spacing property lets you control the amount of space between each letter in a text block. When combined with DHTML features, this property can make your text animate across the page, as with the headline in Expanding Your Mind.

Traditionally, the letterspacing you use varies depending on the typeface you use, and the value you choose can make your text look "loose" or "tight" and create better readablity of the text block. However, on the Web, percentage values (which would lend themselves to this type of presentation) are not currently supported in the expected manner. As a result, it is best to think of the effect of letter spacing as something more akin to adding extra spaces or removing spaces between letters on a typewriter. You can specify the size of those extra spaces in any of the measurement units, such as pixels or points.



Example:

P {font-size: 18pt; letter-spacing: -2pt}

If you are using a CSS-enabled browser, this paragraph has a font size of 18 point and a letter spacing value of negative 2 points. The space between each letter is reduced 2 points, creating a block of letters that squish against each other.

P {letter-spacing: 5px}

If you are using a CSS-enabled browser, this paragraph has a letter spacing value of 5 pixels. That means 5 extra pixels are inserted between each letter in the text block.

Word Spacing: {word-spacing: normal/XXunits/%}
The word-spacing property lets you control the amount of space between words.

Currently, this property is not supported by any commercial browser except IE 4.01 for Mac, but it probably will be supported in future browser releases. You can specify the size of the space between words in any of the measurement units, such as pixels or points.

Example:

P {word-spacing: -2pt}

If you are using a CSS-enabled browser, this paragraph has a word spacing value of negative 2 points. The space between each word is reduced 2 points, creating a block of words that squish against each other.

P {word-spacing: 10px}

If you are using a CSS-enabled browser, this paragraph has a word spacing value of 10 pixels. That means 10 extra pixels are inserted between each word in the text block.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date