True kerning
Real kerning is done on a letter-by-letter basis, not wholesale across the entire headline. However, you can use letter-spacing to achieve this hand-kerning. Here’s an example that defines a tighter than normal letter-spacing (-.06em) combined with an even tighter squeezing of the spacing in a class called kern (-.16em)
Ultra kerning
Notice that I had to adjust the value for the .kern class to .20em when moving to this different font (compare the code in the previous example, which was set to .16 for the Times Roman font). You have to fiddle a bit until you get the desired effect when kerning. I also added a new class named ultra keen for even tighter spacing, and then I applied both classes where needed in this code.
Vertical Tightening
Multi-line headlines should also be tightened up a bit vertically by adjusting the line spacing: reducing the white space between lines of text, as illustrated. Line spacing is known in typography as leading because typesetters once shoved in or removed spacers made of lead to separate the lines of type.
Adjusting percentages
Recall from Chapter 5 that you can adjust the line spacing by adding a percent figure to the font size. You follow the font-size value with a forward slash and the percent adjustment you want to make to the line-height. In this case, I specified that it be 99 percent, but you can fiddle around with the spacing until it looks good to your eye:
CSS3 Introduces Kerning Mode
If you find hand-kerning more trouble than it’s worth, perhaps you’ll want to wait until CSS3 properties are available. A new kerning-mode property is part of the CSS3 draft resolutions. You can use the pair value with this property to remove space between letter pairs known to have “extra” space, such as Key or You. A kerning pair threshold property specifies at what font size you want pair kerning to begin taking effect. Remember that kerning is generally only useful for large font sizes (headlines primarily). An auto value for this proposed kerning pair threshold property lets the browser decide when kerning should be used; an initial value allows you to specify the font size at which the kerning activates.
Word spacing
The word-spacing property, like letter-spacing, can be used to create justified text (aligned on both the left and the right sides). However, Web designers can make good use of it for a kerning effect on headlines to reduce unneeded white space between words.
Aligning Text Vertical aligning
The vertical-align property specifies how the text aligns vertically (surprise!) in relation to another element, such as other text (superscribing, for example) or an image (captioning, for example). You can give the vertical-align property any of the following eight descriptive values: bottom, baseline, middle, sub, super, text-top, text-bottom, and top. Or you can supply a specific measurement (such as 4px) or a percentage.
Horizontal Alignment
Adjusting text horizontally with the text-align property is similar to vertical alignment, except the following descriptive values are used: left, center, right, or justify, and the results apply to an entire paragraph rather than to individual words.
The values are essentially the same alignment values that you’d find in any word processor. The default is left (for Western languages anyway). The text-align property can only be used with block-level elements.
Indenting Text
Similar to horizontal alignment, indentation is frequently used to help readers quickly identify the start of each paragraph, and thus more easily scan text. On a word processor, indentation is typically what happens when you press the Tab key.
Last Word
If you do include a background image, you may want to display hyperlinks, labels, or other elements on top of the image. This can easily be done by specifying some absolute positioning. (If you just add the text or other element in the HTML without specifying positioning, the element appears below the bottom of the image on the page.)
