Make readability better with system and web-safe fonts

Like so many of you, I consume numerous online articles and blog posts on a daily basis. I read each day on the web for professional and personal reasons.

So for me and you, it’s vitally important that article content be readable with ease and clarity.

The reality is that I very frequently run into long-form text that’s not very reader-friendly.

There are several factors compromising readability on the web:

  • Poor legibility, or difficulty making out between individual letters in words.
  • The color of the text doesn’t stand out well against its background.
  • The font size is too small.
  • Lines of text are too close together.
  • Lines of text are too long.
  • The weighting of the font is very thin.

In this article, we’ll tackle legibility, which is worthy of a discussion in itself. In a subsequent blog post, I’ll cover the other factors limiting good readability.

Web fonts and legibility

There are so many great choices out there for web fonts with visually appealing typefaces, such as the free options available on Google Fonts.

Screenshot of Google Fonts website
Google Fonts is a great resource for discovering new web typefaces.

Many web fonts look great when shown prominently on a website as a heading, or in a banner or graphic, but don’t work well for reading paragraphs of text.

The issue has to do with legibility, or the ability to distinguish between the letters in the words that make up the text.

When letters don’t appear very legible, this adds a subtle but noticeable resistance in your mind as you’re trying to read the content. You may even sense some frustration and fatigue in your reading experience.

Put more simply, poor legibility leads to poor readability, which impairs concentration and reading efficiency.

You always want a typeface design with good legibility, so that it works well for glancing over paragraphs of text, and keeps your readers engaged.

System fonts

So, what fonts can be considered for good legibility and in turn, good readability?

You can simply play around with some web font choices and see how they look at normal paragraph text sizes (usually between 14 and 18 pixels).

There are numerous, well-established fonts that are great for reading purposes, such as Helvetica, Helvetica Neue, and Roboto.

Here’s an alternative to searching around for a web font: use the default system font built into the operating system for your computer, tablet, or smartphone.

(I previously wrote about using system fonts for better text legibility. Here, I expand on this idea in greater detail.)

The default system font will have very good legibility, due to the fact that any text for OS interfaces must absolutely be readable.

So, what exactly is the system font you’ll see? That depends, of course, on the OS.

  • Windows 10 and 11: Segoe UI
  • MacOS and iOS: SF Pro
  • Android: Roboto

The words you’re reading here are delivered by your OS’s system font. I’m using a Mac and the SF Pro typeface is very easy to read. Segoe UI and Roboto also deliver solid legibility.

Comparing proprietary and system fonts

Let’s take a look at a popular web font called IBM Plex Sans. It’s part of the IBM Plex font family, created as part of IBM’s modernization of their design language.

It’s freely available for anyone to use, and I’ve decided to use it in my personal branding. Let’s look at this text sample in IBM Plex Sans.

I have created this small paragraph to demonstrate legibility and readability. The font for the text is IBM Plex Sans, a proprietary font created by IBM, but made open source so anyone can use it as desired.

This font is quite readable. However, I decided some time ago to replace it with a system font for blog posts, while using IBM Plex Sans for larger text presentations such as headings.

Let’s look at your system font against IBM Plex Sans.

I have created this small paragraph to demonstrate legibility and readability. The font for the text is the default system font served by the operating system for your computing device.

I have created this small paragraph to demonstrate legibility and readability. The font for the text is IBM Plex Sans, a proprietary font created by IBM, but made open source so anyone can use it as desired.

Admittedly, this is a subjective assessment, but I think the system font typeface (SF Pro on my Mac) is subtly but noticeably easier to read. I am sure the same will be true for Segoe UI and Roboto. I just feel that my eyes follow the letters and words more comfortably.

For that reason, I decided it was best use a system font in place of IBM Plex Sans, to deliver a better reading experience for my blog.

Web-safe fonts

If the default system font doesn’t seem exactly appealing for your needs, there is another option: using the other system fonts preinstalled in the OS you’re using.

Some of these are known as web-safe fonts because they’re available across multiple devices and operating systems.

Web-safe fonts include many of the classic typefaces we all know very well: Arial, Verdana, Tahoma, Times New Roman, and Georgia. These specific fonts are readily available on Mac and Windows. (They may also be viewable on iOS and Android, but I haven’t verified.)

Here is a resource that lists many good web-safe fonts. and this site specifies availability of web-safe fonts between Mac and Windows.

Let’s take Arial as an example, and compare that against IBM Plex Sans. (Results may be best if you’re looking at this on Mac or Windows.)

I have created this small paragraph to demonstrate legibility and readability. The font for the text is Arial, preinstalled in the operating system for your computing device.

I have created this small paragraph to demonstrate legibility and readability. The font for the text is IBM Plex Sans, a proprietary font created by IBM, but made open source so anyone can use it as desired.

Arial isn’t a trendy typeface. It’s considered boring and outdated. And yet, it’s still a superb font for reading long-form content.

Take a look at Verdana, another font with a very legible typeface.

I have created this small paragraph to demonstrate legibility and readability. The font for the text is Verdana, preinstalled in the operating system for your computing device.

Don’t count out system fonts because they’re old

When it comes to delivering great readability in articles and blog posts, sometimes it’s worth going classic over trendy when it comes to typefaces.

And keep in mind that system and web-safe fonts deliver faster site performance than externally sourced web fonts. The reason: there is no latency associated with the browser sending web server requests and loading in font files.