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.
0 kommentar(er)
