CSS Basics: Font Styling

Let’s face it, the default settings on browsers are hardly great for the look of your site. So next step, with your HTML page, is to add in some font styling.

The Font Properties

Font properties work on any selector that contains text. Most font properties are easy to spot as they start with the word ‘font’, however our first selector is simply ‘color’ (and our last selector is line-height). This is one point to remember, as ‘font-color’ will not work!

color

We’ve seen the color property when styling page links a couple of weeks ago. This property allows you to set the color of the text within the target selector, and accepts the hexadecimal, RGB and pre-defined colour names, as a value.

As briefly mentioned last week, it’s recommended to always set a background colour when setting a font colour, so that you can be certain if something else doesn’t load, or for some other reason, your text will always be readable.

So an example of use would be

body {
    color: black;
    background: white;
}
h1 {
    color: navy;
    background: white;
}
p {
    color: white;
    background: navy;
}

The above sets the body properties to have black text with a white background. All selectors within the body (ie. everything on the page except for links) will inherit this if they’re not specifically set further down in the stylesheet. I’ve then set all h1 headers to be in a navy blue, and then all paragraphs of content will have a navy background with white text.

font-family

This sets the font to be used for the text. It takes a comma separated list of fonts, and the priority reads from left to right. If the user doesn’t have the first font specified, it will try the next and the next until a match is found. However, it’s widely recommended to ensure that one of the fall back fonts is a ‘web safe’ font, which are fonts that are generally available on the default installations of computers. You should also have the last font in the list as a generic family name, such as serif or sans-serif.

For multiple word names, eg. Times New Roman, these should be surrounded by quotes ie. “Times New Roman”. An example of this is

body {
    font-family: Verdana, "Times New Roman", sans-serif;
}

If you want to use the Arial font, then also specify Helvetica for Mac Users, which is their equivalent e.g.

body {
    font-family: Arial, Helvetica, "Times New Roman", sans-serif;
}

font-size

This controls the size of the text. It can accept a value in pixels (px), em, ex or a percentage (it can also accept a numerical value in mm, cm, inches, points (pt) and pc, however it’s not recommended to use these length measurements). It can also accept one of a number of predefined values – xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, inherit.

body { font-size: 12px; }
p { font-size: 11px; }

font-style

This allows you to effectively set the font to be italic or not. It accepts one of 4 values, italic, normal, oblique or inherit.

body { font-style: italic; }
p { font-style: none; }

font-variant

This allows you to set the font to display in small capitals or not. It accepts one of 3 values, small-caps, normal, inherit.

h1 { font-variant: small-caps; }

font-weight

This sets the font weight of the text. It accepts the values lighter, normal, bold, bolder or a number of either 100, 200, 300, through to 900 (multiples of 100) – however the support for numbers is quite inconsistent across browsers.

An example of use would be

a { font-weight: bold }
a:visited { font-weight: normal }

line-height

This is our other selector for fonts that doesn’t start with ‘font’. The line-height selector controls the height of the line that the text sits in. If the line-height given is larger than the font size specified, then the text is vertically centered within the given line-height ie. a font size of 10px with a line height of 20px will mean that there will be 5px of white space above and below the text eg.

p#specificdiv {
    font-size: 10px;
    line-height: 20px;
}

Font Shorthand

As with the background properties, we have a shorthand version for the font properties (this doesn’t include color). Using this is slightly stricter than the background shorthand however. A full example is

body {
    font: italics bold small-caps 10px/15px Arial, Helvetica, sans-serif;
}

This is in the order of font-style font-weight font-variant font-size/line-height font-family.

You can omit all of these besides font-size and font-family, which are always required when using the font property. Also, ensure that the last two values, regardless of what else is used, are the font-size (with or without the line-height) and the font family. Any of the following examples would be fine to use

body {
    font: 12px Arial, Helvetica, sans-serif;
}
p#specificdiv {
    font: italics bold 11px Arial, Helvetica, sans-serif;
}
h1 {
    font: small-caps 14px/18px Arial, Helvetica, sans-serif;
}

For the items not set, the default of normal is automatically used, so even if the body selector has a italics setting, if the font property is used on the h1 and it doesn’t specify italics then it will be reset to normal and not inherit the italics value.

Next week I’ll go back to the HTML basics and continue through some more mark up to allow you to improve on your basic understanding, or understand your current theme a little more!

Written by Sarah from Stuff By Sarah
Posted on December 4th, 2008 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

2