I agree with the general sentiment of the page, with one exception: It’s better to use WOFF webfonts for the fonts on the page instead of using what were “Web safe” fonts back in 2005 or so.
With the rise of Android phones which, by and large, do not have licenses for the old 1990s “Microsoft Core Fonts” (Verdana/Gerogia/Arial/etc.), doing something like “font-family: Georgia, Serif” no longer guarantees a consistent look from platform to platform. What I use is a heavily optimized and subsetted web font stack which is placed in a single 114KB CSS file separate from the web page; I use inline fonts instead of linking to individual font files to remove the number of pages needed to load to render my page. I use WOFF for maximum browser compatibility, although this is becoming a non-issue with Microsoft seriously sunsetting IE11.
This way, my webpage will look the same in any web browser with WOFF support, regardless of what fonts a given phone or OS use for “Georgia” or what not. In addition, with the exceptions of Arial and Georgia, the Microsoft Core fonts are quite dated looking; using Verdana here in 2021 gives the page a “made in the first 2000s decade” look to it.
I also, for browsers without WOFF, have a fairly long font stack, so that the web page looks reasonable even without a webfont.
I wish browsers came with some kind of configuration panel for fonts.
All the font control I wish to give websites is the choice between serif and sans-serif. Let web fonts be opt-in rather than opt-out.
Let the browser pick a good one and be done with it, no need for every website to transfer an entire font file to my computer. Browsers already used to have some kind of control for this, though on mobile you don't really see it often anymore.
Designers seem to put a lot of value in fonts but I honestly don't care. Most of the fancy fonts decrease readability and just serve some kind of desire by the designer to have a certain brand. I don't care about your brand because 99% of the time I won't ever come back to your website and even if I do, it won't be because you picked out some bespoke almost-Arial-but-not-really font.
Reading through the discussions about those system font stacks, a couple of observations I have made myself:
* Linux desktop fonts are a mess. Two examples: “Helvetica” on Linux often times points to a Ghostscript font with vertical alignment problems when used in a browser, and the “Roboto” font for Android can use Linux rendering problems as the GitHub team discovered.
* Chrome has had significant font rendering issues. GitHub’s designer mentions subtle kerning issues with the San Francisco font in Chrome on MacOS; I’ve seen some pretty serious font rendering issues with Chrome in Windows, where fonts end up being about 10-20% lighter.
* Very little consideration has been given to how the system font stacks look on Android phones, who are about 40% of the web browsing public.
By hosting the fonts on the web page [1], we eliminate these problems. The Linux and Android font rendering mess is resolved by just providing our own fonts [2]; I have dealt with the Chrome rendering mess by very carefully testing the fonts in Windows on a low-resolution 75dpi display until they looked as good as possible on this “lowest common denominator” display [3], while looking good in other browsers and on higher resolution displays. MacOS, nicely enough, always renders the fonts nicely, even on older Macbook Airs and external 75dpi displays.
Another thing: All of the fonts are OFL open source fonts, and, as a matter of principle, I prefer that no proprietary fonts are used to display my web page.
[1] Yes, 114kb is huge for late 1990s web designers who had to push everything over a dialup link, but it’s a drop in the bucket these days, even with cell phones with 3gb/month on low end plans. I went to a lot of effort with Zopfli and very aggressive subsetting to make the font CSS file as small as possible.
[2] There’s an issue with the % on Linux, since Linux insists on using its own hinting, resulting in one of the bowls being taller than the other bowl. Besides that, the font looks great in Linux.
[3] I spent days tweaking ttfautohunt settings for the font with Chrome/Windows as my reference, and made the font a little thicker by using Charis SIL for body text instead of the smaller in size but thinner Bitstream Charter.
Another issue: To pull off using system font stacks, our web page will look different in MacOS vs. Windows vs. Linux vs. Android vs. CromeOS vs. etc. This makes testing a lot more time consuming. With webfonts, as long as we use good fonts which work with the lowest common denominator (75dpi Windows displays using Chrome, in my experience), we don’t need to add a new testing platform each time a new OS starts to gain traction.
I wish we could, with Android everwhere, have Linus Torvalds, Sergey Brin, Bill Gates, and Steve Jobs get together and say “OK, we all need to agree to have both a serif and sans font which is on every operating system out there, so that web pages don’t need to download fonts to their users any more.” and then have everyone present say something like “OK, we’ll make Noto Sans and Noto Serif always be available”, or barring that, have Sergey Brin say “OK, we’ll make sure Android phones always have Arimo (sans serif with the same metrics as Arial) and Tinos (serif with the same metrics as Times New Roman) available to use”.
If they could do this, then font stacks could simply be “Font-family: "Noto Sans", sans-serif;” or “Font-family: "Noto Serif", serif;”, or, the not as good but still usable “Font-family: Arial, Arimo, "Liberation Sans", sans-serif;” and “Font-family: Tinos, "Liberation Serif", "Times New Roman", serif;” font stacks. This would solve the pesky “download the fonts” problem.
Another solution would be for Bill Gates to say “I will release the 2002 Core Fonts version of the Georgia typeface under the OFL open source license if Brin will install it on all Android devices moving forward” or better “I will release Cambria and Calibri under the OFL open source license if Steve Jobs and Brin agree to install this font on all Apple computers, iPhones, and Android phones moving forward”
Of course, in the real world, it would logistically be easier to get Steve Jobs to show up alive and well at this meeting then to get all attendees to agree on a font which all operating systems will have.
Another place where it might actually be possible to pull this off is to have all browser makers, especially Android browsers to include Arimo and Tinos with the browser moving forward. Actually, it looks like Arimo/Tinos are already on most Android phones: https://help.xara.com/article/440-web-safe-fonts-on-android-...
Edit: Based on testing, Arimo is on my somewhat older Android phone, with the same metrics as Arial on my Windows 10 desktop machine, but, annoyingly enough, while Tinos also looks to be there, it doesn’t have the same metrics as Times New Roman on my Windows 10 desktop machine. So, yeah, “Font-family: Arial, Arimo, "Liberation Sans", sans-serif;” is pretty much the only font stack we can use and be guaranteed to have the same metrics across mostly everything.
I can squeeze in just the regular and italic text of a serif font in 53,512 bytes, so we can get a consistent looking serif across platforms at the cost of 52.26KiB, and then just use Arial/Arimo (the only across-the-board websafe font stack where we can retain font metrics) for sans text.
Why is looking the same what you want? Future fonts will probably suit future changes in display technology (e.g. the shift back to serifs as screen density has increased) and/or future shifts in written language (compare blackletter or Fraktur style to today's scripts). If you want your website to be readable in the future, letting future platforms display it with their default font seems far more dependable than trying to control how it looks pixel-by-pixel.
Serif fonts have looked more or less the same since 1465. [1] Blackletter fonts didn’t last very long, because they were not very legible, and were quickly replaced.
Sans Serif (Grotesque) for formal printed material is newer, probably around 200 years old, but is also widely established. Regardless, on my personal website, I use serif lettering for most text, because while it’s slightly less readable at 75dpi, retina displays are common enough (e.g. pretty much any phone in use today has retina level resolution) that serif text makes more sense. [2] Also, the only open source font the great Matthew Carter (Verdana, Georgia) has made is a serif: Bitstream Charter and its derivative Charis SIL.
The English language is much more likely to change to the point today’s English can only be read by linguists and researchers before typefaces undergo any significant change.
With the rise of Android phones which, by and large, do not have licenses for the old 1990s “Microsoft Core Fonts” (Verdana/Gerogia/Arial/etc.), doing something like “font-family: Georgia, Serif” no longer guarantees a consistent look from platform to platform. What I use is a heavily optimized and subsetted web font stack which is placed in a single 114KB CSS file separate from the web page; I use inline fonts instead of linking to individual font files to remove the number of pages needed to load to render my page. I use WOFF for maximum browser compatibility, although this is becoming a non-issue with Microsoft seriously sunsetting IE11.
This way, my webpage will look the same in any web browser with WOFF support, regardless of what fonts a given phone or OS use for “Georgia” or what not. In addition, with the exceptions of Arial and Georgia, the Microsoft Core fonts are quite dated looking; using Verdana here in 2021 gives the page a “made in the first 2000s decade” look to it.
I also, for browsers without WOFF, have a fairly long font stack, so that the web page looks reasonable even without a webfont.