Minor I know, but on my most recent project I decided I’d finally find out how to use this darn thing. I’ve always just gone with the following code.

  1. {
  2.  
  3. font-weight: bold;
  4.  
  5. font-size: 12px;
  6.  
  7. line-height: 18px;
  8.  
  9. }

At Method the designs are typically based on a single base font, with slightly varying fonts for headers and such, so that font is defined high in the inheritance tree to avoid duplication and to enable a single place to change if necessary. Which is why its not included in the above code.

To achieve the same thing with the font property you’ll use the following line.

  1. P {
  2.  
  3. font: bold 12px/18px inherit;
  4.  
  5. }

We have 4 parts here, and here are each of the values for those parts.

  1. bold/normal – obviously just font-weight, but you’ll need this part.
  2. 12px – just font-size, you should know what to do with this.
  3. /18px – the line-height, optional, you could omit this part if you don’t care about the line height.
  4. inherit – the font family, as we specify it higher in the tree, we don’t want to specify it over and over, so we’ll just have CSS figure it out for us.

Update: I made a silly mistake in specifying the font as auto instead of inherit. Its since been changed, but inherit uses the previously set font, auto uses what the browser default is.

1 comment

One Response to “Elegance with the Font CSS property”

  1. Black Belt Coder » Revisiting the font declaration Says:

    […] a while ago I posted about using the font CSS declaration to clean up your stylesheets a bit. I had been using the technique on a new project for the first time and it seemed to be […]

Leave a Reply