When designing a website, one of the key elements of a page that you will work with is text content. As such, 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. Well laid out and formateed 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; }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 so the browser knows that all those words make up the font name.
If you look a the end of the font stack, you should notice that we end 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. Yes, the browser will choose a font for you, but at least you are providing 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:
- 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, these 5 above listed generic font names are the ones that you would use in a font-stack in CSS. What are the differences in these font classifications? Let's take a look!
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 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, 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. These fonts are often used when code is being displayed on a page because they look distinctly different than other text on that page.
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.
Original article by Jennifer Krynin. Edited by Jeremy Girard on 10/16/17