<generic-family>
================

The **`<generic-family>`** CSS data type represents the keyword values for generic font families used in the `font` shorthand and `font-family` longhand properties. The `<generic-family>` represents one or more locally-installed fonts belonging to that category of fonts.

Syntax
------


```css
<generic-family> = serif | sans-serif | monospace | cursive | fantasy | system-ui |
   ui-serif | ui-sans-serif | ui-monospace | ui-rounded | emoji | math | fangsong
```

Values
------

The `<generic-family>` enumerated type is specified using one of the values listed below:

`serif`

A serif is a small line or stroke attached to the end of a larger stroke in a letter. In serif fonts, glyphs have finishing strokes, flared or tapering ends. Examples include Lucida Bright, Lucida Fax, Palatino, Palatino Linotype, Palladio, and URW Palladio.

`sans-serif`

A font without serifs; glyphs have plain stroke endings, without ornamentation. Example sans-serif fonts include Open Sans, Fira Sans, Lucida Sans, Lucida Sans Unicode, Trebuchet MS, Liberation Sans, and Nimbus Sans L.

`monospace`

All glyphs have the same fixed width. Example monospace fonts include Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono, Monaco, and Lucida Console.

`cursive`

Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letter work. Example cursive fonts include Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting, and Apple Chancery.

`fantasy`

Fantasy fonts are primarily decorative fonts that contain playful representations of characters. Example fantasy fonts include Papyrus, Herculanum, Party LET, Curlz MT, and Harrington.

`system-ui`

Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic family is provided for typefaces that don't map cleanly into the others.

`ui-serif`

The default user interface serif font. See the definition of `serif` above.

`ui-sans-serif`

The default user interface sans-serif font. See the definition of `sans-serif` above.

`ui-monospace`

The default user interface monospace font. See the definition of `monospace` above.

`ui-rounded`

The default user interface font that has rounded features.

`math`

Fonts for displaying mathematical expressions, for example superscript and subscript, brackets that cross several lines, nesting expressions, and double-struck glyphs with distinct meanings.

`emoji`

Fonts that are specifically designed to render emoji.

`fangsong`

A particular style of Chinese characters that are between serif-style Song and cursive-style Kai forms. This style is often used for government documents.

Examples
--------

This example demos several of the `<generic-family>` enumerated values for the `font-family` property.

### HTML


```html
<ul>
  <li class="serif">serif</li>
  <li class="sans-serif">sans-serif</li>
  <li class="monospace">monospace</li>
  <li class="cursive">cursive</li>
  <li class="fantasy">fantasy</li>
  <li class="system-ui">system-ui</li>
</ul>
```

### CSS


```css
ul {
  font-size: 1.5rem;
  line-height: 2;
}
.serif {
  font-family: serif;
}
.sans-serif {
  font-family: sans-serif;
}
.monospace {
  font-family: monospace;
}
.cursive {
  font-family: cursive;
}
.fantasy {
  font-family: fantasy;
}
.system-ui {
  font-family: system-ui;
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # generic-font-families |

See also
--------

* Properties that use this data type: `font-family` and `font`
* CSS fonts module