Nobody knows why some values can be rearranged at will, and others must
be in strict order. It’s just one of those exceptions to CSS rules that you have
to memorize.
This next style rule fails, although different browsers respond in different ways:
p {font: bold italic Garamond 26px;}
The size-family order is wrong here. This list of values ends with size, and all
such value lists must end with the font-familyvalue. IE goes ahead with
bold italics, but it ignores Garamondand the 26pxfont size.
Sadly, those in charge of the CSS specifications really dropped the ball here.
Getting this font value order wrong is an extremely common error, and this
strictness is so completely unnecessary. If browsers can distinguish between
words like bold and italic, they can certainly distinguish between digits like
26pxand words like Garamond.Oh well.
Adjusting Line Height .................................................................................
You can find a discussion of manipulating text spacing in Chapter 7, but while
we’re on the topic of the various font-properties, I want to take a brief look
at how you can manipulate the spacing between lines of text using the line-
heightproperty.
Line heights are adjusted for two primary reasons. Headlines often look
better with less white space between the lines; tiny body text sizes are more
readable with more white space between the lines.
Here’s an example showing how you to specify a change to line height. Follow
the font-sizevalue with a forward slash and the percent adjustment you
want to make to the line height. (100 percent is expressed by 1, 120 percent
is 1.2, 50 percent is .5, and so on.) A font size of 38 pixels with a line-height
adjustment that shrinks the default spacing to 94 percent of normal looks
like this: 38px/.94
Here’s an example that specifies two styles. Ordinary H1 headlines are to be
bold 32 pixel Arial. But the special class of “narrowed” H1 headlines are to be
at 94 percent of the default line spacing.
<html>
<head>
<style>
h1.narrowed {font: bold 38px/.94 Arial;}
h1 {font: bold 38px Arial;}
Chapter 5: All About Text 101
