An excellent overview and analysis of trends on the System Font Stack approach, thank you very much for sharing. Interesting point on Linux based fonts. I myself have Ubuntu 18.04 (Mate) installed on my computer. System Font is Ubuntu, of course, but Firefox (v. 770b4) takes “DejaVu Sans” and Chrome (v. 81) “Liberation Sans” when it comes to generic “sans-serif”. I’m talking here Browser Defaults on my PC. However, I made a funny experience as I was looking at Bootstrap’s main page. Everything was nice and dandy at the first glance, the font used was “Noto Sans” and it looked good:
However, I took the “Noto Sans” entry from the CSS and Firefox fetched as expected “DejaVu Sans”. Things then remarkably changed. To start with, the font metrics are different, “DejaVu Sans” seems to be within a bigger bounding box. Second, the font weight looked incredibly lighter:
This, however, looks like a mistake in the CSS (imagine it weren’t!): those two paragraphs on Bootstrap’s main page are styled with a font-weight value of 300:
<p class="lead mb-4">
....lead {
font-size: 1.25rem;
font-weight: 300;
}
A font-weight of 300 is traditionally considered “light”, and it is is neither supported by “Arial” on Windows nor by “Noto Sans” on Linux / Ubuntu (they stat at 400, correct me if I’m wrong). However, “DejaVu Sans” does include it (it is named “DejaVu Sans Extra Light”).
I may have described a sort of exotic case against the use of “System Font Stack”, but as it is, you see the number of variables out of your control using it. I probably would use the approach in a restricted manner (i.e., just for navigation items and perhaps for headings, too), but I probably wouldn’t use it for the main font of the page.
Cheers!!
