Here’s a quick summary of styles. See below for visual reference and more in-depth guidelines.
| ELEMENT | SIZING | NOTES |
|---|---|---|
| Page titles | 20sp | |
| Paragraph text | 14sp | |
| List titles | 14sp | Show importance using medium weight |
| List item titles,Important text snippets | 16sp | |
| Secondary text,Captions | 14sp | Use lighter color to show lowered importance |
| Buttons,Tabs | 14sp | Medium weight |
| Text inputs | 16sp |
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.