Foundation HTML5 with CSS3

Constructing Content

Figure 4-33. Some text rendered in the browser’s default typeface, and then in Calibri

GENERIC FONT FAMILIES

There are five generic font family names built into the CSS language. Using any of these in a font-family

declaration will instruct the browser to render text in whatever default typeface it’s configured to use for

that generic family.

 serif: A typeface featuring serifs, which are ornamental crosslines at the ends of

a character’s main strokes. Times New Roman and Georgia are serif typefaces.

 sans-serif: Literally, “without serif”; a typeface that lacks those ornamental

flourishes. Helvetica and Arial are sans serif typefaces.

 monospace: A typeface in which every character, including punctuation, occupies

the same width. Courier and Monaco are monospace typefaces.

 cursive: A fancy typeface modeled after handwriting. Brush Script MT and Apple

Chancery are common cursive typefaces.

 fantasy: A decorative or highly stylized typeface. Impact and Copperplate are

common fantasy typefaces.

Serif typefaces are best for print, as they remain readable at small sizes. On screen, however, the fine

points of the serifs tend to be lost or blocky when rendered in pixels, so sans serif typefaces are generally

easier to read on the Web (though serifs can be quite lovely at larger sizes). Monospace typefaces are best

for displaying computer code, where it’s important to accurately make out each and every character.

Cursive and fantasy typefaces are more decorative and can be difficult to read so they should only be used

for large headings, or avoided entirely; never use a cursive or fantasy typeface for body text.

Font Size

We’ve changed the font family, but what about the size? Most browsers today render body text at a default

size of 16 pixels, which is a good average size, but might not be exactly what you want. You can change