Shared publicly  - 
 
A few words about words

Wow.

Thanks for the response! Guess I’m going to be writing more... :-)

Sorry I can’t respond to each and every question posted, and sorry for using a bit too much typographic jargon in my first post. I think if I can quickly explain some of the lingo it should answer most of the questions. So without further ado, here’s a quick decoder ring for the words we use to talk about type.

Typefaces comes in all different kinds, and the ways a single letter can be rendered and still be legible is astounding. However the most common type used for Western languages can be broadly categorized as script, serif, and sans-serif.

Script is easy, the letters look like they were handwritten and can range from sloppy schoolbook to careful calligraphy. Script faces are an incredibly fertile ground for creative typography.

Serif refers to the little points at the ends of letters. If you look at the Washington side of a US one dollar bill, you can see that the words “The United States of America” all have little points at the ends of the characters. Typefaces where the letters have points or strokes at the ends of the major parts of the letters are called serif fonts. Serif letterforms are much less varied than scripts, but look at the four different versions just on the one dollar bill!

Sans-serif is French for “no-little-pointy-bits-at-the-ends-of-your-letters” (actually without-serifs). The words “This note is legal tender...” on the dollar bill are in a sans-serif face. Roboto is a sans-serif for three reasons: Sans-serifs work better on screens when you do have to go very very small; sans-serifs are perceived as having less of specific style so they work in a wide variety of contexts; sans-serifs are cleaner and simpler so they match the design philosophy of Ice Cream Sandwich.

You might think that there’s only so many different ways to design san-serif fonts. After all if you take a capital letter “L” that is only made of two strokes with no pointy bits what are you going to do? You can’t move the bottom horizontal stroke to the top because then it would become a letter “T”! However even in a capital L there is terrific room for expression in the proportions. The relation between the horizontal stroke and the vertical one and their corresponding thickness make for a wide range of letter forms. When you consider more complex letters like the lowercase “a” you can quickly appreciate the room for expression.

In fact there is so much room for expression that among sans-serif fonts there are also three major groups which share similar characteristics and design philosophies: Grotesk (and Neo-Grotesk), Humanist, and Geometric. Now, there are a lot of different opinions about how to exactly classify any fonts, including sans-serifs, so use the following just as a basic guideline.

Geometric sans-serifs are the easiest to understand. They tend to be uncompromising, constructing their letter forms out of strict geometric primitives: simples lines and circles or partial circles. They avoid much stroke variation, oval curves, or flourishes. They are very pure, sometimes at the cost of overall legibility. In the case of Roboto, our explorations into a geometric skeleton found that purity to be at odds with our desire to closely track to the metrics of our legacy UI.

Humanist san-serifs can be thought of as the polar opposite of geometric. The letters in a humanist font tend to follow the shapes created by the human hand holding a pen nib. These are the typefaces that have the most character, the most variation, and the most expression, while avoiding the ‘superfluous’ decoration of adding serifs. Humanist fonts are often the most legible sans-serifs, but for Ice Cream Sandwich we found that the variety and complexity of a humanist font was at odds with our open layouts.

Grotesk and neo-grotesk san-serifs make up most san-serif typefaces. Grotesk typefaces are the earliest of san-serifs, first designed in the 19th century. The name grotesk actually comes from a criticism by other 19th century type designers - they were basically calling these new san-serif letters “grotesque” as an insult, because sans-serifs mixed and matched styles in a way they thought was so crude and primitive only a caveman could have drawn them! Thankfully type designers are thick skinned; they persisted and san-serifs quickly caught on.

Neo-grotesk is French for “we-made-it-better” (actually new-grotesk) and refers to designs that keep basic grotesk proportions but take a more modern approach to the details. There are minor stylistic convention differences between the two; lowercase “g”s for example tend to be a closed loop in the older style and an open hook in the newer; but for the most part all grotesks represent a kind of middle ground between expressiveness and geometric purity. That’s exactly what we were going for with Roboto.

Now you can understand that when I say, “Roboto is a straight sided grotesk” that I’m drilling down into a really small sub-classification, of a sub-classification.

But wait, there’s more...

Within these stylistic families there is still room for some significant choices. Sometimes a typeface is basically an overhaul of an existing typeface re-made for minor stylistic or technical improvements, while esentially leaving all letterforms and proportions the same, like Helvetica, Arial or Helvetica-Neue. More often typefaces are inspired by others, and represent either subtle or dramatic refinements of a particular set of values. A great example of this kind of subtle evolution is Univers, Frutiger, Avenir and Prelude (that last one’s for you webOS fans), a more dramatic evolution is the famous lineage of Akzidenz-Grotesk to Helvetica.

Roboto is a more dramatic and distinctive grotesk. It merges a lineage of grotesk proportions with a desire to have humanist legibility and a modern pure geometric character. In the same way that the original grotesks challenged the conventions of their day, Roboto takes some stylistic risks to achieve this mix of attributes.

Roboto has more regularity (for overall character) than traditional humanist san-serifs, but a more syncopated rhythm and lowercase letter variation than a traditional grotesk (for legibility). Roboto’s ‘racetrack’ shaped lower case letters (you can see this in the “o” which is a half arc at the top with two straight strokes on the sides and a half arc at the bottom) are uncommon among grotesks and geometric sans-serifs, but they give the impression of a more structured geometric purity.

We had unique needs, and I think Roboto is worthy of them. I hope when you get Ice Cream Sandwich in your hands you’ll find Android just a little easier to read, and a bit more beautiful.

Now after that lecture you should totally be prepared for the next time you’re cornered by a type designer at a cocktail party!

So... what should I talk about next?
266
117
Kyle O'Brien's profile photoSergei Ozerov's profile photoHugh McVea's profile photoAndreas Grunewald's profile photo
38 comments
 
Beautiful :) +Matias Duarte i think you should discuss how you arrived at the general ui consistencies present in ics, like the magazine layout and general flow of the ui itself, and how you guys arrived at the final direction :)
 
Can't wait to see roboto live
 
I'm also interested in the color choices in ICS.
 
Good post Matias. As for what to write next: It's one thing to make a new font that includes regular latin glyphs and english miscellany, a bit more to include european and cyrillic, but given that the context you're working in - Android is pan-linual after all - how do you address mixing the font with CJK or misc asian/middle eastern i18ns? Filling up the entire unicode space is a bit of a mountain to climb, and borrowing other fonts to fill in the gaps can lead to jarring stylistic mismatches.
 
As a UI designer, what do you do day to day?
 
great post again, Matias! Next can we talk about the Android Market UI itself?
 
Really enjoyed that. I will indeed be prepared should ever I meet a type face designer.

I would like to hear about the design choices in the muli tasking of ICS :-)
 
I vote for the color pattern in ICS and the rectangular forms that are replacing the rounded ones.
Thanks a lot for you work and sharing it :)
 
3 Requests sir :

1. Could we get a live video hosted at Google of your sit down with The Verge team tonight?
2. Could Mr. +Anand Shimpi attend to ask you the more technical questions? Or have his questions asked by +The Verge team?
3. Post here more often since u haven't posted on twitter in ages.

Thanks in advance

PS: I was about to print out both of your posts on ICS's new typeface when I noticed there's no print post button. I'll select all, copy, paste and print of course but just thought I mention it.
 
Thanks Matias for the excellent post. I myself have spent a lot of time with picking fonts to make certain sites express themselves better, and I do know, how a beautiful font can make a web site be from just a website, to a work of art.

As for what's next? I would like to know the thought process of the "metro-uiesque" style of the new Market that's been pushed to the latest Android phones and tablets. Especially on the tablet front I feel like the design choices are a regression to that of vanilla Honeycomb. What inspired the new layout of the market space?

Oh and I like the default clock font of Honeycomb more than ICS. In ICS the lock screen clock seems to be a bit fat..
 
Nice post. Very interesting. As for what to write next:What are the techniques/tecnologies/tools used to design a font? People usually underestimates the complexity of font design.
 
Ahh another great post Matias. As for what next color choices and the magazine look would be very interesting. Choices for Contrasts, font size proportions for headlines versus smaller text, icons, and so on in Ice Cream Sandwich.
 
Could (or should) Roboto become the default font in Google Chrome?
 
Great post Sir. It was informative and interesting, a rare combination! You are great at explaining things.
I am really looking forward for ICS. However there is one point i would like you to address. It being the support for Hindi in Android post 2.3.3. I hope ICS will fix this issue. It would be great to see how Roboto metamorphosizes into Hindi script.
 
I was reading this in Roboto on my PC (thanks user styles). Great post :D
 
Love the font talk, but I'd love to hear the thoughts that went into color choices, ie why a blue theme instead of Android green?
 
I'd be interested in knowing how Roboto transfers over to other languages? Like Mandarin, when they have different characters?
Ian Hex
+
2
3
2
 
Good coverage if the basics of typography and type classification, quality read.

You're on recording as eschewing the trend of skeuomorphic UI design, as practised by Apple. It's a good move. I'm wondering, then, how you hope to get users feeling intimate and passionate about the UI of ICS. 
 
I'd like to know your approach/philosophy on how to make all the capabilities of advanced devices obvious and easy to use for novices without alienating power users.
 
Great! In the next post i'd like to know about user experience, the re-design of Android UI, it would be interesting.
 
Thanks Matias for all your outstanding work, ICS looks beautiful and elegant. Now all I need is my Galaxy Nexus! 
 
I think the color decisions on ICS would be a nice read too. Thanks for taking some time and sharing your work and what drives it
 
Wow, that's good stuff, Matias. Thanks for sharing this information. You're already one of the most interesting people on Google+.
 
Sorry folks, I was mistaken. No live stream from the Verge tonite. Look for it on their site in the next few days!
Tim KH
 
Wow that's a nice article, I've got Roboto now and I love it, can't wait till I get ICS on my phone.
 
Hola Matias, Roboto looks amazing or actually ICS looks phenomenal. Its the best design language out there. Recently completed a design project only with Roboto a mockup/redesign of the Android Music App, the font perform amazingly well.

The final result: http://fc01.deviantart.net/fs70/f/2011/319/b/7/android_music_app___ice_cream_sandwich_by_febernovo-d4g9dsp.jpg

Sent the project with an application to one of the current User Experience openings at Google Mountain View, working with you guys would be a great experience.
 
I loooove Roboto! Thank you Google, thank you Matias! Robot looks amazingly sharp even on older displays (like on my HTC HD2 800x480 screen). :D
 
Being a font whore, I didn't require a lecture to know the difference between Serif and Sans-Serifs, but I did learn a bit... Also now considering the Galaxy Nexus over i4S!
 
Awesome post. It's weird why I didn't notice this on my G+ feed. But I'd love to hear you talk about the color decision, besides the obvious Honeycomb Blue + Gingerbread Green = ICS Teal. lol. (PS: the Samsung intro video seemed to suggest that)
 
Thank you for taking the time to engage in a dialogue, Matias.

There is a typo in the post. "Than a traditional grotek (for legibility)" is missing a "s" in "grotek". "Are uncommon among groteks" is too.

Feel free to delete my comment after correcting.
Add a comment...