CSS Font Shorthand

CSS Stylesheets can sometime became large and unmanageable especially on large projects so it’s important to use shorthand wherever possible to keep your CSS simple, easy to understand and to keep the file size down to a minimal.

This quick tip will demonstrate how CSS shorthand for fonts can be applied to limit the amount of rules required when styling fonts.

Anyone that’s familiar with CSS should understand the following snippet of CSS code

body {
font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
font-size: 100%;
line-height: 1.25;
font-weight: bold;
font-variant: small-caps;
font-style: italic;
}

In the above bit of code we have six rules that apply various effects to the font within a page. It works but it’s a bit excessive don’t you think?

Well, we can replace it with the following CSS shorthand rule

body {
font: bold small-caps italic 100%/1.25 "lucida sans", verdana, arial, helvetica, sans-serif;
}

Much nicer and easier to read.

However, there are a few rules that you must stick to when using the CSS font shorthand rule.

• It will only work if both the font-size and font-family are specified so isn’t ideal for all situations
• The font-family must be the last value
• The font-size/line-height must always be the second to last value before the font-family (note: line height is optional)
• If the font-weight, font-variant or font-style aren’t specified then these values will default to normal

It may not be ideal for all situations as you may find that you don’t want to specify the font-family in multiple styles but for the initial declaration for blocks of text and/or the body it’s definitely worth considering.