Size of Font in CSS with Slash

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;

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)

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;

/ (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.

Slash before text in CSS

Don't adjust the font-size, use a scale transform instead.

a,a:hover,a:focus {  text-decoration: none;}.line {  font-size: 40px;  transition: all .3s linear;  display: inline-block;  /* required */}a:hover .line {  transform: scale(0.75);}.text {  position: relative;  top: -7px;}

<a href="#">  <span class="line">/</span>  <span class="text">Home Page</span></a><br><a href="#">  <span class="line">/</span>  <span class="text">Another Page</span></a><br><a href="#">  <span class="line">/</span>  <span class="text">Another Page 2</span></a>

.typed {
    font-size: 4em;
    line-height: 50px;
}

font-size: 14px;
line-height: 60px;