skip to content
.
logo picture logo text
Breadcrumb trail for Web Design:
Web Design -> Planning -> Best Practices -> Basic Skills -> Building -> Special Pages -> Publishing -> Testing -> More

Font Face - L. 07

Choosing a font face (typeface) is not as simple as it might seem. Although you surely want your website to stand out, you also want folks to be able to read your content. So choosing a font needs some consideration.

Different operating systems (Windows, Mac, Linux, etc.) only support certain fonts and few fonts are supported by all systems. If you don't have a font on your computer, then you won't see the text in that font. Your browser will choose what it thinks is most like the font. The same thing applies to visitors of your site. If you specify a font they don't have, their browser will choose. And sometimes a browser chooses the worst font ever. :^)

There are other things to take into consideration also, but for this lesson, we will stick to choosing a font face and how to put the choices in the "style.css" file.

Font Families

There are five generic font families: serif, sans-serif, cursive, fantasy, and monospace. Most web builders will specify a series of fonts - a Windows font, then a Mac font and then the generic family name. Below are the font series that many web builders choose to use.

Sans Serif Fonts - Many web builders use one of the two following series of fonts for the body text because they are common and tend to be easier for most folks to read on a computer screen.

font-family: Arial, Helvetica, sans-serif;
OR
font-family: Verdana, Arial, Helvetica, sans-serif;

Serif Fonts aren't as easy to read if used for body text, but web builders may use them for headings since the headings are generally in bold and are larger, thereby making the font easier to read.

font-family: "Times New Roman", Times, serif;

Monospace fonts have the same width for each letter no matter how wide the letter is (The lettter "l" takes up the same width as the letter, "m"). Monospace fonts are generally used for showing code or something similar:

font-family: "Courier New", Courier, monospace;

Fantasy and Cursive: Most web builders avoid using fonts that are "fantasy" or "cursive" for body text or headers. Some may use them in logos, but test to see how the font looks on the major browsers and operating systems.

However, if you have a favorite font that you want to use, you could specify it first, followed by a common series of fonts - Windows, Mac, generic family. That way, folks who had your favorite font on their computers could see it as you intended. Other folks would see your page in your 2nd or 3rd choice of style. :^) 

Adding the code to the style.css file

Once you have chosen the font face you want to use, adding it to the "style.css" file is easy. Here are the font series we will plan to use:

For the body text:

font-family: Verdana, Arial, Helvetica, sans-serif;

For the headings (h1, h2, h3, etc.)

font-family: "Times New Roman", Times, serif;

We already have started styling the body, so I'll simply add the font series inside the brackets for the body

body {background: #ffffdd url(images/weba01.jpg); color: #660000; 
font-family: Verdana, Arial, Helvetica, sans-serif;}

So far, we haven't done any styling for the heading, so we'll need to name the headings, then put the style in between curly brackets. Since I'm going to have all the headings in the same font, I'd write it this way:

h1, h2, h3, h4 {font-family: "Times New Roman", Times, serif;}

Code in style.css file so far:

body {background: #ffffdd url(images/weba01.jpg); color: #660000; 
font-family: Verdana, Arial, Helvetica, sans-serif;}

p {padding: 5px;}

h1, h2, h3, h4 {font-family: "Times New Roman", Times, serif;}

#wrapper {margin: 0 auto; width: 800px;
background: #ffffee url(images/weba02.jpg);}

#logo{}

#main{width: 550px; float: right; background-color: #ffffff;
margin: 0 10px; padding: 5px;}

#sidebar{width: 200px; float: left; background-color:
#ffffee; margin-left: 10px; padding: 5px;}

#footer{clear: both; text-align: center;}

More information:

Next: Menu - Lesson 08 -->

Website "A" List of Lessons

Basic Web Page - Creating the Basic Page Lesson 01
Basic Web Page - Common Containers Lesson 02
Basic Web Page - Add Color with CSS Lesson 03
Basic Web Page - Using "id" to specify Lesson 04
Basic Web Page - Links Lesson 05
Basic Web Page - Floats Lesson 06
Basic Web Page - Font Face (Typeface) Lesson 07
Basic Web Page - Menu - Lesson 08