CSS: Meaning of font-family : serif or sans-serif

Both "serif" as well as "sans-serif" are not a direct font but a generic font family defined in the browser. "serif" is standing for a typeface with serifs such as Georgia, Times or Times New Roman while "sans-serif" is meaning a font without serifs like Arial, Helvetica or Verdana.

But what does that mean in concrete terms? Let's have a look at two definitions of font families:

h1 {font-family: Georgia, Times, serif;}
h2 {font-family: Helvetica, Arial, Verdana, sans-serif;}

If a browser gets these instructions, it should write the h1 headings preferentially in the font Georgia. If the font Georgia is not installed or available, Times should be used instead. If both fonts, Georgia and Times are not available, we are coming to the value "serif". With this, the browser gets the instruction to use at least some font with serifs, if the other serif fonts are not available. The point is that you can at least control a bit how the font face of the website is looking like in cases when the preferred fonts are not available.

The situation is similar with the h2 headings from the example. The specified alternatives will be gone through in the defined order and if none of the listed fonts are installed, sans-serif is ensuring that at least a font without serifs will be used for the text.

Next to serif and sans-serif, there are other values you can use at this position. monospace is standing for a font with fixed width (for example like Courier), cursive is standing for a handwriting font and fantasy is standing for any extraordinary font. Which font is actually be taken if such a property is defined, is decided by the browser. Firefox on Windows is for example using the fonts Times New Roman (serif), Arial (sans-serif) and Courier New (monospace). However, in general, you can adjust those default fonts in the settings.
2017-10-25 at 17:16