What does the slash mean here:
font: 100%/120%;
2 Answers
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;
answered Mar 31, 2009 at 16:01
Konrad Rudolph
550k142 gold badges968 silver badges1.3k bronze badges
5 Comments
David M
It's to mirror old typesetting syntax, where you'd have font set as, for instance "10pt on 12pt", or "10pt/12pt".
Dylan Lukes
I actually use this quite a bit. The designer I work with always refers to sizing as, for example, "14 over 22". I put it in by accident one day and was surprised/content when it worked.
kumarharsh
a quickie: does this format also not require the font-family to be specified? My browsers are ignoring this property: font: 12px/16px; but accepting this: font: 12px/16px sans-serif; This behaviour is also documented here
Konrad Rudolph
@Harsh Yes, a family (along with a size) is minimally required for the
font shorthand property as you can see in the official definition.kumarharsh
thanks for the clarification. Perhaps you can update the answer (or the question) as it is slightly misleading in that a casual reader can assume that only a SIZE/LINE_HEIGHT declaration would work.
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.
answered Mar 31, 2009 at 16:06
Bill the Lizard
408k213 gold badges579 silver badges892 bronze badges
1 Comment
Konrad Rudolph
Most shorthands address related style properties, though (e.g.
border-*). David has given a good explanation in the comments to my answer. As to shorthands being cryptic: certainly true, but so damn useful and quite easy to learn.
font-sizedoes not accept the slash. The correct property isfont.