Introducing Airbnb Cereal

A new typeface that takes us from button to billboard

Categories: Behind the Scenes, Interview, Projects — Airbnb Design Editorial

At Airbnb, we love typography because we see it as a building block for creating meaningful connections around the world. As a company that’s designing online and offline experiences, we saw a clear opportunity to create a distinct typeface that can carry the weight of both—to leap off the screen to a magazine. We needed to design a typeface that combines character, function, and scale. Because of their global perspective and expertise, Dalton Maag—an international type foundry—was the ideal partner for the task.

In a recent conversation, Derek Chan (Creative Lead, Marketing) and Karri Saarinen (Design Lead, Design Language Systems) shared how Airbnb Cereal meets our business needs, and what’s next for the new typeface.

Why was it necessary for Airbnb to create a new typeface?

Derek Chan: Our work is extremely typographic, and people experience our brand across various mediums including the platform, Airbnbmag, and metro stop advertisements. We have specific business needs around brand distinction, legibility, and scalability, that no available typefaces were addressing. We wanted a typeface that would function beautifully online and offline while reflecting our brand personality, so we decided to craft our own.

Karri Saarinen: We briefly considered screen-optimized system fonts, but couldn’t find a universal option that provided the look and feel of our design language. The typefaces we reviewed were typically good for brand and print but not UI, or vice versa. We needed a solution that would lend a consistent voice across all mediums and platforms we support—web, iOS, and Android.

Display of posters featuring Airbnb Cereal

How was the name Cereal chosen?

DC: We sought to imbue a playful, open, and simple typeface with a touch of quirk. It brings us back to the early days when breakfast was a part of our name, and is also a nod to a time when cereal saved the company. We explored a few traditional naming territories, but ultimately the story and the name represent our values and sentimentality.

Airbnb Cereal at different weights

Why was Dalton Maag the right partner for this endeavor?

DC: Because we aim to bring a global perspective to our work, we partnered with Dalton Maag—a premier, independent type foundry with a reputation for creating sophisticated, global typeface systems. They’re a highly collaborative company that works with writing systems experts all around the world, creating typefaces that are locally relevant but cohesively designed.

We’re inspired by their work with clients who’ve created many script systems across various mediums—from low-res phone displays to large marketing campaigns—because that’s the kind of scalability and brand continuity we strive for as a global company. The Airbnb community spans 191+ countries, so a global typeface system is one way for us to further cohesive design and trust at a local level.

Process sketches

What Airbnb teams worked on this, and how was that decided?

DC: We knew that our ambitions to create a typeface that scaled from button to billboard would require a multidisciplinary team including product and marketing. I work on the brand and marketing team that’s comprised of designers, photographers, filmmakers, writers, and producers. Because of the nature of our work, we were able to test the font across various content types and formats—all produced in-house.

KS: Our design system team—which is responsible for Airbnb design guidelines including typography, styles, and color palette—looked at this project through the lens of product design. We focused on legibility, weights, texture, and overall aesthetics, and collected feedback from stakeholders such as leadership, product designers, and the accessibility team. And it became an engineering project when it came time to test and integrate.

Why does typography matter for Airbnb?

DC: As designers we can choose when words serve the visual or when words are the visual. At Airbnb we use type to both blend in and stand out—to keep the focus on the community, and to make big statements. For example with the We Accept Super Bowl campaign, we wanted to send a powerful message. By placing large type over portraits without any voiceover, we were able to create a simple, potent treatment that highlighted our brand values.

KS: Text and typography often define an interface—the majority of any app’s UI is text. Having a suitable typeface that’s set well is critical for an interface and, because we’re a design led company, we care a great deal about the expression of our interface. Developing our own typeface gave us the opportunity to craft the forms, weights and legibility features exactly how we want them.  

Airbnb Cereal shown with open apertures

How does Airbnb Cereal solve for legibility issues?

KS: A lot goes into what makes a font legible. With Cereal, we considered a range of factors to determine if it met our legibility standards. We opened up apertures to create distinct letter forms in what would have been similar looking letters. We also increased the x-height which makes the lowercase characters easier to read.

Type can get pretty small in UI design, and if the weight is too light the type can almost completely disappear. So we paid special attention to the balance of the Book weight as to not be too light or too heavy. Lastly we toned down some of the characters so that they wouldn’t distract, but rather would be simple enough to allow people to complete tasks in the UI.

Airbnb Cereal shown in desktop

How does Airbnb Cereal differentiate our brand?

DC: In addition to the look and feel which we’ve touched on a bit already, our new typeface also stands out by representing our values. Our mission is for anyone to belong anywhere, and typography will help pave the way for us to get there. When we began designing the Latin character set, which only supports a portion of our global community, we thought about characteristics that would translate to other script systems as our typography work continues.

Dalton Maag helped us understand how script systems differ from one another and that the geometry of our Latin set wouldn’t translate 1:1 with Arabic, for example. We knew Latin was just the beginning of our typographic journey, and that we needed to think about design decisions that would cascade to other systems. Over the next few years, we’ll be investing to extend our type family.

Airbnb Cereal in billboard mockup

How does the font scale across mediums?

DC: Because of the number of weights we have, we’re able to play with all kinds of hierarchies and scales. For example on a billboard that says ‘Live There’, we can use our heaviest weight at an enormous scale, and actually weave the type with athletes playing in the streets of Havana. But then with things like a data visualization report or our Public Policy, the typeface allows us to design for more nuanced hierarchies while utilizing lighter weights.

KS: Many typefaces work well when you can control the setting, but with UI and digital products the environment is dynamic. You have to consider screen sizes, devices, and content format, and it’s hard to predict future needs. We experimented through dozens of iterations, testing in existing and new UI mockups over several months. Not only does the typeface look great and feel like us, but it performs better than anything we’ve used before.

Airbnb Cereal in mockups

What challenges were faced throughout the process?

DC: In the beginning we were working with very few letters, because a few core letters define geometries for others and it’s unnecessary to draw them all that early on. The limited set made it challenging to generate work that looked believable for stakeholder sign-off at each stage, so we had to get creative. Some of my favorite creations were a fake ad for Airbnb for Work, and a fictional line of city-flavored sodas.

KS: To arrive at any decision, we had to design hundreds of screens, compare them, note issues, and provide feedback to Dalton Maag. The issues became apparent by testing this way—not in slide decks or on paper. We also had the challenge of developing and implementing a new typesetting without changing the existing product too much, or causing problems for the teams or business. My case study details the process, challenges, and lessons we learned along the way, which we hope will help anyone else looking to take on this kind of challenge.

Airbnb Cereal shown with featured home

What’s next for Airbnb Cereal?

KS: We currently support seven non-Latin based languages, and are looking to internationalize far beyond that. This will take time. We want to provide a thoughtful experience to everyone, no matter the language, so we’re looking at data to determine which languages to prioritize next.

Now that we own the typeface, we’re interested to see how it’ll perform, and what changes we’ll make. Maybe we’ll adjust characters and symbols or use new technologies like variable fonts. In a way, Cereal will be like software—improving and evolving over time, across our brand and product.

DC: The Latin character set took us about a year and a half from inception to implementation, and a good deal of that time was spent on design direction. Our Latin character set has a few hundred characters but Chinese Simplified, for example, has over 27,000.

We intend to expand to include script systems used by our global community including Chinese, Japanese, Devanagari, Arabic, Hebrew, Cyrillic, Greek, and Thai, and that will take time. I’m interested to see Airbnb Cereal take form in these languages, and curious about what we’ll learn about global typography in the process. This is just the beginning.

For a technical deep dive on how we implemented Airbnb Cereal across our UI, check out Working Type. In this case study, Design Lead Karri Saarinen breaks down  the process to include the challenges of testing and implementation across product.

Video created by Salih Abdul-Karim (Motion Design), Ian Rowe (Sound Design), and Magen McAfee (Scriptwriter)

Up Next