Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Size of font in CSS with slash

Tags:

html

css

size

People also ask

What does a slash do in CSS?

The forward slash is required syntax for separating background position values and background size values. This is to eliminate misinterpretation of the values specified.

How are CSS used in changing font text size and line height?

If your font size is 10px, your line height will be 10px, 18px, and 20px, respectively. Sets line height as a percentage of the font size of the element. If your font size is 10px, your line height will be 3px, 5px, and 11px respectively. Alternatively, you can specify the “normal” keyword.


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;

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.