<?xml version="1.0" encoding="utf-8"?>

CSS font shorthand property

CSS font shorthand property Bad Practice
CSS font shorthand property Best Practice

To shorten the code, you can actually specify all individual font properties in one — the font property. It must include values for:

  • font-size
  • and font-family

Optionally, it may also include values for:

  • font-style
  • font-variant
  • font-weight
  • font-stretch
  • and line-height

If one of the non-required values is missing, the browser will use the initial value. For example, if you don't specify the font-style property like in the example above, the browser uses the initial value normal, and the font is regular and not Italic.

Improve your UX & Product skills with interactive courses that actually work