TIPS - CSS: Professional Techniques for Modern Layout - page 73

ORDERING YOUR FONT VALUES
h is is one of the little quirks of CSS that lots of people stumble over, sometimes without
realizing what tripped them up.

Most CSS properties that accept multiple keywords let you list them in basically any order, and
don't insist that you include every single one of them. (h ink for example of background ,
which lets you specify anywhere from one to i ve keywords and doesn't care how you arrange
them.) One of the few double exceptions is font , which not only has a minimum set of
required keywords, but also requires a certain order.

h is is the most basic font declaration you can have:

font: <font-size> <font-family> ;

Of course, you'd replace those bracketed terms with actual values, like so:

font: 100% sans-serif ;

h e point is that you must include both values, and they must be in that order—size, then
family. Reverse them, or leave one out, and any modern browser will just ignore the declara-
tion outright.

Furthermore, if you include the other keywords in your declaration, they all (except for one,
which is the subject of the next section) have to come before the required values. h us:

75

font: bold italic 100% sans-serif ;
font: italic small-caps 125% Georgia, serif ;
font: italic bold small-caps 200% Helvetica, Arial, sans-serif ;

Note how those values before the size can be all scrambled around, and it doesn't matter. h e
only thing is that they all come before the size. Put them at er, and again, browser will ignore
the whole declaration.

ROLLING IN LINE-HEIGHT
If you thought the font value patterns established in the preceding section were a little odd,
then this is where we get downright funky.

Earlier, I said that in order to have the minimum font value, “you must include both values,
and they must be in that order—size, then family.” h at's true, but it so happens that you can
drop an optional line-height value in place as a sort of hanger-on to the size (see Figure
3-2). It looks like this:

font: 100%/2.5 Helvetica, sans-serif ;