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

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.

Tags: