What does the slash mean here:
font: 100%/120%;
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;