The only surprise here, in my opinion, is that text inputs are size 16sp. Therefore, it should be larger.Īlso 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.īut 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. Why would it be bigger? I think of it like this: the importance per word is much higher than body text. This was a surprise to me – after all, a list of simple items feels a lot like body text. In fact, this is the default “list item” size in Material Design. Many simple lists will show each item at 16sp. This will be a recurring theme in Material Design styles. Notice that it’s a bit lighter to make up for this size boost. You should think of this as the normal font size, and basically everything else a variation on it.įor 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! The body text size in Material Design is 14sp. Titles on mobile Material Design apps are 20sp. 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.

Now let’s go through element-by-element with (a) visuals and (b) notes on how Google deftly wields these font styles. Use lighter color to show lowered importance See below for visual reference and more in-depth guidelines. 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). It’s pronounced “sips”, and it stands for scaleable pixels. The units I use in this section are “sp”. Other fonts may appear bigger or smaller, even using the same size.

You’ve come to the right place.Īll font sizes listed below refer to Roboto. So you’re designing an app in the Material Design style and want to know (roughly) what font size to use? Great. Quickly navigate to other chapters: Intro You’re reading Font Sizes in UI Design: The Complete Guide.

Font size android messages