Generic Families Description
Serif Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
Sans-serif Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
Monospace Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.
Cursive Cursive fonts imitate human handwriting.
Fantasy Fantasy fonts are decorative/playful fonts.

strongly encourage you to always provide a generic family as part of any font-family rule. By doing so, you provide a fallback mechanism that lets user agents pick an alternative when they can’t provide an exact font match

If you want to try several fonts, list it with comma-separated. user agent will look for the fonts in the order you have listed. If none of the listed fonts are available, then it will just pick an available font generic family.

Font names that use a single word (which doesn’t conflict with any of the keywords for font-family) need not be quoted, and generic family names (serif, monospace, etc.)


Definition and Usage The font-size-adjust property gives you better control of the font size when the first selected font is not available. When a font is not available, the browser uses the second specified font. This could result in a big change for the font size. To prevent this, use the font-size-adjust property. All fonts have an "aspect value" which is the size-difference between the lowercase letter "x" and the uppercase letter "X". When the browser knows the "aspect value" for the first selected font, the browser can figure out what font-size to use when displaying text with the second choice font.

The font property is a shorthand property for:

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family
  • The font-size and font-family values are required. If one of the other values is missing, their default value are used.