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 no installed use Times. If the browser don't have any of those use a whatever generic serif font it do 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.
<PreviousNext>
^ Back to Top