A Sans and Serif Meet-cute
A discovery, some digging and old-school detective-ing into a new Sans Serif x Serif type-mixing trend.
I first noticed it in this tweet. Exciting upcoming product and snazzy motion work aside, “What a fascinating logotype!”, I exclaimed!
A few days after, I was browsing Teachable, and noticed a freshly rebranded and redesigned site. Typographic choices? Lo and Behold! There it was, again.
Now, I was a woman on a mission. I rallied some of my fellow type sleuths (h/t Kawal Oberoi and yash arora), and we found more! All newer brands, but most interestingly — across industries. A live video calling tool, a development project, a photographer’s portfolio and of course, an online course-hosting platform.
Historically, one of the pillars of good visual design is contrast. Contrast creates hierarchy, in this case, typographic hierarchy, that helps distinguish elements from one another. This in turn, directs the reader’s attention through the content with intent and enhances the visual appearance.
So naturally, pairing serifs and sans serif might be the oldest rule in the book. Stylistically, they establish very clear contrast through their forms. Emotionally too, serifs feel older and more mature, while sans are perceived to be more contemporary and youthful. Typeface combinations pairing sans serif for the header with a serif body or vice versa are a dime a dozen, across print, web, and apps. A classic combination, almost impossible to get wrong.
So, what’s special or unique here?
It’s how alike and seamless they’re made to look. Almost competing or merging with each other. It’s the anti-contrast.
Let’s break it down
To understand what’s going on, we first have to talk about x-height. It is exactly what the name suggests— the measure from the baseline to the top of a lowercase x.
One of the key commonalities in all our examples is similar x-height in the choice of sans serif and serif fonts. This is the first thing that tricks us into reading through the words seamlessly, especially when appearing in larger blocks of text. Mixing typefaces with similar x-heights feels harmonious. There’s a lot of other decisions at play here, including but not limited to optical matching of weights, similar ascender (part of a letter that extends above the level of the top of an x) and descender (part of a letter that extends below the baseline) heights, but matching x-heights is an important one.
The simplest way to create this for your designs is go back to one of our examples from before: MakeSpace. It uses the Suisse family in serif and sans serif variants. And that’s it! Fonts within the same family have similar features, and so the contrast between them is largely limited to the addition/removal of serifs.
Final Thoughts
Vanderbrand, the team behind Square One District, explains their type choices on their website.
“The versatility of the primary typeface complements the atypical typographic system where serif and sans serif typefaces are used in combination to bring vibrancy and optimism…”
Vibrancy and Optimism. And without sounding too philosophical, I think it’s quite poetic that this trend, or style of pairing, whatever we’re calling it— highlights how everything, just like in typography, is beautiful, balanced and harmonious in spite of, but ever so often, because of our differences.
If you’re interested in well-curated thoughts and tips about typography, please do subscribe to my newsletter: tiptoptypetips. You can expect a freshly-minted edition every fortnight. A quick roundup of all things typography — tricks, hacks, lists and more.
