Image for post
Image for post

Working Type

How we introduced Airbnb Cereal to our UI

Karri Saarinen
Dec 18, 2018 · 9 min read

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.

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.

Image for post
Image for post
Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

“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.

Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post

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.

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

Image for post
Image for post

Airbnb Design

We’re a cross-disciplinary group of designers, researchers…

Karri Saarinen

Written by

Cofounder, CEO Linear. Past: Principal Designer & co-creator design systems Airbnb. Founding design Coinbase . Cofounded Kippt, Rails Girls. YC Alumn

Airbnb Design

We’re a cross-disciplinary group of designers, researchers, writers, filmmakers, architects, photographers and more. This collection takes you behind the scenes of our work. Visit Airbnb.design for more information about our design culture, inspiration, work and community events.

Karri Saarinen

Written by

Cofounder, CEO Linear. Past: Principal Designer & co-creator design systems Airbnb. Founding design Coinbase . Cofounded Kippt, Rails Girls. YC Alumn

Airbnb Design

We’re a cross-disciplinary group of designers, researchers, writers, filmmakers, architects, photographers and more. This collection takes you behind the scenes of our work. Visit Airbnb.design for more information about our design culture, inspiration, work and community events.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store