Web design development. Everything about Collecting Font Styles

It's time to cover one property that handles all text properties.

While we have covered the differing style properties for text, we all know that most authors will use multiple properties to fully define a font. In these cases, you'll often see style definitions that look something like this:

.plain {font-family: Garamond;

        font-size: 12pt;

        line-height: 14pt;

        font-weight: normal;

        font-style: normal;}



.italic {font-family: Garamond;

         font-size: 12pt;

         line-height: 14pt;

         font-weight: normal;

         font-style: italic;}



.bold   {font-family: Garamond;

         font-size: 12pt;

         line-height: 14pt;

         font-weight: bold;

         font-style: normal;}

Certainly descriptive and easy to understand, but also a bit long, harder to maintain, and (marginally) longer to download from a server.

The font property allows you to combine all these values into a single property as a short of shorthand for all the individual font styles. Using font, we can replace those three previous definitions with these:

.plain  {font: 12pt/14pt Garamond;}

.italic {font: italic 12pt/14pt Garamond;}

.bold   {font: bold 12pt/14pt Garamond;}

This is much easier, but not without a few problems.

Order matters

Most importantly, the order of the values matters. You can not combine them, since the browser will never figure things out. Instead, you must put the style, weight, and variant values first, followed by the font size, followed by a slash (/) and the line height, followed by a list of comma-separated font names.

You can omit default values, which is why I omitted the value normal for the style and weight in the .plain class. To be completely correct, I should have said

.plain  {font: normal normal normal 12pt/14pt Garamond;}

.italic {font: italic normal normal 12pt/14pt Garamond;}

.bold   {font: normal bold normal 12pt/14pt Garamond;}

(The third "normal" supplies a value for the font-variant property, which can also be set to small-caps to convert lower-case leters to small capital letters.)

If you omit the font-size and line-height you'll get the appropriate sizes as determined by the browser. You can specify just the font-size by omitting the line-height, but you must also omit the preceding slash character. The reverse is not true: You cannot provide a line-height without also specifying the font-size.

Font family lists and virtual font families work as you would expect, so the style:

.plain  {font: 12pt/14pt Garamond, Times Roman, serif;}

will search first for Garamond and then Times Roman. If neither exist, it will use the browser's default serif type face for the font.

In general, the font property is much easier to use than all the equivalent font properties, provided you get the order right. It's also easier to read and understand, making your documents and style sheets that much easier to maintain and modify.

<< BACK

Dealing With Font: Collecting Font Styles