Airbnb Cereal typeface (airbnb.design)
almost 5 years ago from ChrisArchitec t, webdev, ops & solver of things
almost 5 years ago from ChrisArchitec t, webdev, ops & solver of things
Why was it necessary for Airbnb to create a new typeface?
The real reason... licensing costs on Circular is friggin' ridiculous.
Source: KOD & FORM
Yikes– same foundry too
Boy this needs to be shut down… I can see a handful of little differences in this small set of characters alone — what's the point of this? Trolling type designers?
Designers are meant to care about little details; the fact that this picked up any traction on Twitter is really disappointing…
One of the people involved in the project and answering questions in the article. Happy to answer more questions here!
Also wrote the case study on integrating it to our UI: https://airbnb.design/working-type/
Why is it so beautiful Karri? lol, but seriously great job. I rarely don't have a negative thing to say about a typeface. I love that it's still a geometric font like Circular, but way more friendly and human. Right up my alley!
Thank you Tony!
We're currently looking at licensing a big font foundry typeface. Could you comment on the purported reason more companies are creating their own typeface being due to exorbitant per seat licensing costs?
EDIT: Oh, and great work of course. That goes without saying.
It has to be a factor. We got an unlimited license since we needed to cover over 12,000 employees, for 3 font weights, and it was around 50k USD (same type foundry that airbnb worked with).
Depending what you mean by per seat pricing a.) number of machines that have the font installed b) number of users viewing the font through your app/site. In our case, we would need both, but the issue mostly comes from b), since our userbase is so large. We cannot follow the regular pricing, but need to have a custom contract with a foundry. Needless to say that is not exactly free, so the pricing definitely plays in to the consideration do you buy(create) vs rent.
Creating your own typeface will also give you other benefits, such as you can exactly get what you want, and you modify or make changes if you want to.
Hi Karri, did I see that the x-height is a variable as well? If so, I can imagine it would be incredibly useful and for some reason didn’t even conceive that it would be an option for variable typefaces.
Its actually not. I think we might have mentioned about that we increased the x-height which generally improves (to a point) the legibility. I'm not sure if its possible with variable fonts, or if its actually something you would want to be variable.
Well I could certainly imagine a lower x-height being cool and interesting for a large headline, and then just cranking it up for body text.
It's possible, sure. You might rather want sets or an axis of optical sizes that (also) adjust the x-height, but additionally influence other legibility factors for small, and decorative features for big, sizes.
How do you plan to handle the challenges involved in bringing Cereal to the web when it comes to non Latin character sets? As of now CJK webfonts arent widely used because of the amount of drawbacks they have such as performance and incomplete character sets. I think custom typefaces are great but the rest of the wprld that uses non latin character sets almost always gets left behind.
It's unfortunate that CJK and many other other script types don't get that much custom typography love, especially on web because of the technical/load time challenges (a single Chinese font file can be close 10mb which causes problems for apps and specially for websites). We would hope to find some solution this. One example was Google's optimized delivery system for Korean fonts that was based on the natural usage of the language whew more common characters would be downloaded first.
We do have plans to bring Cereal to other script types too, but it will take some time.
Thanks for coming on here and answering questions! I have a few questions for you, and would like to preface by saying that I'm not trying to attack the integrity of this work, I am just not that knowledgeable about this subject.
1.) What about Circular was not right for Airbnb? In my mind, I imagine licensing cost being the biggest issue, but didn't see that mentioned in the article.
2.) What characteristics make Cereal more appropriate for both print and screen over Circular?
3.) Is there any concern that a raised x-height might lose rhythm among some words, making them less scannable? You mentioned it improves legibility - how did you measure that?
4.) You've mentioned that there are seven non-latin languages supported, which I think is a fantastic start. Is the plan to roll out Cereal to supported languages, and slowly remove existing typefaces over the span of a few years until all languages are available in Cereal?
Thanks in advance for any time you spend answering these questions for me.
Hi, Karri! Really well balanced with great readability. Two thumbs up! However... the bold headers in the articles does not seem to display correctly in Chrome and Firefox (OS X) – Safari looks good. Could be an issue with the definition of the fontface. font-weight: 600 works, but 700 (as in the CSS) displays Helvetica for me.
I hope you also appreciate to hear some feedback in addition to questions.
...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.
This just sounds so pretentious and is reasoning that is hard to follow looking at the mark and the typeface. That a explicitly is a construction that requires lifting the "pen", and the bowled characters have a very constructed and vertically mirrored bowl, something that also is absolutely absent from organically drawing the shape.
As a typographer, the image in the article explaining typographic terms is just sloppy all over: x-height is marked confusingly, stroke contrast just points at the black of a glyph without any explanation or distinct location, aperture and cap height markings are imprecise and the red background (supposedly the x-height) is top aligned to stems, like n, but bottom you aligned it to the overshoots of round letters instead of the actual baseline, consequently sending the T and other character flying.
What was your reasoning for choosing a geometric typeface for a product that is, as the article correctly mentions, mostly UI — where the wide horizontal space taken by all round characters takes up a lot of space?
All in all the typeface is nice and a prototypical geometric that is very obviously hot right now, but the type direction lacks originality, character and distinction — which a brand typeface should foster, no?
implementation behind the scenes https://airbnb.design/working-type/
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now