1. Technology

What is a Font?

Understanding Fonts is Key to Using CSS


Examples of Typefaces

Examples of Typefaces

Jennifer Kyrnin

Most beginning designers, when they think “font” are thinking of the font face. The font face is the actual typeface that is used for the type. But technically, the font is everything about the type from the weight (boldness), size, line height, and so on. This article will explain how to change the font face or font family using CSS.

The most common way that Cascading Style Sheets are used is to change the font of a web page or site. But in order to get the most out of the style sheets as well as the fonts, you should know a little about typography and how CSS works with fonts.

The Font Families

Cascading Style Sheets (CSS) recognizes five generic font families:

  1. Serif
  2. Sans-serif
  3. Script
  4. Monospace
  5. Fantasy

These categories or master families are considered generic families because they do not refer to any specific typeface. If you use these cateogory names in your CSS, the browser will choose the typeface that is the default for that category on that computer.

Each category has many different typefaces that are a part of the family. I’ve put up a graphic to show examples of the different typefaces for each category.

Using the Font Categories

When you’re going to build a CSS call to define the typeface of your elements, you should keep the above categories in mind. They are each suited to different uses, and it’s better not to mix them in a style call.

  • Sans-serif fonts should be the basis of your web content. They are easy to read online and there are many that are common to most computer operating systems.
  • Serif fonts are best used in print style sheets because serif fonts can be difficult to read on computer monitors, but they make printouts much easier to read.
  • Monospace fonts should be used when the spacing of the content is important—such as with pre-formatted text. Another common use of monospace fonts is to display code or other technical details.
  • Script fonts are best used as signatures or other locations where the look of cursive handwriting is desired. Keep in mind that not all computers have the same script fonts defined, so it’s a good idea to define an alternate sans-serif font as a backup.
  • Fantasy fonts are best used for headings and artistic text. However, they are the least common of all the categories, so unless you know that all your readers will have the font on their system, it is best to have a sans-serif alternate in your font list.

Using CSS to Define Font Families

Because it’s impossible to know the exact setup of every person who visits your web page, it is very important to write CSS that is flexible, but still presents the basis of the design you want. This means, that when defining the typeface to display, always use a list of fonts, called a font stack, in your order of preference, with a generic font family from the list above as the last entry.

Define the typeface using the font-family style property. Here are some examples:

  • sans-serif body copy
    body { font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; }
  • serif body copy for print
    body { font-family : "Times New Roman", Times, serif; }
  • monospace for code segments
    code { font-family : "Courier New", Courier, monospace; }
  • script for address or signatures sections
    address { Corsiva, "Lucida Handwriting", script; }
  • fantasy for initial paragraph lettering (defaulting to sans-serif if my fantasy font isn’t available)
    p:first-letter { "Comic Sans", sans-serif }

Some Things to Note When Adjusting Fonts on a Web Page

  1. Always define your most preferred font first in the list.
  2. If a font has spaces in the name, put it in quotes. e.g. font-family: "Times New Roman", sans-serif;
  3. Always define the generic families you’ll be using before deciding on specifics like size, actual typeface, or other type options.

©2014 About.com. All rights reserved.