What Are the Generic Font Families in CSS?

Generic fonts protect the design of a site even if specific fonts fail to load

Traditional type blocks covered in ink

Grant Faint / Getty Images

Typographic design plays an important role in website design. Well laid out and formatted text content helps a site be more successful by creating a reading experience that is both enjoyable and easy to consume. Part of your efforts in working with type will be to choose the right fonts for your design and then to use CSS to add those fonts and font styles to the page's display. This is done by using what is called a font stack.

Font Stacks

When you specify a font to use on a webpage, it is a best practice to also include fallback options in case your font choice cannot be found. These fallback options are presented in the font stack. If the browser cannot find the first font listed in the stack, it moves onto the next one. It continues this process until it finds a font that it can use, or it runs out of choices (in which case it just chooses any system font it wants). Here is an example of how a font-stack would look in CSS when applied to the "body" element:

body {
font-family: Georgia, "Times New Roman", serif;
}

The font Georgia appears first, so by default, this is what the page will use, but if that font is not available for some reason, the page falls back to Times New Roman.

Enclose Times New Roman in double quotes because it is a multi-word name. Single-word font names, like Georgia or Arial, do not require the quotes, but multi-word font name with embedded spaces needs them so the browser knows that all those words comprise the font name. 

The font stack ends with the word serif. That is a generic font-family name. In the unlikely event that a person does not have Georgia or Times New Roman on their computer, the site would use whatever serif font it could find. The browser will choose a font for you, but at least you offer guidance so it knows what kind of font would work best within the design.

Generic Font Families

The generic font name available in CSS are:

While there are many other font classifications available in web design and typography, including slab-serif, blackletter, display, grunge, and more, these five generic font names are the ones that you would use in a font stack in CSS.

  • Cursive fonts — often feature thin, ornate letterforms that are meant to replicate fancy handwritten text. These fonts, because of their thin, flowery letters, are not appropriate for a large block of content like body copy. Cursive fonts are generally used for headings and shorter text needs that can be displayed in larger font sizes.
  • Fantasy fonts — are the somewhat crazy fonts that don't really fall into any other category. Fonts that replicate well-known logos, like the letterforms from the Harry Potter or Back to the Future movies, fall into this category. These fonts are not appropriate for body content since they are often so stylized that reading longer passages of text written in these fonts is much too hard to do.
  • Monospace fonts — feature equally sized and spaced letterforms like you would've found on an old typewriter. Unlike other fonts that have variable widths for letters depending on their size (for instance, a capital W takes up much more room than a lowercase i), monospace fonts use a fixed width for all characters. These fonts are often used for code readouts because they look distinctly different from other text on that page.
  • Serif fonts — employ little extra ligatures on the letterforms. Those extra pieces are called serifs. Common serif fonts are Georgia and Times New Roman. Serif fonts work great for large text like heading as well as long passages of text and body copy.
  • Sans-serif fonts — do not have ligatures. The name means without serifs. Popular fonts in this category include Arial or Helvetica. Similar to serifs, sans-serif fonts perform equally well in headings as well as body content, although some experts prefer that large blocks of text avoid sans-serif fonts because they're harder to read at small point sizes.