Black Belt Coder


Elegance with the Font CSS property

Posted in development by Kris Gray on the July 2nd, 2008

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.

CSS:
  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.

CSS:
  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.

One Response to 'Elegance with the Font CSS property'

Subscribe to comments with RSS or TrackBack to 'Elegance with the Font CSS property'.


  1. on July 26th, 2008 at 9:11 pm

    [...] 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