What does the forward slash mean in the CSS font shorthand?

css, fonts

Solution

`12px` is the font size, `18px` is the line height.

The syntax is based on typographical notation for specifying the respective sizes, and is only applicable to the `font` shorthand property. In other words, the above declaration simply expands to the following:

font-size: 12px;
line-height: 18px;

As always, if you set the line height to a relative value (e.g. percentage or ems), it's calculated relative to the font size.

W3C CSS2.1 `font` property reference W3C CSS3 Fonts Module `font` property reference (the syntax carries over from CSS2.1)

Problem

I'm seeing the following CSS declaration in a stylesheet: ``` font: 12px/18px ... ``` What does the `12px/18px` part mean exactly?

Original source