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:
Lastly, if system-ui was part of the confusion there, that’s one of those System Things.
You’re not explaining why you chose 110% or 1.4, which might be their initial question.
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).
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