Picking a fitting typeface is one of the most important choices when designing a product. Typefaces, depending on the area of use, will convey brand personality equally if not more than other style decisions, like colors, or spacing. Between sans-serif and serif, handwriting, or monospace, there's a plethora of font varieties, each with different use cases, each emitting a different emotion. And then there's the vast internet at your fingertips, with thousands of available typefaces, each having a collection of fonts in different sizes, weights, and overall styles.
So naturally, I'm often thinking about which typefaces I want to use for my projects, including this blog. Initially, I started using the built-in macOS system fonts (as San Francisco is a beautiful typeface), with the downsides of visitors using non-Apple devices not being able to enjoy the design. As with most people, I was quick to hop on the Inter bandwagon, as it's a great aesthetic for user interfaces, being very similar to San Francisco, and used by most current products around the web. I'm using Inter for all sans-serif text on this website.
⌨️ Inter as a universal typeface?
And still, using Inter for my blog content didn't seem right (check out the image above), and it made sense: Traditionally, you wouldn't use a sans-serif font for long-form content, as it can hurt legibility and the reading flow. This is the reason why you won't ever see a print magazine with sans-serif content. Some great sites work fairly well with sans-serif fonts, though, so I wouldn't be too harsh with that rule, it's rather a recommendation if you want to be on the safe side.
While I could have kept experimenting with letter-spacing, line height, and other styling options, I opted in for a different path and searched for a fitting serif font to accompany my digital content.
👀 Comparing serif typefaces
Below, you can see a selection of fonts I've tried so far, side by side.
Lora
IBM Plex Serif
PT Serif
Crimson Text
Zilla Slab
Alegreya
Based on this straightforward comparison I immediately observed some differences in how different typefaces were constructed. You can clearly see, that Lora and Crimson text have a bolder appearance weight-wise, compared to the sleeker and more narrow IBM Plex Serif and Alegreya. When you zoom out, it almost feels like you're viewing compression artifacts. Then again, the stylistic difference between the classic serifs and the rather modern, almost geometric, ones is a huge factor in the emotion we want to convey.
What's more, the character size itself varies between each font, even though the styling instructions stayed the same. A paragraph of 20px Crimson Text looks strikingly different compared to 20px Lora.
In the end, trying out different typefaces and font variations is an exciting task, seeing how each change affects the feeling you're getting. Of course, this blog is intentionally text-centric, and will thus depend more on the choice of a typeface compared to other mediums. For the pleasure of reading and to keep the minimalistic design going, I strive to add as little distractions as possible, so the focus stays on the content and nothing else.
For now, I'll keep Lora as my sans typeface of choice. It strikes a balance between being a perfect fit for my posts and being too centered on a specific style. If I were to write a post on a topic completely different from technology, Lora allows me to do just that without feeling like the design is out of touch with my content. I'll probably still keep an eye on opportunities for bringing in IBM Plex Serif and Zilla Slab, as they feel suitable for technical use cases, and somewhat remind me of the geometric font style Google has adopted recently.
I hope you enjoyed this post! If you've got any questions, suggestions, or feedback in general, don't hesitate to reach out on Twitter or by mail.