Size of font in CSS with slash

Question

What does the slash mean here:

font: 100%/120%;

Answer 1

This actually sets two properties and is equivalent to:

font-size: 100%;
line-height: 120%;

To quote the official documentation:

The syntax of this property is based on a traditional typographical shorthand notation to set multiple properties related to fonts.

As David M said in the comments, it mirrors the typesetting tradition of specifying typeface sizes as “x pt on y pt” to denote the glyph size on line height.

But the example in your question is actually wrong and would be ignored by the browser: you can only combine these two properties in the font shorthand notation, and you must specify at least both the font size and family. Simply writing font: 100%/120%; is therefore not enough; you could add a generic family name to make it valid though, e.g.:

font: 100%/120% serif;

Answer 2

Konrad got this one, but there are a lot of CSS shorthand properties like this that you can use to shorten your style sheets. Some of them look a little cryptic if you're not aware of them.