The Label: Harnessing the engagement power of typography

Senior product designer, Michael Feeney, delves into the key role typography plays in Zalando’s new visual language.

In part one of this series, we introduced you to The Label, our new visual design language. It’s what makes Zalando look like Zalando! We created a whole new set of core brand elements to bring our inclusive, bold, and playful personality to life. Typography is undeniably a very important core element — it has the power to inform, guide, inspire, and elicit emotion. We knew that a carefully chosen typeface could bring our messages and values to life, add weight and warmth to our words, and take us from basic to bold.

As an e-commerce platform, we had to keep our typography system accessible by ensuring legibility and providing visual guidance throughout the experience. But because we operate in the world of fashion, we also needed our typography to showcase more emotion, craft, excitement, and attention to detail. Realising we were not ticking all these boxes with our previous typography system, we decided it was time to rethink it from the ground up. We needed to develop a deeper emotional bond with our customers while making sure that our typography system (alongside our other stylistic elements) was distinctive, recognisable and coherent. Here’s how we did it.

What’s your type?

When we started this project, Zalando’s corporate font was the oh-so popular Helvetica, so we began with the clear assumption that our typography usage lacked distinction. Nevertheless, it was still very important for us to verify this assumption, as well as identify opportunities to make our typography less run-of-the-mill. And what better way to verify our theory than by running a good ol’ benchmark against our competitors!

We started by identifying 60 brands operating in similar sectors (digital fashion and beauty) and mapped their typography on two axes, showing the weight of their main typeface (Bold vs Regular), and the family of the main typeface (Serif vs Sans Serif). We were quickly able to validate our early assumption: with Helvetica Bold as our main typeface, Zalando fell into one of the most crowded areas of the framework. Our typography was, indeed, pretty unexceptional — but the framework helped us see new and more exciting possibilities.

At this stage of the creative process, we started exploring different typeface treatments. We considered serif typefaces because of their more delicate and classic qualities, and extended typefaces for their bold and confident look and feel. We also tried applying different weights to these early explorations, though we quickly realised that many of them still didn’t feel true to our brand identity nor to our legacy. Some explorations felt really bold and playful, while others felt more trustworthy and inclusive. We needed our solution to meet all of these criteria — after all, as a fashion platform we often oscillate between informative and inspirational content.

A perfect match

We really liked the way smooth sans serif typefaces showcase informative and pragmatic content and how serif typefaces bring charm and a human touch to stories. Weighing our options, we realised that we wanted to opt for a serif and sans serif type pairing as our new typography system. Combining these two different approaches to typography felt like the perfect way to convey Zalando’s personality.

Not only would this duo set us apart from our competitors, it would allow us to guide and inspire customers while injecting moments that feel more human and personal into our communication.

Now that our direction was clearly defined, we had to find the perfect serif and sans serif for our pairing solution. We isolated 140 typefaces from 40 different foundries — ranging from independent studios to renowned foundries. As we wanted to make well-informed and unbiased decisions, we turned our experience principles and brand personality traits into actionable questions, for example:

• Does the typeface spark curiosity to browse further?
• Does the typeface adapt to the context or the tone of the discussion we are having?

This typography checklist helped us isolate the type combinations that we felt best represented our brand. After numerous rounds of thorough typeface inspection and rapid prototyping, we reduced our initial 140 typefaces to 8.

In the final round, we made sure that the proposed pairing would have a similar visual weight by making sure the fonts had the same x-height and that there would be enough contrast between them. Most importantly, however, we needed this pairing to feel like a continuation of our brand language and not a complete rejection of what we used to be.

For this reason, we opted for Helvetica Now — a modern take on our original corporate font, the sans serif Helvetica — combined with the serif typeface Tiempos as our final pairing solution.

The system

Why did we do all this exploration to land on a solution that still contains Helvetica? After experimenting with multiple sans serif options, we were impressed by the accessibility of Helvetica Now. It’s optimised for digital use, which means it is easier to read, offers better contrast, and improves the overall legibility of the text. This made it a great inclusive and timeless option. As for Tiempos (which is also optimised for digital use), we were drawn to the legible yet romantic characteristics of the vintage serif typeface — its generous curves and large characters.

Though good old Helvetica had been Zalando’s corporate typeface before the rebrand, we used Arial on the web, San Francisco on iOS, and Roboto on Android. This lack of coherence arose because we had wanted to ensure sufficient loading times. As part of the new typography system, our first step was to make sure the new type pairing would be used regardless of the platform, while still meeting our technical requirements. After all, after putting so much effort into our new system, we had to make sure it would be rendered in the exact same way for every customer, with no compromise when it came to speed.

Scaling our system

Once we had found our two typefaces for the new pairing, we had to make sure the system was clear and easily scalable for a company our size. In order to do so, we separated it into two different categories. Firstly, we thought of a scalable system on how and when to use the font pairing. Secondly, we provided a whole new type stack for digital use.

1. Pairing system
   Helvetica Now is used for functional, guiding or informative content. Whereas Tiempos is used for inspiring, storytelling or complementary content. As for pairing them in the same headline or same paragraph, it is absolutely allowed — encouraged even.
2. Type stack
   We made a generous range of sizes available as part of the new type stack, while making sure the contrast, line-height and letter-spacing are always visually aligned regardless of the size used. We also optimised all fonts to be rendered flawlessly on all of our different platforms, without any significant effect on loading times.

As we all know, a visual language is constantly evolving — and ours is certainly no exception. Even though our new type system is already an integral part of our new visual language, we are still liaising with various departments to ensure that we’re fully aligned and invested in improving on the new system further. But overall, if we’ve managed to create a stronger emotional connection with our customers by revisiting our type system, that’s already a great success. Good riddance, Helvetica. Hello, Helvetica Now and Tiempos!

You can find more examples of Michael Feeney’s work here. Want to be part of our design community? Check out our open positions and meet the team.