Font Variation Description is a compact and unambiguous way to describe a font in CSS

Talking about fonts is hard. Do you mean font or family or normal or regular or bold or 700? Font Variation Description is here to help.

First, stop using so many words. Instead of this

font style normal, font weight normal

Say this

n4

The rules

It's simple: use the first letter of the font-style, followed by the first number of the numeric font-weight.

[font-style][font-weight]

Here are all of the possible values.

font-style   n, i, o
font-weight  1, 2, 3, 4, 5, 6, 7, 8, 9

With these simple rules we can do some powerful things.

Compress

Succinctly describe a font by its style and weight properties.

font-style: normal; font-weight: normal;
=> n4

font-style: italic; font-weight: bold;
=> i7

font-style: italic; font-weight: 700;
=> i7

font-style: normal; font-weight: 100;
=> n1

Remember, always say the style, followed by the weight.

font-weight: 100; font-style: normal;
=> n1

Expand

Turn a Font Variation Description back into CSS.

n1
=> font-style: normal; font-weight: 100;

i7
=> font-style: italic; font-weight: 700;

But what about...?

Font Variation Description uses numeric font weights to maintain consistency when expand beyond the standard "normal" and "bold". The CSS3 spec gives us numeric equivalents for these common terms.

font-weight: normal = 400 = 4
font-weight: bold = 700 = 7

You may also wonder, "why not just use 'b' and 'i'?" Two reasons: consistency, and the future. When browsers support larger font families made up of condensed, expanded, and small caps, Font Variation Description will grow with them. The more attributes we get, the more ambiguous a simple "b" becomes.

Why?

Simply agreeing on a convention opens new doors for standards in web fonts. Here are a few examples to get you thinking..

• CSS class names Generate a unique CSS class name for each font in a family. WebFont Loader uses this technique to generate CSS class names as events for each font load.
• APIs Easily describe a family of fonts. For example, "Droid Serif:n4,i4,n7,i7" clearly describes the family Droid Serif in the four standard weights and styles: Normal, Italic, Bold, Bold Italic. We can use this for both input and output.

Learn More

See the full specification, test suite and reference implementations at Typekit's Font Variation Description project.