What does this means in css font: 20vmin/1 FontNameBold;?

Question

I have a project and they give me a starting site with the following css:

h1 {
  //more styles...
  font: 20vmin/1 FontNameBold;
  
}

This is the first time I encounter something such as font: 20vmin/1 FontNameBold;, what is this supposed to do in css?

Also in the specifications sheets they say:

Typography

Titles 21/48 FontNameBold

Body 16/48 FontNameBold

So yeah I understand one is for the titles and the other for the body but what is 21/48 actually all about? This is the first time I find an especification like this, pretty confused.

Answer 1

It's shorthand notation for: font-size / line-height font-family

Viewport Sized Typography:

vmin is a value introduced with CSS3 that will size things relative to your viewport. Chris Coyier does a fantastic job of explaining viewport sized typography on CSS Tricks.

In your example, setting something to 20vmin will set that font size to 20vw or 20vh, whichever is smaller. If the smallest of your users viewport sizes (vh or vw) is 40cm, setting a font-size of 20vmin will divided by that value (40) by 20% to give you a font-size of 8cm.

The whole idea behind this is that if the user re-sizes their viewport, your font-size will adjust accordingly for a more responsive user experience.

The line-height property:

line-height simply defines the amount of space above and below inline elements (such as text in a <p> tag. Chris Coyier does a fantastic job of explaining the line-height property on CSS Tricks.