Using System Fonts in CSS

I explain my reasons for using System-UI fonts whenever possible: How to use them, why to use them, and some examples.

System-UI – fast, user-friendly, a perfect font choice

It seems to me that sites and apps that are meant for reading, education, instruction or documentation are best served by using System-UI CSS fonts. Even heavily branded companies very often can approximate, to the reading pleasure of their community, the font styles, and choices just by using System-UI fonts.

Rather than slowing the website and increasing the bounce rate and frustration level of the site users, System-UI fonts load instantly without any flicker.

Apart from site speed, which is my initial concern, it makes sense to me that we should also use system fonts for the following reasons:

  • The users are already comfortable looking and using their System-UI font.  (It’s what their device uses.)
  • It will look great easily.
  • It can be modified with a little CSS to look a little different (if that’s a concern)

There are, however, a couple of things to pay attention to.  One of them is including a sufficient range of system fonts to cover changes and upgrades to the operating systems.  (Microsoft has had several evolutions of fonts that match their new OS’s, as an example.)

What if you’re not building a theme from scratch?

WordPress themes are relatively simple to learn to do.  There is actually very little difference between general HTML and CSS application to a static site, and a WordPress theme.

The exception is a website concept you would like to test, or your budget doesn’t allow for a custom theme. 
Beware of themes with imposed fonts

HTML5Blank is my favorite as it has the least opinions on how to go about designing your theme and CSS structure. (This site, for example, is built on HTML5Blank).

If you’re building a website or app design from scratch, then that is easier as you can just add the following CSS snippet to your body rule and you’re all set:

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
Source: Furbo.org Article

CSS-tricks (of course), points to a Jonathan Neal alternative on GitHub. This is using @font-face which I think it’s very thorough but appropriate for larger sites.  However, for most sites, it’s probably not necessary.

The problem is this: WordPress based sites and even starter themes come configured with fonts and font-styling. This is after the browsers try to provide a minimum style. 

Not even to mention some plugins who insist on loading their fonts and font styles as well. Ultimately, what this means is that you will need to dequeue the CSS and fonts from your theme and from all your plugins. This StackOverflow thread covers this well.

Finally, whenever I build on top of an existing theme (each theme is different) the basic steps are to dequeue and deregister the parent theme’s CSS. Then enqueue and register the child theme’s stylesheet (style.css).  I then de-minimize the CSS and copy/paste it into my child theme.  This allows me to just edit the original CSS directly, but not to lose my work as a result of updates.  The whole point is to request less kb and make a simpler to maintain and faster loading website. This post explains the process well.

You will then have to do the same thing with the stylesheets and fonts from, and plugins you’re using that affect the front-end.  Most plugins (that do this) can be replaced with ACF, and I recommend learning ACF well.  Or create your own functionality plugin and avoiding as many plugins as possible.

Example 1: System Fonts

For fun, here is a System-UI font, in use. This example has it’s own CSS rules, but nothing else has changed. We are using your system’s font, right now:

Our Joy comes from living our own lives simply – never from demanding that others live simply – or from ever making any demands whatsoever upon others.

Jonathan Lockwood Huie – Author

Example 2: System Fonts

And here is a different take on the System-UI fonts from your device. The HTML is exactly the same, but the CSS is different.

Our Joy comes from living our own lives simply – never from demanding that others live simply – or from ever making any demands whatsoever upon others.

Jonathan Lockwood Huie – Author

The second quote is using the same exact system font as the first paragraph.  With a few different CSS rules in place, we have a very different feeling from it.

Take a look.

System-UI fonts are one piece of engaging and getting out your message.

Good design, layout, and colors aide the communication.  A good designer creates the environment for the words, images, and video to serve the message. To my knowledge, the best designers start with font and typography.
Context makes a difference

Did you notice that I wrote the same thing, but you probably had different reactions?

Point is, the font and the words are the same.

And something you probably weren’t expecting…

Fun fact:

This entire website uses System-UI fonts as well. Below is the default original CSS for the same quote.

Our Joy comes from living our own lives simply – never from demanding that others live simply – or from ever making any demands whatsoever upon others.

Jonathan Lockwood Huie – Autho

Summary:

I personally don’t see any compelling reason to design for specific fonts for websites that are meant to be read for information and education. System-UI CSS fonts are a great choice. Site speed, Google Font tracking -vs- privacy issues, the cost for fonts, and other reasons make using System-UI fonts a great choice.

However, an exception could be is a site that sells lots of stuff. Where the fine details are available but the owner would prefer to push them aside.  I suggest to use a fancy font but focus on great pictures and imagery (and focus on the font of your “add-to-cart” button). Hopefully, the product is not worth returning for a refund.

Resources:

I’ve included some resources or given you some things that I use, whenever I am making a design or implementing a design:

Useful CSS font / typography specific syntax

The basics and the following: web safe fonts, line-height, text-transform, padding (using rems for top/bottom and ems for left/right), font-variant, font-weight, font-style, the element {width: __ch;} rule use,  element:first-of-type, word-spacing, :active, :focus, :hover, :visiter, element  {content: ''}, ::first-letter, ::first-line, using element ~ element, using element + element, :isnot(element) and color rgb and HSL declarations. 

Improve your font and typography

If you start every design by getting the font and typography done well before anything else, you will undoubtedly find that everything else becomes easier. The text comprises, by some estimates, 90% of every website. It is important to get right.

We haven’t even touched on accessibility.

You can practice this by creating relatively simple open source books or content, and make websites for them. 

A few good starter WordPress themes

These are sorted in roughly my preference. I have used both HTML5 and Underscores the most. Sage and Joints, I haven’t used much beyond playing around, but I like them.

Further reading and resources

Tags: , , ,

Categorized in: , , , ,

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *



Let's Work Together