Should non-system fonts be avoided for website/general copy?

Question

I just came across a UX principle that raises very fair objections but I'm not sure on balance I agree with, but I'm here to be proven wrong, not have my opinion confirmed.

For the sake of brevity I'll just take out the key points: the principal is predicated on the following axioms.

1. System typefaces typically read better than custom ones

2. System typefaces typically render better

3. Using native typefaces speeds up load time

4. Using custom typefaces results in a flash of unstyled content (FOUC)

The book argues that regardless of if you use Google Fonts CDN, or locally OTF/TTF/WOFF files , it will result in a FOUC.

The it ultimately proposes a stack based on the following typefaces.

• apple-system (San Francisco on Mac I believe)
• BlinkMacSystemFont
• Segoe Ui
• Roboto
• Ubuntu
• Cantarell
• Helvetica Neue
• sans-serif (this would be Helvetica on Mac, Arial on Windows, Ubuntu on Ubuntu and I don't know any further than that)

So I'll go through the points one by one.

1. System typefaces do read better than custom ones, that is true, but do they look better? Do they look unique? When thinking about brand as well as UX, this is a consideration, where is the trade off?
2. Again this is undoubtably true in 90% of cases, most web-fonts render terribly, but many don't. Nothing is stopping you from choosing a typeface that kerns well.
3. This can be mitigated against by using async, but it isn't totally solvable. Again where is the trade off.
4. I've personally never seen a web-font cause an FOUC except when I'm on a long distance train, but in that case, everything is loading slowly, it isn't the font's fault. Could this come down to knowing your target demographic, if I know most of my users are going to be in the UK and US (they are) with connections at least 2mb (that seems to be the threshold for seeing an FOUC regarding fonts).

Technical counter-proposal: if your users really are on very slow connections, use a CDN for static assets (Cloudflare's free tier is enough to solve this) and a very far ahead expires on your fonts and they won't be loaded again for a while.

My counter proposal is more nuanced.

Will your target audience/bulk of users be on fast internet connections? This doesn't even come down to developed or non-developed nations, I was on a relatively remote island called Koh Kood that doesn't even have an ATM in 2013 and I was getting 20Mbit via 4G.

If the answer is no, and/or you have a variety of users from around the world, whose loading of static assets can't be mitigated against, then use system fonts otherwise you can consider a well-made typeface with good kerning and so on.

I appreciate we live in a world where milliseconds matter and people like OLA (India's Uber) are crushing Uber in T2 and T3 cities with very bad/flaky connections because their entire PWA is a 200kb install, but should we not be more nuanced and NOT make "always use native typefaces for copy an absolute rule?

For the record, I do have the semi-first world privilege of living in a semi-developed country; I live in the UK, we're not know for extremely fast internet connections, although things have improved over the last 10 years, my connection at home is 200Mbit at work it is 78Mbit per workstation and typically 60Mbit on my celular (in an urban, suburban or downtown area). So I don't really feel 400kb unless I simulate it with Chrome Dev Tools.

This was from a book called 101 UX Principles by Will Grant published November 2018, it's mostly good but there are two or three things I didn't agree with, or need further argumentation.

Answer 1

The main issue with custom fonts is when pages load slowly because new fonts have to be downloaded.

• You can check whether fonts have already been downloaded or are otherwise available.
• If not, you can check the link quality to decide whether you want to download the font.
• If not, fallback on "sans-serif", or whatever else is already available.

---

The "axioms" have some problems:

1. System typefaces typically read better than custom ones.

   What does "read better" mean?

2. System typefaces typically render better

   Many system typefaces are licensed from third parties. A system font on one system may be a "custom" font on another, and vice versa. The same font is expected to perform equally well regardless of whether it is a "system" font or a "custom" font.

3. Using native typefaces speeds up load time.

   Relative to downloading a new font, I'd agree. But if the custom font is already downloaded or otherwise available, not necessarily. You can code a check to determine whether a font is available or already downloaded. If not, use the default "sans-serif".

4. Using custom typefaces results in a flash of unstyled content (FOUC).

   Maybe in the 1990s, but not necessarily with modern browsers that pre-render content. Some webpages do have this problem, but they are intentionally programmed to behave that way (by lazy loading content). It's not a problem with the font, but with how the browser and webpage are coded. In some cases, it's considered a feature.

The font stack has some problems:

• Three of the fonts are available only on Mac/iOS, but the first font in the list will block any other font from being used on Mac/iOS.

• The Windows font is available only on newer Windows systems. This may be acceptable because MS is actively trying to stop users from using older versions.

• No one uses Roboto. Few use Ubuntu (the font). Few use Cantarell.

• It doesn't support non-Latin languages.

• Why isn't Noto on the list? It's free. It has a huge character set with support for many languages. Anyone with LibreOffice already has it.

• sans-serif – Specifying this is unnecessary. It only makes a difference if the user has chosen to use serif fonts, in which case, you're over-riding the user's explicit preference.

• The stack can be shortened to: apple-system, Segoe UI (, sans-serif).