What does the syntax "14px/1" mean in font size declaration?

Question

Back and forth when I take a look at some source code of a site, I find a code that I still don’t understand its meaning when the attribute statement font.

Example:

p {
  font: Arial 14px/1;
}

I’d like to know exactly what this is for 14px/1. What is his meaning?

Answer 1

This is a kind of shortcut to apply the line-height, which is often important for the source chosen depending on the type of source, so do this:

.test {
     font: 14px/1 Arial;
}

<div class="test">Olá mundo, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar</div>

It would be the same as:

.test {
     font-family: Arial;
     font-size: 14px;
     line-height: 1;
}

<div class="test">Olá mundo, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar</div>

For the record, the order of the font: Arial 14px/1; this wrong and probably will not work, the correct is font: 14px/1 Arial; for the font: as per the W3 link he works in this order:

[ [ <'font-style'> || <'font-Variant'> || <'font-Weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit

---

Values in line-height

Another detail is that line-height: 1 or /1 are not the same thing as line-height: 1px and /1px.

The line-height being of value 1 will assume the size of font-size that in the examples is 14px, if it were line-height: 2 would take over 28px, which is twice the source and so on.

See the difference:

.comPX {
    font: 14px/1px Arial;
}

.comPT {
    font: 14px/1pt Arial;
}

.sem {
    font: 14px/1 Arial;
}

<div class="comPX">
Olá mundo, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo
</div>

<hr>

<div class="comPT">
Olá mundo, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo
</div>

<hr>

<div class="sem">
Olá mundo, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo
</div>

Answer 2

This is an abbreviated form for the same code below the font property:

font-family: Arial
font-size: 14px;
line-height: 1;

This is the syntax of the font property according to the w3schools:

font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;