Before webfonts were widely available, designers relied on a relatively small number of web-safe fonts, i.e. fonts that come pre-installed with various operating systems, and thus most likely to be present on user’s devices. As a result the web was saturated with Arial, Helvetica, Verdana, Georgia and Times New Roman. While these fonts are not necessarily horrible, they were everywhere from text editors and spreadsheets, to web and print at one point. So when techniques like Cufon and sIFR came along we jumped on board quickly – at that point anything was better then designing another website using Verdana.
We’ve come a long way since then and the tools available to us know are much faster and more reliable. Services like Typekit and Google fonts enable us to use almost any font, and require just a few lines of code. But convenience comes at a price. Aside from images, fonts are one of the largest resources loaded on a website. Depending on the number of font-families and variants being used, this can make a huge difference in performance, especially for mobile users.
Personally, I got so used to the freedom of choice when it comes to picking fonts for my designs, that I forgot about web-safe fonts entirely. So when we decided to use them instead of webfonts in one of our recent projects, I was a bit lost. Thankfully there are some great articles and resources out there, that helped me get past my Arial-phobia 😃, so today I thought I’d share the bookmarks I’ve compiled on the topic.
Let’s start with some reading:
- https://a8cdesignflow.wordpress.com/2017/08/07/typographic-tweaks-for-longreads/ – a story of how Longreads.com switched to a system font.
- https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f – a story of how Booking.com switched to system fonts.
- https://medium.design/system-shock-6b1dc6d6596f – another story – this time from Medium.com
… and move on to practical information and tools to help you choose your font-stack:
- http://artequalswork.com/posts/better-css-font-stacks/ – practical tips on constructing CSS font stacks.
- http://fontfamily.io/ – a very neat tool that lets you check font availability in different operating systems, including mobile. I found this one the most comprehensible and the easiest to use.
- https://www.cssfontstack.com/ – a collection of web-safe CSS font stacks.
- https://24ways.org/2007/increase-your-font-stacks-with-font-matrix – information similar to the above, but in a handy matrix format.
- https://www.granneman.com/webdev/coding/css/fonts-and-formatting/default-fonts – another list of operating systems and fonts that I found useful.
Happy reading!
AUTOMATTIC DESIGN (FLOW RIP) 