Consider system fonts for better text legibility

Typography is one of the exciting aspects of web design. You get to choose a web font that nicely matches your style, personality, or brand.

We gravitate toward a particular web font because of the appeal of its typeface design. Basically, we’re drawn to a font because it looks “pretty” to us.

Many font typefaces look great as large headings or in a hero banner, but don’t look good in paragraphs of text for articles and blog posts.

I very frequently read online articles and blogs, and it’s always an annoyance whenever I run into text that’s difficult to read.

When displayed at typical font sizes for paragraphs (14 to 18px), some typefaces aren’t very legible for sustained periods of reading. This can result in a fatigued experience for your audience, which will limit engagement with your content.

So whenever your intent is to publish long-form content such as blog posts, you need to be mindful of text legibility.

A system font could be the answer

To ensure good legibility, you could select a web font that works well for reading purposes.

But, if you don’t need something specifically for the branding of your website, I can suggest possibly a better approach:

Going to system fonts. These are the fonts built into your computing device.

This is what I’ve done for this blog. The words you’re reading right now are through a system font local to your device.

To enable system fonts, there’s a piece of CSS I found that will call up the default font for your operating system.

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;

If you’re on Mac or iOS, you’ll be served the SF Pro system font. For Windows users, you’ll be seeing Segoe UI. Roboto is the default system font for Android.

I use IBM Plex Sans as my personal branding font. It’s all over my website, including the blog, with the exception of main body text for blog posts. I simply felt a system font would serve for long-form reading.

To my eyes, the system font is somewhat more pleasurable for reading. It may depend on the OS you’re using, but I’ve found the Mac, iOS, Android, and Windows system fonts all very good for paragraphs of text, and better than IBM Plex Sans.

A good reading font lends well to reading entire articles, and also makes it effortless to skim quickly over paragraphs of text.

If you’re able to rely entirely on system fonts for your web design, then you’ll get another benefit: fast web content rendering since there won’t be the need to call up fonts from the server.