I exploit this line, or one prefer it, in a whole lot of fast demos. Not that it’s not a production-worthy line of code—I simply are typically a bit extra specific on larger tasks.
html {
font: 110%/1.4 system-ui;
}
Somebody wrote in confused by it, and I may see how a line like that could be a bit bewildering at first.
The very first thing to know is that it’s referred to as shorthand. The font property in CSS offers you the chance to set a bunch of font-* properties abruptly. On this case, we’re setting:
html {
font-family: system-ui;
font-size: 110%;
line-height: 1.4;
}
There are a number of extra little particular issues to know. For instance, the order issues.
/* invalid */
html {
font: system-ui 100%/1.4;
}
You can also’t set the line-height with out additionally setting the font-size. In the event you’re going to set line-height, it’s important to set each. Be additional cautious there as a result of one thing like 20px is each a legitimate line-height and font-size, and should you solely set one, it’ll be the font-size. In the event you go for a unitless quantity, which is a nice thought for line-height, and attempt to set it alone, it’ll simply fail.
/* invalid */
html {
font: 1.5 system-ui;
}
After all, we’ve obtained all this detailed in the Almanac entry for font. However I’ll additionally give a shout to Mateusz Hadryś who has an in depth article titled “Full Textual content Styling With a Single Line of CSS” with some detailed figures like this which are useful in understanding every thing:
Lastly, if system-ui was a part of the confusion there, that’s a kind of System Issues.
The publish What does `font: 110%/1.4 system-ui` imply? appeared first on CSS-Methods. You may assist CSS-Methods by being an MVP Supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!