UsableTypeTypography for the World Wide Web

style guide

The Shorthand Font Property

The shorthand <font> property does the job of combining all the font properties into one. This makes it easier to specify a set of font properties within one rule. Take a look at the following example.

h1 {font-size: large; font-family: Verdana, Arial, sans-serif; font-weight: bold; font-style: oblique; font-variant: small-caps;

Instead of this long drawn out rule, we can define all those properties together, as follows:

h1 {font:oblique bold small-caps large Verdana, Arial, sans-serif;}

There is one very important point that you must not forget when using the <font> property. The last two rules must always be the ‘font size’ value, followed by the ‘font family’ value. Any of the other values can be placed anywhere in the rule, but if these two rules are missing, in the wrong order, or not at the end of the rule, then the code will be invalid. This will cause most browsers to ignore the rule completely.

The shorthand <font> property is extremely useful and is a rule that you will use very frequently when working with CSS. Always calculate the best way to declare your font properties, and decide whether it is easier to declare them as seperate rules or combine them in to the one.

Latest Links

Joe finds me patronising! Arsenalski Niet

To get in touch, please use the UT form below.

Name:
Email:
Message:

close