Designing a Material Theme: Typography
When reading a book, you aren’t likely to stop and think, “what an interesting font this book is using.” Well-executed typography can be invisible, serving as the scaffolding for communicating ideas, actions, instructions, stories, and feelings. But that doesn’t mean that the typography in your app should be purely utilitarian. Material Design’s typography system provides a structure that allows text styles in your app to communicate clearly and effectively, with enough room to express a unique brand, identity, and tone.
Typography in Material
Material Design’s type system is centered on the type scale. A type scale is a selection of font styles that can be reused across an app, providing enough stylistic flexibility to accommodate a range of purposes while remaining consistent and recognizable.
The Material type scale includes a series of reusable styles from headlines to captions, as well as specialized styles for components like buttons.
When customizing a type style, the change cascades down to all the components that use that style. Changing the “button” style, for example, will inform the typography on all components that use the button typography style – like dialogs, extended FABs, and tab labels.
Other styles are more flexible – for example, the type scale includes multiple headline styles to accommodate a rich information hierarchy and a range of options for presenting headline content. To see this in action, take a look at the Material Study Fortnightly, an example newspaper app built around real product and design constraints.
Fortnightly's front page mostly uses the app’s H4 headline style. The smaller headline style works there because there are many article headlines to parse, so space and attention are at a premium. But on the single article page above, for example, we see a more expressive H3 style. It’s larger, bolder, and more opinionated than its front page counterpart because the article has space enough for more vivid expression.
Having multiple body styles can come in handy when presenting content at similar sizes but with different purposes or meanings. In Fortnightly, the Body 1 style is used for article text, while Body 2 is used for content that supplements the text of the article with additional information.
You might notice that Fortnightly uses a combination of two fonts across its type scale. Libre Franklin and Merriweather are present across Headline and Body styles. While the baseline type scale is based on Roboto, adding a second typeface can create additional levels of distinction. Pairing fonts this way can help users understand what type of content they’re seeing across an app and segment that information more easily.
In the example above, the text “US – Poverty” is set in Libre Franklin, making it distinct from the Merriweather text surrounding it. This distinction helps the user recognize that it is secondary to article content and navigational in nature, rather than a caption or part of the headline.
Creating your type theme
Starting from scratch
Without established brand typography for your app, you might be starting your type theme from scratch. Similar to creating your color theme from scratch, a good starting point is to think about the nature and tone of your app. Specifically, think about the content the app is presenting and how it contributes to the app’s personality and voice. In the other Material Studies, you can see a variety of approaches to typography based on content and personality.
Is your app task-based like the email app Reply, aiming to get users through their inbox as efficiently as possible? Consider a type scale that optimizes for readable typefaces, using multiple styles from a single type family to present content consistently without distraction.
Does your app have an editorial opinion to express, like the news app Fortnightly? Consider pairing highly readable typefaces with more expressive typefaces for key moments and content in the app.
If your app has very strong visual expression through color and imagery, like the educational app Owl, consider using a readable typeface that maintains some playfulness. Owl uses heavier weights of Rubik across the type scale, mimicking shapes from its logo while remaining simple and predictable.
If your app’s voice and content seek to convey elegance and modernity, like the shopping app Shrine, consider a type scale that focuses primarily on lighter weights at larger sizes, while ensuring readability for body, caption, and subtitle styles.
When looking for typefaces to use in your theme, consider starting with Google Fonts. The catalog has thousands of free fonts to use, and developers can easily pull from the catalog in code.
Type pairing techniques
If you’ve found a typeface that works for your app, but want to expand your type scale with another typeface, one technique for pairing fonts is to think of them as existing on a color wheel.
Try finding a typeface that has characteristics adjacent or related to your first typeface (for instance similar terminal shapes or letter forms), or a typeface that contrasts those characteristics (for instance pairing serif and sans serif fonts, or a human, expressive font with something more rationalized).
Create your type scale
If you’re using Google Fonts, you can quickly create a type scale with Material using the type tool, embedded below. Just select your chosen typefaces in the panel on the right. (You can type in the name of the typeface to autocomplete.)
If you already have brand typefaces
If you already have brand typefaces, then you may already have a branded type scale. If this is the case, compare your existing type scale to the typographic styles used in Material Design, and select styles from your type scale that can map to the stylistic slots available.
If you have branded typography but don’t have a type scale yet, explore the styles available in your brand typefaces using the techniques outlined above to create a type scale that customizes the baseline scale with your chosen styles.
Visualizing your theme
Once you have a type scale, it’s time to visualize your new type theme in a design environment. To start, make a copy of our Baseline Design Kit for Figma. On the Material Theme page within the kit, you’ll see a frame called Typography which gives a comprehensive look at your type scale.
On the right side of the screen, you’ll see a panel that contains global styles matching the styles in your theme under Text Styles. To start plugging new text styles into your theme, click the edit icon next to each style. Refer back to your type scale in the type tool on material.io and copy each value in the tool into the appropriate styles in Figma.
What’s next?
Once your styles are added to Figma, you’ll see them propagate through every component on the Stickersheet page. From there, you can start applying your new styles to content in your app, experimenting with the range of styles afforded by the type scale to see what works best. You can learn more about techniques for setting text in your app in our typography guidance.