Typefaces for headings and body

Yesterday, a colleague of mine, asked me a question on Twitter about my typeface choices. To get everyone on the same page, here is his question:

I noticed you did serifs for headings and sans-serif for body text. My intuition is the other way around and I'll do that for my blog. Curious if there is some deeper reason?

I loved this question so much, that I decided to write something about it. So why did I do it this way?

The answer is a bit unusual for the type of design decisions I commonly do. To be honest, it's mostly based on personal taste and a more characteristic feeling I wanted to have for this website.

Picking the specific typefaces

When I started looking into styles I wanted to convey on this redesign, I looked at a lot of different typefaces. At some point, I saw Value Serif, which was created by Colophon, and it immediately clicked for me.

The characteristic appearance, combined with a rich set of OpenType features (e.g. the lowercase f or e are just beautiful) made me want to go with this typeface.

Based on the love for these little details of Value Serif, I needed to make them appear noticeable across the whole website. This was the reason for picking it as a heading font and making the heading design big and bold.

Because the headings are very characteristic, I wanted to do something more visually simple for the body text. That was the reason, why I finally bought and used Aperçu. Aperçu also has some grotesque flavours and characteristics in a way, but it feels simple and flexible enough for the use cases I had in mind.

But what's about readability?

In terms of readability, there is an ongoing debate about serif and sans-serif. Culturally, we know that serif typefaces are more common for long texts in areas like books or newspapers. The perception is that this benefits legibility.

There are studies and arguments for all different angels on this. I think in the end it comes down to setting the typefaces correctly and not the specific typefaces themselves.

With screens the argument, at least in the past, becomes a bit different. These arguments are mostly based on screen resolutions and the way typefaces are rendered on screens. In this area sans-serif was the preferred way to go. With better technology and screens in general, this will become less of a priority.

All in all, it's complicated and it probably boils down to the environment the typefaces live in. I can also see a future, where I change my current thinking. Maybe I move Aperçu more in the background for small details like captions and add a less stylistic body typeface sometime in the future.