What are the generic font families in CSS?

The generic font classifications available to use on your website

Type blocks
Type blocks. Image courtesy Grant Faint / Getty Images

When you build a webpage and style it with CSS, a big part of that effort will be centered around the site's typography. Typographic design plays an important role in website design. 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. 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;
}

Notice that we specify the font Georgia first. By default, this is what the page will use, but if that font is not available for some reason, the page will fallback to Times New Roman. We enclose that font name 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 need them.  Finally, we end the font-stack 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.

This is preferable to allowing the site to fallback to whatever fonts it wants, because you can at least tell is what kind of font to use so that the overall look and tone of a site's design will be as intact as possible.

Generic Font Families

The generic font name available in CSS are:

  • cursive
  • fantasy
  • monospace
  • serif
  • sans-serif

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

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 large block of content like body copy. Cursive fonts are generally used for headings and larger/shorter text needs.

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, would fall into this category. Once again, 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 are ones where all the letterforms are equally sized and spaced out, 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" would take up much more room than a lowercase "i"), monospace fonts are fixed width for all characters.

 

Serif fonts are one of the more popular classifications. These are fonts that  have the little extra ligatures on the letterforms. Those extra pieces are called "serifs". Common serif fonts are Georgia and Times New Roman. Serif fonts can be used for large text like heading as well as long passages of text and body copy.

Sans-serif is the final classification we will look at. These are fonts that do not have those aforementioned ligatures. The name means "without serifs". Popular fonts in this category would be Arial or Helvetica. Similar to serifs, sans-serif fonts can be used equally well in headings as well as body content.