Specifying Fonts in CSS

Specifying Fonts in CSS

In this section, you'll learn how to use CSS to specify fonts. You can use any length units, both absolute and relative, to specify font sizes, but for reasons discussed throughout this chapter, it's best to use a relative measurement such as ems, so the user can easily scale the type to other sizes.

Introducing Font Collections

Example: body {font-family: sans-serif;}

Values: serif, sans-serif, monospace, fantasy, cursive

The simplest way to specify fonts in CSS is by using the five generic collection namesserif, sans-serif, monospace, fantasy, and cursive. These generic names cause the user agent (browser, PDA, cell phone, and so on) to serve up one of these font types. Generic collection names represent the lowest level of support for font styling, and as you will see in a moment, CSS offers some better options than these:

Serif fonts are so named because of the little details, known as serifs, at the ends of the character strokes. These are particularly noticeable in the uppercase letters. Examples of serif fonts include Times, Bodoni, and Garamond.

Sans-serif fonts do not have any details at the ends of the character strokes. They have a more plain appearance than serif fonts. Examples of sans-serif fonts include Helvetica, Ariel, and Verdana.

Sans-Serif Fonts Are Better for the Web Look at the big, text-heavy sites on the Web, such as CNN, MSNBC, or Amazon; see how just about all of them use sans-serif fonts? The small details of serif fonts provide useful additional visual information when you're reading print, but the inherently low-resolution world of the screen does not render serifs well, especially at small font sizes. If you are new to Web design, I recommend using sans-serif fonts, at least while you gain some experience using serif fonts. Sans-serif fonts look crisper and more professionalsimply changing from the default Times served up by virtually all browsers to a sans-serif font is the most effective and immediate single thing you can do to make your site look more professional.

Monospace fonts such as Courier and Monotype give equal spacing to every letter ("i" has the same amount of space as "m") and are typically used for code blocks in computer related books (this book is no exception), or to simulate the look of a typewriter, whatever that is.

Cursive fonts look like cursive handwriting, although much neater than my own. Examples include Park Lane and Brush Script. Cursive is ideal for wedding invitations and therefore really doesn't get used much on the Web. If you use it, check it in various browsers, because every browser seems to use a different font for cursive.

Fantasy fonts are ones that don't fit in the other categories. The main fantasy here is the hope that this might be a useful way to specify a font. It's almost impossible to predict what font might be served up as a fantasy font from browser to browser, and, therefore, it's best if you avoid fantasy fonts. Also, "fantasy" isn't really an accepted font collection name in the way that cursive and serif are; I have only seen this used as a collection name in CSS, but perhaps I don't get out enough.

If you want to specify a generic font, you write a declaration like this

body {font-family:sans-serif;}

In this case, the browser dishes up Helvetica or Arial or whatever sans-serif font is set as its default and is also on the viewer's computer (Figures 3.23.5). It's the most basic way to specify a font. But you can be more specific and declare a font family by name; usually that's what you want to do.