What does `font: 110%/1.4 system-ui` mean?

I use this line, or one like it, in a lot of quick demos. Not that it’s not a production-worthy line of code—I just tend to be a bit more explicit on bigger projects.

html {
  font: 110%/1.4 system-ui;
}

Someone wrote in confused by it, and I could see how a line like that is a bit bewildering at first.

The first thing to know is that it is called shorthand. The font property in CSS gives you the opportunity to set a bunch of font-* properties all at once. In this case, we’re setting:

html {
  font-family: system-ui;
  font-size: 110%;
  line-height: 1.4;
}

There are a few more little specific things to know. For example, the order matters.

/* invalid */
html {
  font: system-ui 100%/1.4;
}

You also can’t set the line-height without also setting the font-size. If you’re going to set line-height, you have to set both. Be extra careful there because something like 20px is both a valid line-height and font-size, and if you only set one, it’ll be the font-size. If you go for a unitless number, which is a great idea for line-height, and try to set it alone, it’ll just fail.

/* invalid */
html {
  font: 1.5 system-ui;
}

Of course, we’ve got all this detailed in the Almanac entry for font. But I’ll also give a shout to Mateusz Hadryś who has a detailed article titled “Full Text Styling With a Single Line of CSS” with some detailed figures like this that are helpful in understanding everything:

Showing the font property declaration. Style, variant and weight are in yellow with a label above that says order doesn't matter and a label beneath saying these have to be first. Next is size with a forward slash then line-height in red. Above them is a label that says these have to be next to each other. Next is family in light blue with a label that says it has to be last. There is an additional white label that connects size and family that says they are required.

Lastly, if system-ui was part of the confusion there, that’s one of those System Things.

Julien

# July 1, 2021

You’re not explaining why you chose 110% or 1.4, which might be their initial question.

Chris Coyier

Permalink to comment# July 1, 2021

I didn’t get the impression that that was the confusing bit. But those choices are arbitrary. 110% was “a little bigger than the default” and 1.4 is my go-to number for line-height as it feels right for a lot of fonts, and I adjust from there (1.1 for headers).

Craig S

It’s clear by the time you mention shorthand and show the snippet how you’re setting those three properties, but it remained mystifying why those were chosen. I kept expecting a paragraph about how the math for these numbers relate to 16px defaults and the resulting effect, etc but it never came. Then I clicked the links and they were just more shorthand references. I think readers want to understand what’s good about this size and line height combination, why it’s your default, and how important going with the system font or not is. Maybe lift the explanation from the comments into the article

Comments