Styling Text - Beginning CSS3 - page 50

Table 4-2. Generic Font Families

Name Example Description

sans-serif In typography, serifs are little hooks at the end of strokes (see Figure 4-1 ).

A sans-serif font, such as Verdana, Arial, or Helvetica, has no such hooks.

9HUGDQD

serif

*HRUJLD

A serif font has little hooks at the end of strokes. Typical examples are
Georgia, Times, and Times New Roman.

cursive Cursive fonts look handwritten or done with a calligraphic pen.

monospace Monospace fonts display all characters the same width. This type of font

is typically used to display code examples.

fantasy

-RNHUPDQ

This generic font covers typefaces that don't fall into any other category.

serif

K K

Georgia Verdana

Figure 4-1. Hooks on the end of strokes distinguish serif fonts from sans-serif fonts

■ Most HTMl and CSS editors offer code hints for tried and tested font stacks. if your favorite font isn't listed,
choose a font stack that looks similar, and add your own choice at the beginning of the list. if a visitor has that font
installed, the browser will use it. Otherwise, it will use one of the fallback options in the font stack. To find out how
likely a font is to be available, consult the surveys at www.fluidwebtype.info/web-safe-fonts and
www.codestyle.org/css/font-family/sampler-CombinedResults.shtml .

Tip

Changing the Size of Fonts
he font-size property controls the size at which a font is displayed. The value can be set using any of the
following methods:

• Absolute-size keywords

• Relative-size keywords

• Length

• Percentages

Using Keywords to Set Font Sizes
In practice, keywords are rarely used to set the value of font-size , but it's important to mention them in case you
come across them. Table 4-3 lists the absolute-size keywords together with their recommended scaling factor and
HTML equivalents as specified in the draft CSS3 Fonts module.