Don’t use expressive fonts as button text, including display, handwritten, and script styles.

Display style for button text

Use caution when having button text appear distinct from non-interactive text, such as this upper lower, sans serif typeface on a button.


Sentence case, sans serif, or serif for button text


All caps sans serif for button text

Button text is a call to action used by different types of buttons (such as text, outlined and contained buttons) and in tabs, dialogs, and cards.

Button text is typically an all caps sans serif.

University of Michigan - Ann Arbor

The type scale appears as text in components and the overall layout. Type attributes can use custom values for the typeface, font, case, size, and letter spacing.

Applying the type scale

Material Design Documentation

In the type scale, headlines span from a range of 1 through 6. Headlines are the largest text on the screen, reserved for short, important text or numerals.

For headlines, you can choose an expressive font, such as a display, handwritten, or script style. These unconventional font designs have details and intricacy that help attract the eye.

Headlines

Subtitles are smaller than headlines. They are typically reserved for medium-emphasis text that is shorter in length. Serif or sans serif typefaces work well for subtitles.

Subtitles

Body text comes in ranges 1-2, and it’s typically used for long-form writing as it works well for small text sizes. For longer sections of text, a serif or sans serif typeface is recommended.

Body

Caption and overline text (text with a line above it) are the smallest font sizes. They are used sparingly to annotate imagery or to introduce a headline.

Learn Before

Related

Learn After