What Does the Forward Slash Mean in the CSS Font Shorthand

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

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)

/ (forward slash) in css style declarations

It simply means font-size and line-height

font: 12px/18px /*12px font-size and 18px line-height*/

That's a short-hand notation...There are many more in CSS which you can use, for example

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

Can be simply written as

margin: 10px 20px 30px 40px
         ^----^----^----^
       Top/Right/Bottom/Left

Or say for example this

border-width: 1px;
border-style:solid;
border-color: #ff0000;

Can be written as

border: 1px solid #f0000;

Here's a cool list of CSS shorthand.

Size of font in CSS with slash

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;

Slashes (`/`) in CSS values when using Less (e.g. in `font` shorthand)

Just ran into this issue, the escape function (for less.js anyway) is:
e()
Like this

font: @weight @size e('/') @height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;

What is the CSS font shorthand property composed of?

You're right on the font weight, but 1.1em/37px means the font size is 1.1 ems and the line height is 37 pixels, not the other way around.

W3C CSS2.1 font property reference

See also: What does this CSS font shorthand syntax mean?

What is the meaning of the symbol '/'?

"If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally."

The slash in the code from your post is shorthand and differentiates between the vertical and horizontal radii.

http://www.w3.org/TR/css3-background/#border-radius

From the link above:

border-radius: 4em;

is equivalent to

border-top-left-radius:     4em;
border-top-right-radius:    4em;
border-bottom-right-radius: 4em;
border-bottom-left-radius:  4em;

and

border-radius: 2em 1em 4em / 0.5em 3em;

is equivalent to

border-top-left-radius:     2em 0.5em;
border-top-right-radius:    1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius:  1em 3em;

What do these CSS font properties mean?

What you are seeing is a shorthand font declaration. It is essentially the same as writing the following:

font-family: brandon-grotesque-n7, brandon-grotesque, sans-serif;
font-size: 36px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 54px;

Why does it say "normal normal bold"?

This is font-style, followed by font-variant, followed by font-weight. Another example would be something like italic small-caps bold.

Why is there a slash on the font-size?

This is font-size followed by line-height. In your example, the font-size is 36px and the line-height is 54px.

Why are there three font types listed?

This is called a font stack. The browser will attempt to use those fonts in the order that they are written. If brandon-grotesque-n7 is unavailable on the user's system, the browser will fall back to using brandon-grotesque. If that is unavailable, it will use the system's default sans-serif font.

A helpful cheat sheet for font shorthand:

Cheat sheet source: http://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/

---

Related Topics