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
It's simple: use the first letter of the
followed by the first number of the numeric
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.
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
Turn a Font Variation Description back into CSS.
n1 => font-style: normal; font-weight: 100;
i7 => font-style: italic; font-weight: 700;
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.
Simply agreeing on a convention opens new doors for standards in web fonts. Here are a few examples to get you thinking..
"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.
See the full specification, test suite and reference implementations at Typekit's Font Variation Description project.