Welcome friends 👋
This month’s issue is about web fonts and typography. A few years ago I found this infographic on choosing typefaces inside the excellent information graphics book. Choosing the right font is a really hard decision, that highly influences how a website, app or, print product looks in the end. The infographic tries to solve this hard choice by starting with the kind of project you’re working on. It also shows how complex choosing the right font can be.
My sketch shows some of the considerations that are important on the web. One of the main aspects of web typography is readability. Since the web is a medium that is consumed by many different people in many different contexts, the text should be very readable and accessible. This means enough contrast, a large enough font size as well as a readable font family. But of course, that shouldn’t be the only aspect.
Often you want special features for certain font applications. The Dyslexie font is a great example, that makes text easier to read for people with dyslexia. Another interesting aspect is who you’re designing for. For people with poor sight, it’s important to have high readability. For children it might be more important to choose a playful font that keeps them entertained.
In terms of combining fonts, that fit together well, I like the Font Joy tool to quickly generate different Google font combinations. In most cases I try to pick heading and body fonts that aren’t too similar and complement each other well. There is also lots of websites that show popular font pairings like fontpair.co or typewolf.
Another aspect is type of media. Readability on a smart phone, that is really close to your face will be different from a large screen that is far away. In print products serif fonts are the better choice for fast reading, but on screen sans-serif are better to read. A specific font family might be a great choice for business card or logo, but not as a body text. So in general your font choice should always consider what media and screen is used.
One area that is unique to web typography is the performance for loading fonts. On the web we often have to limit the amount of fonts to reduce the loading size. A useful tool is the font style matcher by Monica, that allows you to match fallback fonts to web fonts, to minizime the flash of unstyled text (or FOUC) effect.
Of course we can’t talk about web fonts without at least mentioning variable fonts, so make sure to check out this little variable font guide, if you don’t know much about them yet.
I hope you liked this little deep dive into web typography. Tweet me if you have any more awesome font tools or tips to share!
– Lisi
Links & Tools
Typography Bookmarks
Collection
I have a collection of great typography tools and links on my blog, that you can check out. Over the years I found there are many great tools & resources for working with web fonts.
Tiny Font Helpers
Collection
Tiny helpers also has a great collection of font tools.
Web Typography
Tutorial
A great tutorial that goes through all the basics you need to know about using fonts on the web.
Zach Leat
Blog
There are few web developers, who know as much about web fonts as Zach does. He has great blog posts about different font loading strategies and performance improvements.
What I worked on this month
In April I wrote a fun blog post about controlling a LED matrix via Storyblok on Arduino. My team had really fun interacting with it and i get fun LED messages in my office now 💖 Other than that I helped implementing parts of Storyblok Version 2, which will come out later that year, so the month has been really busy with contributing to the upcoming release.
I recommend
Webfont Handbook
If you want to dive deeper into web font optimizations, Bram's book is a good starting point to learn about selecting and optimizing web fonts.