CSS font Shorthand: What font: 110%/1.4 system-ui Actually Does
That compact line of CSS shows up in a lot of quick demos, and while it’s perfectly usable in production, developers often prefer to be more explicit on larger projects. It’s not hard to see why the syntax can trip someone up at first glance.
The key concept here is that the font property is shorthand. It lets you set a whole batch of font-* properties in one declaration. In this specific case, the line is setting both the font size and line height together as 110%/1.4, along with system-ui as the font family.
Order and Rules Matter
There are some important gotchas to keep in mind when using this shorthand. Order matters in the declaration. More critically, you cannot set the line-height without also setting the font-size—the two must always be paired. This is a common pitfall because a value like 20px is technically valid for either property. If you only declare one value, it will be interpreted as the font-size.
Furthermore, if you try to use a unitless number (which is generally a good practice for line-height) as the sole value, the declaration will simply fail to apply.
For a full breakdown, the Almanac entry on font covers all the details. There’s also a detailed article by Mateusz Hadryś titled “Full Text Styling With a Single Line of CSS” that includes helpful figures for understanding the full syntax.
And if system-ui was the confusing part, that’s just one of those handy System Things.
