| One feature of CSS that HTML styles have no parallel for is the ability to easily adjust the space between text, including the space between individual letters (kerning), words, and lines of text in a paragraph (leading). Of course, you could resort to non-breaking spaces and the line break tag to get a similar effect with straight HTML, but these are kludges that are difficult to implement, control, and change. With CSS, you have exact control over all of these elements and you can change them as desired. Adjusting the Space Between Letters Tracking refers to the amount of space between letters in a word, which in CSS is controlled with the letter-spacing property (Table 4.1). More space between letters often improves the readability of the text. On the other hand, too much space can hamper reading by making individual words appear less distinct on the page. Table 4.1. Letter-Spacing ValuesVALUE | COMPATIBILITY |
|---|
normal | IE4, FF1, S1, O3.5, CSS1 | <length> | IE4, FF1, S1, O3.5, CSS1 |
In this example (Figure 4.1), space has been removed in the level 1 heading (the book title) to create a cramped effect. The author name and chapter number have been spaced out; however, the spacing was overridden in the actual chapter title ("Down the Rabbit Hole"), so it appears normal. Figure 4.1. The titles have had their spacing altered for effect, while the main copy has been spaced out to look less crowded. 
Tracking or Kerning? While tracking refers to the spacing between letters in a word, kerning refers to the spacing between individual letter pairs in a proportional font. Is this splitting hairs? There is actually a distinction. Tracking is applied to a word to equally space all of the letters, while kerning is applied between each letter to give each space the same visual appearance. However, using tracking may mean that some letters are spaced (absolutely speaking) more than others. Although you could use CSS letter spacing to set the space between each letter manually, generally text kerning is accomplished using specialized layout software because it's very hard to do just by eye-balling the letters. |
To define tracking: | | 1. | letter-spacing:
Type the letter-spacing property name, followed by a colon (:) in the CSS definition list (Code 4.1).
Code 4.1. You can use letter spacing to create a visual effect by spacing out or crowding characters, using a positive or negative value, respectively.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/ DTD  /xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS, DHTML & Ajax | Adjusting Letter Spacing</title> <style type="text/css"> <!-- body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; letter-spacing: normal; } h1 { letter-spacing: -5px; } h2 { letter-spacing: 1.25em; } .author { letter-spacing: 3px; } .chapterTitle { letter-spacing: normal; } --> </style> </head> <body> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>CHAPTER I<br /> <span >Down the Rabbit-Hole</span></h2> </div> <p >Alice was beginning to get very tired of sitting by her sister on the bank ...</p> <p >So she was considering in her own mind...</p> <p >There was nothing so VERY remarkable in that...<p> </body> </html>
|
| | | 2. | -5px;
Type a value for the letter-spacing property, using either of these:s
A positive or negative length value, such as -5px, which sets the absolute space between letters. See "Values and Units Used in this Book" in the Introduction for more details. normal, which overrides inherited spacing attributes.
|
 Tip
Adjusting Space Between Words Just like adjusting tracking, adjusting word spacing can both help and hinder legibility. Adding a little space between words on the screen using the word-spacing property (Table 4.2) can help make your text easier to read, but too much space interrupts the path of the reader's eye across the screen and, therefore, interferes with reading. Table 4.2. Word-Spacing ValuesVALUE | COMPATIBILITY |
|---|
normal | IE4[*], FF1, S1, O3.5, CSS1 | <length> | IE4[*], FF1, S1, O3.5, CSS1 |
[*] IE 6 in Windows
In this example (Figure 4.2), the words in the level 1 heading overlap, while the words in the chapter title class are extremely spaced out. The copy (body text) is slightly spaced out, which has the overall effect of lightening the page by creating more white space. Figure 4.2. The space between the words has been changed for effect in the titles and slightly increased to lighten the copy. 
To define word spacing: | | 1. | word-spacing:
Type the word-spacing property name, followed by a colon (:) in the CSS definition list (Code 4.2).
Code 4.2. You can adjust the spacing between words either for effect or to lighten your page.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS, DHTML &0 Ajax | Adjusting Word Spacing</title> <style type="text/css"> <!-- body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; word-spacing: normal; } h1 { word-spacing: -1em; } h2 { word-spacing: normal; } .chapterTitle { word-spacing: 36px; } p.copy { word-spacing: 2px; } --> </style> </head> <body> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>CHAPTER II<br /> <span >The Pool of Tears</span></h2> </div> <p >'Curiouser and curiouser!' cried Alice (she was so much surprised, that for the moment she quite forgot how to speak good English)...</p> <p >And she went on planning to herself how she would manage it...!</p> <p> ALICE'S RIGHT FOOT, ESQ.</p> <p> HEARTHRUG,</p> <p> NEAR THE FENDER,</p> <p> (WITH ALICE'S LOVE).</p> <p >Oh dear, what nonsense I'm talking!'</p> <p >Just then her head struck against the roof of the hall...</p> </body> </html>
|
| 2. | -1em;
Set the value for word-spacing, using either of the following:
A positive or negative length value, representing the amount of space between words (-1em, for example). See "Values and Units Used in this Book" in the Introduction for more details. normal, which overrides inherited values.
|
Tip A positive value for word spacing adds space between words, and a negative value closes the space. A value of 0 neither adds nor subtracts space, but prevents justification (see "Aligning Text Horizontally" later in this chapter).
Adjusting Space Between Lines of Text Anybody who has ever typed a term paper knows that these papers usually have to be double-spaced to make reading easier and allow space for comments on the page. Space between lines (leading) also can be increased for a dramatic effect by creating areas of negative space between the text. The line-height property (Table 4.3) adds space between the baselines (the bottoms of most letters) of lines of text. Table 4.3. Line-Height ValuesVALUE | COMPATIBILITY |
|---|
normal | IE3, FF1, S1, O3.5, CSS1 | <number> | IE4, FF1, S1, O3.5, CSS1 | <length> | IE3, FF1, S1, O3.5, CSS1 | <percentage> | IE3, FF1, S1, O3.5, CSS1 |
In this example (Figure 4.3), the copy has been double-spaced, and the citation text has its line height set slightly above the font size. In addition, the leading for the level 1 and 2 headings have been reduced below the font size to squeeze the lines together. Figure 4.3. The line height in the titles has been tightened for effect and loosened in the copy to open it up. 
To define leading: | | 1. | line-height:
Type the line-height property name, followed by a colon (:), in the CSS definition list (Code 4.3).
Code 4.3. The line-height property adjusts the spacing between lines of text in a single paragraph, allowing you to compress or expand for effect or better readability. | | | 2. | 2.0;
Type the value for line-height, using one of the following options:
A number to be multiplied by the font size to get the spacing value (2.0 for double spacing, for example). Although a simple value of 2 works, it will not validate properly, so always include the decimal. A length value, such as 24px. The space for each line of text is set to this size regardless of the designated font size. So if the font size is set to 12px and the line height is set to 24px, the text will be double-spaced. See "Values and Units Used in this Book" in the Introduction for more details. A percentage, which sets the line height proportionate to the font size being used for the text. normal, which overrides inherited spacing values.
|
Tips Adding space between lines of text enhances legibilityespecially in large amounts of text. Generally, a line height of 1.5 to 2 times the font size is appropriate for most text. To double-space text, set the line-height value as either 2 or 200%. Likewise, 3 or 300% results in triple-spaced text. You can use a percentage value lower than 100% or length values smaller than the font size to smash text lines together. Although this effect may look neat in moderation, it probably won't ingratiate you with your readers if they can't actually read the text. Line height can also be defined at the same time as the font-size using the font shorthand property (see "Setting Multiple Font Values" in Chapter 3).
|
