Font-family - the basics

The first thing to set the tone of our typography is the font. Generally, there are two types of fonts - serif and sans-serif. The difference? The serif fonts have feet and the sans-serif doesn't. Here is an example

<p style="font-family:serif;">This is your browsers default serif font</p>
<p style="font-family:sans-serif;">This is your browsers default sans-serif font</p>

There has been a lot of fuzz about whether to use a serif or sans-serif when designing for the web, as there might have been a problem with the readability, but research has shown that with modern screens this is not a problem and you can actually choose the type of font you prefer.

Web safe fonts - More than just serif or sans-serif

As you probably know, there are a lot more than just two types of font out there and all webdesigners have their favorite - I have a thing for Georgia and Century Gothic, where as you might prefer other fonts. Over at CSSfontstack.com they have a neat list of all the web safe fonts out there and I have included a couple of them here - oh, and they work on both Windows and Mac!

<p style="font-family: Impact, Charcoal, sans-serif; ">Impact - a bold font</p>
<p style="font-family: Century Gothic, sans-serif; ">Century Gothic, a personal favorite</p>
<p style="font-family: Times New Roman, Times, serif; ">Times New Roman - the classic choice</p>

Setting the font family for the entire page

To set the font family for the entire page, you need to set it for the body of the document - this way all text on your webpage is rendered in this font;

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

Here is an explanation of what this snippet of CSS means - This declaration tells the browser to look for the font 'Times New Roman' and if this is not installed, use Times. If the browser doesn't have any of those use whatever generic serif font it does have.

As you can see, some of the properties have more than one value - in this example we've used three values. This is because of the fact that the browser needs a fallback, should the given font not be installed on our computer. So the font you prefer is the first value and the list ends with a generic font name, such as in this case 'serif'. Oh, and please note that all values are separated by a comma.

What you have learned

• Generally, there are two types of fonts: serif and sans-serif
• Some fonts are considered websafe and you should opt for them in the first place.
• Always include a generic font name when defining font-families, your user might not have the preferred font installed on their device.