Crafting the Airbnb Cereal Typeface

Originally posted on Airbnb.design blog with the title Working Type – How we introduced Airbnb Cereal to our UI.

On May 15, 2018, Airbnb launched a new typeface called Airbnb Cereal across our product and brand. Airbnb Cereal was created in partnership with Dalton Maag—a global font foundry—and Airbnb’s Marketing and Experience Design teams.

Typographic decisions are usually made on a brand level—with considerations for look, feel, and accurate expression of a brand’s desired direction. But what about UI? It’s often referenced that 90% of UI is text, which holds true for Airbnb, so changing the typeface brought a significant change to our UI design.

As a Design Lead on the Design Language System team, I often wonder what’s happening behind the scenes when companies rebrand or change typefaces. What’s the process and how long does it take? How do they find a good UI typeface, and how does it actually change the UI?

With the recent launch of our newly designed typeface Airbnb Cereal, our team was able to experience the process firsthand—including brand marketing and product UI. From developing the type, UI testing, and product integration, here’s what we learned along the way.

Considerations and Partnership

Typeface design is like any other design project. Our business needs included brand differentiation, the ability to span brand and product, and text legibility in the UI. Through research, user testing, and observation over the years, we learned that, especially in small sizes, the our previous typeface was hard to read.

We briefly considered system typefaces that are optimized for screens, but found there wasn’t an option that could provide a unique and consistent voice across our mediums and platforms. So about 18 months ago, we kicked off the typeface project in partnership with Dalton Maag.

They guided us through each stage—discovery, ideation, and refinement—while working closely with and collecting feedback from both brand and product leadership. It was apparent early on that a balance of functionality and brand expression was necessary, and this influenced the decisions we made throughout the process.

Choosing Your Family

Typography doesn’t exist in a vacuum—it’s rooted in the culture and tradition of a given language. It’s not invented from thin air, it’s a continuation of existing traditions. All typography we see today is a product of lineage that started with movable type and Gutenberg.

Together with brand and product leadership, we decided on directional keywords to represent our desired direction—human, friendly, welcoming, and creative professionalism. This exercise led us toward the modern neo-grotesk lineage that we’d influence with our own flavor.

For example, some of the characters were inspired by our brand symbol—the Bélo—which can be drawn by hand in a continuous stroke. Both the ‘a’ and ‘b’ can be drawn this way, and the loop on the bowl of the ‘a’ connects back to the Bélo. The single-stroke drawing is quite human, but also balanced with simpler features in other characters.

Connecting Brand and UI

Marketing and product UI typically used typography to serve different purposes. While marketing aims to set a strong brand expression, UI aims to connect to the brand while functioning within complex, often-changing environments.

With UI typography, the content, screen sizes, and qualities are dynamic—text size, copy length, format, and device resolution all vary. The UI must support complex or critical moments when the community needs to read, understand, or take action based on the information provided, while connecting back to the brand.

Simply put, UI typography should work reasonably well in most, if not all, situations. The only way to understand if your chosen typeface has these qualities is to use or simulate use in the real world.

Working the Words

Following the ideation stage, we started to receive iterations of the font from Dalton Maag. Each character takes times to create and modify, which meant we had to work with a limited set in the beginning.

Limited number for characters

To see if the typeface personality fit the UI, we had to design with it. Working with about 20 characters made this a challenging task because, if we accidentally used characters outside of our set, a design program (like Sketch) would switch the font entirely. Testing the same copy everywhere didn’t feel realistic enough, either. We couldn’t find a limited character copy generator, so we created our own tool to produce words.

To resemble a natural sentence structure, the tool had to include nouns, verbs, and adjectives. I started with the English dictionary, accompanied by regular expressions and AWK programming in Unix, to create a set of words that only contained the characters we had available. I manually removed words that didn’t feel worth showcasing, and added a few names and places such as Airbnb and Alice.

I first started with simple structures like noun-verb-adjective-verb. This felt stale, so I looked to famous authors such as Hemingway, Carroll, and Twain to help break out of my rut. By crudely modeling the masters, the sentences became more interesting.

The model was set up using a simple Node.js program that generated titles, paragraphs, and short stories. These were then uploaded to the cloud, turned to a different set of content over JSON, and rendered on the site.

A basic static site generator was used to host the content generator website that our team used. It also acted as a tester on its own. The site made it easy to switch between Circular and new fonts, with the ability to change color and size. This also streamlined the process of sharing progress, and quickly testing new iterations as they came in.

UI Testing

Being armed with a custom content generator made it much easier to test the font in realistic designs. While testing in UI, we focused on legibility at all sizes, balanced weights for hierarchy, and non-distracting texture—all qualities we believed would result in a functional typeface.

Distinct letterforms and apertures: If letters have similar shapes or look alike—such as ‘e’, ‘c’, and ‘o’, or in words like Illinois—the eyes and brain have to work harder to process. By distinguishing similar characters and widening the apertures, like the opening in the letter ‘c’ for example, we made it easier to read.

X-height and width: In Latin based languages, most text is written in lowercase, and most characters don’t have ascenders (like an ‘f’ does). By proportionately increasing the height of lowercase letters compared to uppercase or ascending characters, you can make a typeface easier to read. With ‘fox’, for example, we’d see a less drastic height difference between ‘f’ and ‘ox’ which makes the text appear larger in small sizes.

Weight and strokes: UI type can get pretty small and, while screen resolution has typically improved, it’s still not as sharp as printed words. If a character’s weight is too light in UI, it can almost completely disappear. We paid close attention the common Book weight, and Dalton Maag improved it further by providing platform specific font hinting.

Simple and conservative: UI should be functional and make it as easy as possible for people to complete tasks. A good UI font texture should feel soft as your eyes scan it. Clear and easy to read, the typeface almost disappears leaving only the content behind.

“Type that’s too decorated or playful can distract or cause people to miss important information, therefore failing its intended purpose.”

We toned down some of Cereal’s more expressive forms to create a better, more simple texture for the reader.

What testing taught us: Over about six months, we created hundreds of screens and tested around 30 iterations for style and weight. This type of testing was extremely useful because it allowed us to judge the typeface by its merits in UI. Many of the typeface features—especially the texture—were difficult to assess until we saw it in text-heavy UI.

Once we had the overall style and details set we continued to refine and test for an additional six months, working closely with Dalton Maag the whole time.

Product Integration

Once we started to finalize the font files, we faced a challenge of integrating the new typeface into the product. We needed to set the type—sizes, leading, spacing—across a product that’s been around for 10 years and has thousands of UI views.

Our Design Language System manages the product typography across all platforms, and all of our UI components, code, and designs reference specific typographic style from the system. For example, if an engineer referenced “TextTitle3”, it would render as size 24, leading 32, and spacing 2. So when we changed the definitions, components automatically receive new settings. But because no two fonts share the same metrics, we had to develop our new typesetting without drastically changing the existing product.

To test the new type in product, we built a setting that allowed teams to view the font and settings across our website and mobile apps. With our QA partner, we captured over 11,000 screenshots from the product across all four platforms, and a multitude of devices, types, and sizes. We audited all screens and noted bugs with the UI System team.

The final step before launch was to run a business metric based a/b experiment to ensure our code changes and the font itself wouldn’t disrupt the product. We ran the experiment with over 2 million product users and didn’t encounter any significant issues or negative effects on business metrics.

Going Live

After 18 months of creating, refining, testing, and integrating, we flipped the switch and released Airbnb Cereal across our brand and product. The process taught us a lot about the ins and outs of creating a custom typeface, as well as the challenges and success that come with it. And this launch is the starting point, as we intend to keep iterating and adding features.

As a global company, we’re excited to better represent our diverse community by continuing to develop our type across all languages. It’s not a fast or light endeavor, but it does feel rewarding to create something unique to us that will improve how the global community experiences our product and brand. We look forward to seeing how Airbnb Cereal will grow with us over time.

See it live:

Check out this interactive type specimen site we created for Airbnb Cereal. It also includes a type tester so you can try it ourself at airbnb.design/cereal