The Startup
Published in

The Startup

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!

Early sneak-peek tweet into MakeSpace.

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

Different typefaces have different x-heights, even at the exact same point size. Shown here: Founders Grotesk by Klim Type Foundry and IBM Plex Serif by IBM and Bold Monday.

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.

Adobe Fonts has a good tool to help filter by x-height, and also font weight.

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.

From top → bottom: Square District One — Neue Haas Grotesk by Font Bureau, Domaine by Klim Type Foundry. Teachable — Reckless by Displaay Type Foundry, Basis Grotesque by Colophon Foundry. MakeSpace — Suisse Works & Int’l of the Swiss Typefaces library.

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.

Another example of using variants within the same type family to achieve this result.

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store