UsableTypeTypography for the World Wide Web

style guide

Font Families

Probably one of the first things you ever did with CSS was specify a font type for the text of a web site. It is one of the most common uses for CSS as well as one of the simplest.

A font family is made up of a number of variants of a certain typeface. For example, the font family Times is made up of a number of individual variants: Times Roman, Times Italic, Times Bold, Times Bold Italic, and more. Each of these variants is a font face, and together they make up the font family we know and perhaps love as Times.

Specifying Font Families

Specifying a font family is done using the font-family property:

p {font-family:geneva;}

This would cause a CSS aware browser to render any <p> element in your document using the font Geneva.

What happens if the user's computer does not have the Geneva font available? Many Windows machines do not have this particular font installed by default, and this would cause the document in those machines to display in the browsers default font—as if we had not declared a font family at all. There is an easy solution to this problem, and that is to simply specify more fonts in your font-family declaration.

p {font-family: geneva, 'Trebuchet MS', sans-serif;}

Note the use of quotation marks around the font name Trebuchet MS. These are required because there is a space in the name of the font family. The comma being in the correct place is not enough to show that the font name contains two words, and the quotation marks must be used to make this clear.

In this example the user's browser will first look for the Geneva font. If it finds it is available then it will use this font to render your <p> element. All fine and dandy.

If it cannot find the Geneva font then it will move to the next in the list, in this case Trebuchet MS. So we have now specified two fonts: one commonly found on Macintosh machines, and one found on the Windows platform. So we have covered all our bases, right?

Yes… probably. Of course, one thing you can never do in web design is suppose something about your user’s browsing environment. We cannot assume that any user will have either of these two fonts installed, and so we come to the final part of the font-family declaration above. We could have added another font family as a third option for the browser, but we didn’t. We did something else. Those of you with eagle eyes will have already spotted it.

Generic Font Families

As well as the capability to select a particular font family, CSS allows you to specify a generic font family for your text. The purpose of this is to provide a backup for when the font, or fonts, you have specified are unavailable on the user’s machine.

Serif fonts
Serifs are extra lines or small decorations added to the ends of strokes in a character. Look closely at this T character in the Times font, and note the small lines at the end of each main stroke of the letter. These fonts are also proportional; meaning that each character’s width in the font is defined by the size of the character. For example, the letter i is of a much smaller width than the letter w. Common examples of serif fonts are Times, Georgia, Garamond, and Palatino. It is generally accepted that in print the serif style helps the eye to flow across the text during reading, and should be used for smaller text sizes.
Sans-serif fonts
Sans-serif fonts do not have serifs and are proportional. In print, this style of font is often used for larger text sizes such as headlines. Common sans-serif fonts include Arial, Verdana, Geneva, and Tahoma. Sans-serif fonts are popular on the web because they look clear, and balanced in shape and form.
Monospace fonts
Monospace fonts are not proportional; therefore each character has the same amount of space allocated to it. This type of font is reminiscent of text from an old typewriter, or output from a computer. The code examples on this website are styled in the monospace Courier font. Monospace fonts sometimes have small simple serifs on particular letters. Common examples of monospace fonts include Courier, Lucida Console, and Terminal.
Cursive fonts
A cursive font is reminiscent of human handwriting. They tend to have a curvy free feel to them, often with ornate decorations at the end of the main strokes. Common examples of cursive fonts are Comic Sans, Author, and Lucida Handwriting. Unlike serif and sans-serif fonts, there is no guarantee that there will be any cursive fonts available on a user’s machine.
Fantasy fonts
Often known as decorative fonts, fantasy fonts are everything else; fonts that cannot really be classified in any of the above categories. They may be used for funky titles or headlines but rarely for long passages of text. Common fantasy fonts include Impact, Copperplate, and Papyrus.

By specifying a generic font family you can make sure that the browser chooses the most suitable type of font for your document. Even if you are specifying many font types in your font-family declaration, it is a good idea to add a generic font family as a final backup.

In our example above, if the browser does not have either Geneva or Trebuchet MS available, it will render text in another sans-serif font that the machine does have installed.

For more information on selecting fonts for the web see Choosing Fonts in the Style Guide.

font-family
Values: [[ <family-name> | <generic-family> ] [ <family-name>| <generic-family>]] | inherit
Initial Value: dependant on user agent
Applies to: all elements
Inherited: yes

Latest Links

Joe finds me patronising! Arsenalski Niet

To get in touch, please use the UT form below.

Name:
Email:
Message:

close