WEB STANDARDS CREATIVITY

All caps
I am quite pleased with my drop cap. However, it is a bit visually jarring to have my paragraph go from such a bombastic
introduction directly into much smaller lowercase text. I’ll address this issue with one last bit of refinement, after which
#main will be ready to meet its public.
If you haven’t learned it in the typesetting world, you have probably learned it in the online world, especially in e-mail and
instant messages: text set in all capital letters should be used with great caution. An errant mash of the Caps Lock key can
give your audience members the impression that you are YELLING AT THEM, which isn’t the best way to keep them coming
back. With this rule in mind, all caps can still be used to great effect, and a restrained usage will make a logical bridge
between my gigantic drop cap and the much smaller body text that it introduces. Since my date stamp—October 7, 1849
(the date of Poe’s death)—already functions as a concise, self-contained opening to the text, it is a perfect candidate for the
all caps treatment.
Your first instinct might be to merely set the text in all caps right in the markup, thereby avoiding the decidedly more laborious
CSS process I am about to describe. This isn’t a good idea for a number of reasons, and chief among them is the
possibility that you may later wish to style this text differently. If this were a template from which many pages were built, it
would be a lot easier to change one rule in a CSS file than to change the markup in dozens (or hundreds or thousands) of
HTML documents. Also, as you’ll see in the following example, there can be quite a bit more to consider while setting all
caps text than merely typing with Caps Lock on.
I’ll begin by adding one last span to my markup to target the date stamp:
October 7, 1849: Lorem ipsum...
Now I just need two simple, self-explanatory CSS rules to make my datestamp class behave in the desired fashion:
.datestamp {
text-transform: uppercase;
letter-spacing: .13em;
}
Giving text-transform a value of uppercase will ensure that
my text is set in all caps. It can also take the values lowercase
(for all lowercase text) and capitalize (to capitalize the first
letter of each word). As for letter-spacing, when setting text
in all caps, a bit of extra letter spacing is key for legibility.
Through a small amount of experimentation, I came to find the
very precise 0.13em measurement to be ideal for this case
(Figure 7-19).
Figure 7-19. #main’s datestamp set in all caps Georgia
chapter 7 Bridging the Type Divide: Classic Typography with CSS
175