advertisement
advertisement

Exclusive: Airbnb’s new font holds the secret to design’s future

With Cereal, Airbnb’s custom font that spans everything from billboards to buttons, the company is rethinking how marketing is done.

Exclusive: Airbnb’s new font holds the secret to design’s future
[Image: Airbnb]

For a company like Airbnb whose growth hasn’t depended on traditional marketing, its products are its brand. A Super Bowl commercial isn’t as important in spreading the word about Airbnb as the website people see when they first hear about the company or the app they use once they’re a customer. And yet today, apps and websites are more and more similar: Patterns are what makes the modern web usable. That means if you’re Airbnb and your products are now your marketing, and your products have to adhere to the mores of modern web design, there are fewer ways than ever before to set yourself apart.

advertisement
[Image: Airbnb]

In this new world, fonts have to carry a greater burden. They have to tell your brand story, in ways that scale up to the size of a massive billboard. And, at the same time, they have to work as a label on a tiny UI button. Two years ago, Airbnb embarked on a quest to solve that challenge with its type design partner, the legendary foundry Dalton Maag. The resulting typeface, called Cereal, hits the world today across Airbnb’s web properties and app. Though it’s currently limited to 12 languages using the Latinate alphabet, the plan is to extend the family to 25 languages, from Russian to Chinese, in the next two years.

Even if you don’t care about fonts, Cereal is a useful example of how an organization’s broader challenges reflect themselves in the details–and how for the details to be right, the organization itself has to change. “Typographic systems are the key to any design, and it’s become more important to create a font that supports all your touchpoints in a clearer way,” says Alex Schleifer, Airbnb’s head of design. “That’s why you’re going to see a lot more organizations thinking about it.”

[Image: Airbnb]

Font Nerds, Read Here

Dalton Maag usually starts its design process with a series of workshops to uncover the emotional qualities it’s trying to express. “Those end up being the hardest conversations to have, because people’s backgrounds and expectations can be so different,” explains Tom Foley, a creative director with the foundry. Airbnb was unusually self-assured of its own brand; what emerged was a desire for something clean, but with enough quirk to exude friendliness.

The “a” is always the most characterful letterform, simply because of its curves and joins. So to design the “a,” Dalton Maag took Airbnb’s logo, the so-called “Belo,” as its starting point. One unusual quality to the Belo is that it can be drawn with a single stroke, like a piece of calligraphy. Maag carried that over by creating an “a” that looked as if it’s drawn by a single stroke as well, thanks to details such as the stem, which pinches at its endpoints like a brushstroke. That calligraphic character was then translated to other letterforms, first the “B” then the “D.”

[Image: Airbnb]

But the most painstaking part of the design sprung from the challenge of creating a single font family that would encompass two competing uses: a lighter font for UI, and a heavier one for display. “Our mantra was, ‘From billboard to button,'” says Schleifer. Typically, only a small portion of a modern font family is drawn by a human: Just the lightest and heaviest weights. All the in-between weights are extrapolated using type-design software, simply because it’s exponentially more labor efficient. Thus, a key skill in modern typography is knowing how to draw the extreme weights in a way that the intermediate ones can be easily extrapolated. (Type nerds: The emerging technology behind variable fonts, which makes it possible to generate intermediate weights on demand in a web browser, is only possible now because type design algorithms have become so tidy and efficient.)

Yet for all the work that type design software can do, it has limitations. It typically doesn’t have to deal with master fonts spanning so much variation. Type design software can thus be prone to generating middleweights that may be a Franken-font mash-up. “The interpolation will inherit qualities from both extremes,” says Foley. Dalton Maag’s solution was to draw a third master font right in the middle that had Goldilocks characteristics: both narrow and bold in just the right balance, helping the algorithm more fluidly translate between all the other weights.

advertisement
advertisement
[Image: Airbnb]

Business People, Read Here

Schleifer sees the Cereal project, and how it blends brand and product considerations, as a microcosm of the way the modern design practice needs to change. Where almost all companies have brand designers and product designers that might come into contact only at the holiday party, Airbnb now blends its teams. Most projects have both a product design lead and a brand design lead. “We’re trying to blend those two creative strategies into one,” says Schliefer. “We think that’s a powerful advantage as the product experience and the content all become one thing. You shouldn’t notice the gaps.”

As he points out, 20th-century marketing separated the conception of a product from the marketing of it: One group would invent, and another group would sell. That world spawned advertising dynasties in the 50 years that followed the Mad Men era. Today, Schleifer argues, the boundary between making and selling shouldn’t exist. “Our own website is our largest marketing site,” he explains. “If you’re mission-led, marketing becomes something different. There’s not a lot of difference between someting we post on Instagram and the experience of our product. The more assistance you build to support that, from how you set up teams to how you run creative meetings, the better you’ll be.”

advertisement

About the author

Cliff is director of product innovation at Fast Company, founding editor of Co.Design, and former design editor at both Fast Company and Wired.

More