Font Style, Variant and the Shorthand
The café's dish descriptions should be in italics, and the prices should line their digits up neatly in a column. Then you discover you can set most font properties in one line, and that one line can quietly undo your italics.
The rule
Style slants, variant reshapes, and
fontresets whatever it leaves out.
font-style chooses the slant: normal, italic (a true cursive-leaning design, if the font has one) or oblique (the upright letters tilted).
.price ~ p {
font-style: italic;
}font-variant turns on alternative glyph forms. The best known is small-caps, which draws lower-case letters as smaller capitals. The more useful modern relatives are the font-variant-* longhands, for example:
.price {
font-variant-numeric: tabular-nums;
}Tabular numbers give every digit the same width, so prices stacked in a column line up.
The font shorthand sets several properties at once:
h1 {
font: italic 700 2.5rem/1.2 "Lora", Georgia, serif;
}Its grammar is strict:
- Size and family are required. Without either, the whole declaration is invalid.
- Style, variant and weight, if present, come before the size.
- Line height follows the size after a slash:
2.5rem/1.2. - The family list comes last.
And the catch: every sub-property you do not mention is reset to its initial value. font: 1rem serif sets the weight back to normal, the style back to normal and the line height back to normal.
The shortcut
Read a shorthand from the right: family last, then the size (with an optional /line-height), then anything before it is style, variant or weight. If you cannot find both a size and a family, it is invalid.
The rule
.dish p { font-style: italic; font: 1rem/1.5 Georgia, serif; }
Drills
Answer fast — trust the rule.
Which font shorthand is valid?
In font: italic 600 1.125rem/1.4 "Lora", serif;, what is the line height?
A rule has font-weight: 700; followed by font: 1rem sans-serif;. What weight is the text?
Which declaration makes prices line up in a column by giving every digit equal width?
Remember
font-styleslants;font-variantand its longhands swap in alternative glyphs.fontneeds a size and a family, in the order style/variant/weight, size/line-height, family.- The shorthand resets everything it leaves out, so write it first and longhands after.