Fonts

Other than color, what can you control with CSS? Many things, but one of the important ones is the font. What is a font? A font is a collection of pictures of letters. Huh? A "letter" is some kind of Platonic ideal, like perfect circles or archetypal chairs. It's also a unit of information. Any particular letter is drawn by some person. Some are simple block letters, others are works of art (like medieval illuminated manuscripts). A font is a collection of these pictures, one for each character in the character set.

Font Properties

There are systematic ways in which fonts can be characterized:

serif or sans-serif. Serifs are the little marks at the end of the strokes of a letter. Along the baseline, they are horizontal, and can help guide your eye along the line. Some fonts have them, some don't. ("sans" is French for "without.") Times is a serif font; Arial is sans-serif.
Family: Verdana, Arial and Geneva are all sans-serif fonts, yet they look different: they are different families. Each font family is the creative product of some artist or foundry.
Style: some fonts are upright or normal, others are slanted with a little extra curliness that we call italic. Some font artists define several styles for their font families.
Size: fonts might be 10 point, 12 point, or many other font sizes. (A point is 1/72nd of an inch.) Some fonts simply scale the "design size," so, for example, 12 point is simply 20 percent larger than 10 point. Other fonts modify the scaling for artistic beauty. You can also use seven abstract "absolute" sizes (they specify elements of a table of font sizes kept by the browser) named

"xx-small," "x-small," "small," "medium", "large," "x-large," "xx-large"

You can also use abstract "relative" sizes named "larger" and "smaller," that are relative to the surrounding font.
Weight: The designer may produce variant fonts with thicker or thinner lines. Fonts with thicker lines we often call bold.

The conventional wisdom is that sans-serif fonts look best on the web, while serif fonts look better in print (because of the much greater resolution of print). You can read more about Choosing a Font Family. For an in-depth description of Fonts see the Chapter on Typefaces (the formal name of "fonts").

Dynamic Font Comparison

The following example lets you compare fonts along different dimensions. If you choose "all" from the menu, you'll see the font for each possible value in the result window. If you choose a particular value from the menu (such as "normal," which is the default), you'll only see fonts using that one value. If you choose "all" from every menu, you'll see 12x2x7x2=336 font samples. The samples open in another window, and take a few seconds to generate.

Dimensions	Font Family	Style	Size	Weight
Dimensions
Sample text

Font Example

Let's see some examples of playing with font properties. Let's define something for the STRONG tag:

This is 
    <STRONG style="
    font-family: Impact;
    font-size: 14pt;
    font-style: normal;
    font-weight: normal
    ">
    certainly
    </STRONG>    
    very interesting.

Note that each font property is on a different line, only for readability. The semi-colons are the key thing; the browser ignores the line breaks. "Impact" is just the name of a font family, just as you'd see on the font menu in MS Word.

This is certainly very interesting.

Fonts and Copyright

Because a font is a work of art, many fonts are fall under the copyright laws, which we will discuss later in the course. There are many fonts that are public domain or free, but you should not automatically assume that a font is free.

You can search the web for free fonts (there are many sites that have them), but there's little incentive in this course. A web page will only show up in the font you choose if the font exists on the browser's computer. Stick to common font families for your pages.

A web search turns up many lists of "browser-safe" fonts: fonts that are probably installed on your user's computer. Those lists don't all agree. Here are some helpful links:

Learning More

The following are useful pages for learning more about fonts. If you find a good page to add to this, please send it to us.

http://www.bigbaer.com/css_tutorials/css_font_size.htm. Nicely narrative tutorial.
http://www.w3schools.com/css/css_font.asp CSS font properties. More of a reference than a tutorial.
http://www.w3.org/TR/REC-CSS2/fonts.html. Very technical, but authoritative.

© Computer Science 110 Staff
This work is licensed under a Creative Commons License
Date Modified: Thursday, 24-Jan-2008 12:29:31 EST