Font

The font property is not one I use that much. On the one hand is provides a useful shortcut for setting multiple properties at once. But the downside is there are a bunch of specific rules to follow (below) and it can produce less readable code than declaring the properties separately.

The font property is shorthand for:

• font-family
• font-size
• font-stretch
• font-style
• font-variant
• font-weight
• line-height

At first sight it may seem simple but there are actually a bunch of rules when using it that if not followed won’t work and the property will be ignored.

Having said that if you know the basic rules it’s a really handy shortcut that can save time and space in your CSS.

The rules

These are bit confusing and not necessarily worth remembering. In order of importance I’d say:

The 2 essential rules in my mind are:

1. There are two obligitory values, font-size and font-family that are always present.
2. The value for font-family always comes last.

The necessity of having to state the font-family each time what makes using font less of a shortcut. Typically if you only use one font you’ll only need to declare it once in your whole CSS. Keeping the font-family in a custom property can save time and extra code.

A third rules states you can use font to define line-height but you use it with the font-size value separated by just a slash. This is one of my favourite parts of the font property. Different sized fonts often need different line heights. The bigger the font the samller the line height.

3. The line-height value is bundled with font size following a forward slash font: 2em/1.1 'segoe ui, sans-serif.

4. The values font-weight, font-style and font-variant must go before font-size.

p {
    font: italic bold small-caps 1.5em arial, sans-serif;
}

5. The values for font-variant can only be normal or small-caps. There are a lot more options with newer CSS.
6. The font-stretch values can only use single keyword values, so no percentage values.