The story behind the typeface: Zalando Sans

Refreshing Zalando’s visual voice with a custom, open-source typeface

Designing a new typeface wasn’t originally part of the plan.

The past few years have been a key period of evolution for Zalando. The company has transformed far beyond online retail, expanding and innovating across different spheres. Visually, it was time to let the brand do some of the ‘talking’ about what the company means today.

This was the starting point for the Brand team at Zalando. Their initial idea was to update the visual identity, aligned with the company’s core brand attributes: bold, welcoming and fun.

Visually, it was time to let the brand do some of the ‘talking’ about what the company means today.

But with this kind of strategic clarity about how the brand should look and feel, bigger change was inevitable. These brand attributes quickly became the foundation for a much larger visual refresh and, eventually, for a whole new typeface: Zalando Sans.

Phase one: the wordmark

The classic Zalando wordmark was the first piece for the team to tackle. After years of building brand recognition and identity around the wordmark, the goal was to give it a refreshed look and feel — contemporary and modern. Zalando isn’t just an e-commerce or tech company; it’s also an entertainment, content and lifestyle brand. The typography of the wordmark needed to capture and communicate this.

To start, the Brand team looked at hundreds of different typeface styles and considered the range of connotations they have. There were quite a few directions on the table at first, and they deliberately expanded the design space to learn more about what was possible.

But fairly quickly, the team settled on something that looks and feels like a natural evolution. Having this updated wordmark made it clear what a strong impact fresh typography could have on the whole brand presence. The wordmark propelled the whole project forward. The next step: update all of the company’s typography with this new visual voice.

Phase two: the typeface

Because the wordmark typeface was a custom design, there wasn’t an out-of-the-box font that could deliver the same effect for a full range of typography needs. The team also wanted to change the approach to type pairing; the combination of a serif font for headlines and Helvetica for other text had some brand distinctiveness, but there was opportunity for more differentiation.

The updated wordmark made it clear what a strong impact fresh typography could have on the whole brand presence.

This led to a second phase of the project: partnering with brand agency Kurppa Hosk to design a completely custom typeface that matches the updated wordmark. A project like designing a custom typeface really benefits from specific typographic expertise. Beyond their work as brand consultants, Kurppa Hosk also has an integrated type foundry, which brought the specialised skills that the project needed.

The updated wordmark is a relatively restrained humanist sans font with some modern touches. Still, the team knew that the full custom typeface would need further design work so that it could communicate the uniqueness of the Zalando brand. It would also need to be optimised for legibility and come in different weights and widths.

By this point, it was also clear that the new typeface should be a core part of Zalando’s visual identity. That meant that it needed to have a lot of creative possibilities and be flexible enough to have a long life with the brand.

Generic humanist sans font → Zalando Sans

Once the first draft was done, the next step was to go through the typeface and find ways to inject character. It took several passes to get it right, but these adjustments ultimately made Zalando Sans come alive:

1. Wider cuts
2. Subtle curvature
3. Individual characters

In partnership with Kurppa Hosk, the Brand team spent time with characters like the K and the Q, shaping the curves so that they’re uniquely Zalando. The descenders on characters like the R and the Y also have stretching lines that support the typeface’s elongated and wider stance, without actually taking up more space.

Flexible enough for different propositions

Across Zalando, there’s a whole range of different needs and propositions. The new typeface needed to be expressive enough for all of these varied contexts.

As a creative brief, this is pretty demanding, especially when it came to text-based editorial content. In the past, the team had used a serif typeface more extensively for this kind of context. Without the serif, body text looked like it could be from any webpage — it didn’t feel inspiring enough. Paying homage to Zalando’s origins as a fashion destination, while still making room for new expressions, was another factor.

The team played with variants that have more of a fashion-heritage feel, without going into serif territory, but those didn’t end up being part of the core typeface. Instead, they experimented with typesetting. Rather than changing the variant, they were able to set the font in different ways to create a much better editorial feel for longer text pieces.

Specific typesetting choices for leading and tracking allow Zalando Sans to work for a variety of propositions

The feel of the typeface became breezier and a lot more interesting thanks to thoughtful typesetting choices: adjusting the leading and tracking, adding bigger text and pull quotes, increasing the use of white space and making use of the grid when structuring text.

Smart typesetting with Zalando Sans creates a modern, editorial feel

Bold, welcoming, fun

All three of Zalando’s brand attributes were core to the type design.

Boldness doesn’t always have to be literally typeset in bold. Across the company, Zalando Sans Extended is the primary font variant, which is a wider setting of the type. It has a presence and a stance that absolutely equals boldness. (But yes, there’s a font variant in bold, too.)

Zalando Sans has a presence and stance that equals boldness, even when text isn’t set in a bold font variant

A humanist sans typeface is an approachable choice; it communicates a point of view, but is welcoming to everyone. Zalando Sans is also very legible and easy to read, which makes it friendlier for people with different access needs. By designing a custom typeface, the team could make sure that it included all the necessary special characters for different languages — and there’s the opportunity to add new variants or characters at any time.

The fun is in the little, surprising details — such as, again, in the unique curvatures of some characters. But in a larger way, the font’s variability also makes it fun, because it’s a powerful animation tool. Making Zalando Sans literally move helps the font come alive.

Looking back — and forwards

The Brand team sprinted hard on this project, and it wasn’t a linear process. There were lots of twists and turns. All the underlying strategy work helped to keep things going; everyone felt clear conviction about why they wanted to update the brand, and there was alignment on the purpose and direction.

The typeface is just the beginning — that’s perhaps the most profound part. The team has already made tweaks here and there as they discover things that could work better for certain use cases, for example, branded merchandise or special documents like financial reports. Rather than having to licence a new typeface or do things by hand, they can expand what the font is able to do.

Usually, a design team just gets a font off the shelf, and it’s not possible to edit it — and some open-source fonts haven’t been touched in decades. But in the tech industry, fonts are increasingly treated as a software product. With Zalando’s foundations as a tech company, it’s a good home for a custom, open-source font.

Besides the practical business impacts — more efficiency, no licensing costs — a custom typeface is a compelling creative choice for real brand differentiation.

Zalando Sans is already defining the brand’s visual voice across the company

The future is wide open for Zalando Sans — literally. By putting it out open source, there’s also the option for folks from outside of the company to contribute and explore it. With the fresh, custom typeface, the Brand team had a chance to really say something new on behalf of the whole company — and to put the brand into practice. This bold step not only redefines the visual voice but also invites the wider design community to be part of its ongoing story.

Keep reading

• Bringing more character to the Zalando Design System with theming
• From the archive: Harnessing the engagement power of typography