Replace six typography declarations with the CSS font shorthand

CSS can be verbose and repetitive.

There are often several ways to declare the same result. Horizontal margins alone can be written in at least four ways:

/* Longhand */
margin-left: 10px;
margin-right: 10px;

/* Four-value shorthand */
margin: 0 10px 0 10px;

/* Two-value shorthand */
margin: 0 10px;

/* Logical shorthand */
margin-inline: 10px;

The font shorthand can combine six typography declarations in one line.

.title {
	font-style: italic;
	font-variant: small-caps;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	font-family: system-ui, sans-serif;
}

Becomes:

.title {
	font: italic small-caps 700 1rem/1.5 system-ui, sans-serif;
}

font-size and font-family are required. The other values are optional, but there is one catch: omitted font longhands are reset to their initial values.

Use the shorthand when you intend to define the complete font state, not when you only want to change one typography property.

If you liked this tip, you might enjoy my guide “You Don’t Need JavaScript”, which contains more ways to build modern interfaces with HTML and CSS.

You can find it at https://theosoti.com/you-dont-need-js/.