So you’re designing an app in the Material Design style and want to know (roughly) what font size to use? Great. You’ve come to the right place.
All font sizes listed below refer to Roboto. Other fonts may appear bigger or smaller, even using the same size. The units I use in this section are “sp”. It’s pronounced “sips”, and it stands for scaleable pixels. But, as a designer, all you need to know is it’s the number you type into the font size box when you’re designing (for the nitty-gritty on “px”, “pt”, “sp”, and “dp”, see here).
Android Mobile Typography Guidelines
Here’s a quick summary of styles. See below for visual reference and more in-depth guidelines.
|List titles||14sp||Show importance using medium weight|
List item titles,
Important text snippets
|14sp||Use lighter color to show lowered importance|
Now let’s go through element-by-element with (a) visuals and (b) notes on how Google deftly wields these font styles. No joke, folks. I hope you read this section and think “Whoever came up with the Material Design font sizes is one smart cookie” – I sure think so, anyhow.
Titles on mobile Material Design apps are 20sp.
The body text size in Material Design is 14sp. You should think of this as the normal font size, and basically everything else a variation on it.
For instance, while 14sp is the default text size when the text can be quite long, when there’s only a small modal with a bit of text, it’s 16sp!
Notice that it’s a bit lighter to make up for this size boost. This will be a recurring theme in Material Design styles.
Many simple lists will show each item at 16sp.
In fact, this is the default “list item” size in Material Design.
This was a surprise to me – after all, a list of simple items feels a lot like body text. Why would it be bigger? I think of it like this: the importance per word is much higher than body text. Therefore, it should be larger.
Also notice that having larger list item names means you can have a clear contrast between the list item title and a secondary description, which is both smaller and lighter.
But denser lists, like those on sidebars, are 14sp – and one weight bolder to compensate (this is a bit like the larger modal font size also being lighter to compensate.
Let’s look at buttons and inputs now.
The only surprise here, in my opinion, is that text inputs are size 16sp. Why not the default body size? Because the importance per word is higher than default body text, and unlike the button (which does have 14sp text), it’s weird to have a textbox with medium or bold-weight text.
For more, check out the Material Design typography guidelines by Google.
Desktop Material Design Typography Guidelines
Even though all examples I’ve shown above are from mobile apps, the font sizes vary only a little on tablet and desktop apps. Here is a summary of the typographic changes, again, as provided by Google:
|Style||Mobile/tablet Properties||Desktop Properties|
List item title
|Regular 16sp||Regular 15sp|
|Body||Regular 14sp||Regular 13sp|
|Medium 14sp||Medium 13sp|
If you’re designing a Material app for large screens, it also might be worth reviewing the desktop web section of the next chapter.
One Final Note 😎
If this is your first time here, you might also be interested in:
- Learn UI Design, my full-length online video course on user interface design
- The Design Newsletter, a 20,000+ person newsletter with original design articles aimed at giving you tactical advice to improve your UX/UI skills.
Some people have some really nice stuff to say about the newsletter.
A joy to read! Please post me when you will have published a novel. Your writing style is marvelous!
I just wanted to say that this was a GREAT and really helpful email, I learned so much and got so many ideas I hadn't considered before. I read a ton of UX related articles daily but this was something different and new that I can apply to my work right away. Thanks a lot!
UX/Product Designer, Freelance
The Design Newsletter
Over 20,000 subscribed.
No spam. Unsubscribe anytime.