CSS <generic-family> Data Type

The CSS <generic-family> data type represents a generic category of fonts rather than a specific font family. Generic family names allow the browser to select an appropriate installed font that matches the requested characteristics and are commonly used as fallbacks in a font-family list.

Syntax

A <generic-family> is specified using one of the predefined generic font family keywords:

serif
sans-serif
cursive
fantasy
monospace
system-ui
ui-serif
ui-sans-serif
ui-monospace
ui-rounded
math
fangsong

Generic family keywords are CSS-defined values and are written without quotation marks.

Generic Family Values

Value	Description
`serif`	Selects a font with serif characteristics.
`sans-serif`	Selects a font without serif characteristics.
`cursive`	Selects a font designed to resemble handwriting or connected script.
`fantasy`	Selects a decorative or expressive font.
`monospace`	Selects a font in which characters generally have the same fixed advance width.
`system-ui`	Selects the platform's default user interface font.
`ui-serif`	Selects the platform's serif user interface font.
`ui-sans-serif`	Selects the platform's sans-serif user interface font.
`ui-monospace`	Selects the platform's monospace user interface font.
`ui-rounded`	Selects the platform's rounded user interface font.
`math`	Selects a font appropriate for mathematical expressions.
`fangsong`	Selects a Chinese typeface style between serif-style Song and handwritten Kai forms.

Fallback Fonts

Generic families are commonly placed at the end of a font-family list. The browser tries each family in order and can use the generic family when the preceding fonts are unavailable or do not contain a required character.

body {
  font-family: Arial, Helvetica, sans-serif;
}

In this example, the browser first tries Arial, then Helvetica, and finally selects an available sans-serif font when needed.

<generic-family> Example

The following examples show several generic font families. The exact typeface displayed depends on the fonts and platform used by the browser.

.serif {
  font-family: serif;
}
.sans-serif {
  font-family: sans-serif;
}
.monospace {
  font-family: monospace;
}
.cursive {
  font-family: cursive;
}

Browser Result

serif - Sample Text

sans-serif - Sample Text

monospace - Sample Text

cursive - Sample Text

Because generic family names do not identify a particular font, the appearance can vary between operating systems, browsers, and user configurations.

The <generic-family> data type is used by properties that specify font families:

Specifications

The <generic-family> data type is defined in the CSS Fonts Module Level 4 .

CSS <generic-family> Data Type