I’m a big fan of web performance. But I also don’t think that it should or have to compromise design. There is always a good balance in the middle. Back in 2017, I was on GitHub’s blog and was digging their font. It was super easy to read. So I dug into the properties with Chrome Devtools and saw that they were using a system font stack.
I’ve been using system fonts for years now and love them. So today I want to show you how to use a system font stack on your WordPress site.
What is a system font stack?
There are different types of fonts to choose from when it comes to a website. You pretty much have four different options:
- Web safe fonts: Free and no download time required by the browser, but typically look dated and therefore aren’t used a lot. See a list of web safe fonts.
- Web fonts: Look beautiful, but require download by the browser. Have both free and premium options available. Adds to the overall page weight of your website. However, they can be served from cached CDN. Providers include Google, Adobe Fonts (TypeKit), etc.
- Host web fonts locally: Both free and premium options available. Still requires download time, can take advantage of single HTTP/2 connection on cached CDN.
- System fonts: Free, look pretty darn good as they match the OS, and no download time required! They are used by GitHub, Bootstrap, Medium, Ghost, Booking.com (read their system font story), and even your WordPress dashboard. In my personal opinion system fonts look slightly better on macOS versus Windows.
System fonts are nothing new. In fact, Medium has been using them since 2015. They feel just like your OS because they are using native fonts. Many of the modern operating systems choose fonts very wisely and all have a very sleek look and feel to them. It’s not like defaulting back to a web-safe font of Arial or Times New Roman. Trust me, nobody wants to see Times New Roman on a website.
And best of all, system fonts work just like web safe fonts, in that they don’t require any download time by the browser. This can help reduce the overall page weight on your website. As of April 2020, web fonts on average make up around 6.2% of a total website’s weight. While this is not huge, remember every little optimization you make adds up to a speedy website.
Are there any disadvantages to using system fonts? Well, one would be that they are dependent on browsers working correctly. Google actually broke bold weight system fonts in Chrome 81 on macOS. Thankfully they fixed this in Chrome 83. But there was a short period of time were any website using a system font looked a little weird.
System font stack CSS
With the font-family property with web fonts, you typically have your primary font and one or two fallback fonts. With system fonts, you have to include all of the different operating systems, and therefore you have to stack quite a few more fonts. This is why it is called a “system font stack.”
For example, here is how CSS might appear with a web font.
font-family: "Open Sans","Helvetica Neue",sans-serif;And here is how a system font stack might look.
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"Did you know your WordPress dashboard uses a system font stack? Here is what they are using.
Read full article here: https://woorkup.com/system-font
Comments
Post a Comment