2/12/2020 The type system - Material Design

DesignComponentsDevelopResources



The type system

Use typography to present your design
and content as clearly and efficiently as
possible.

Type Scale

The Material Design type scale includes a range of

contrasting styles that support the needs of your product
and its content.

The type scale is a combination of 13 styles that are

supported by the type system. It contains reusable
categories of text, each with an intended application and
meaning.

https://material.io/design/typography/the-type-system.html#type-scale 1/13
2/12/2020 The type system - Material Design

DesignComponentsDevelopResources



The Material Design type scale. (Letter spacing values are

compatible with Sketch.)

Roboto
Google fonts

Related Link 

Download
Access the type scale using type styles in Sketch.

Material Design Type scale

0.10 MB (.sketch)

Font size units 

The following units are used to express font size on

Android, iOS, and the web.

Platform Android iOS Web

Font size unit sp pt rem

https://material.io/design/typography/the-type-system.html#type-scale 2/13
2/12/2020 The type system - Material Design

Conversion ratio 1.0 1.0 0.0625

DesignComponentsDevelopResources


Example conversions

Android iOS Web

10sp 10pt 0.625rem

12sp 12pt 0.75rem

24sp 24pt 1.5rem

60sp 60pt 3.75rem

Web browsers calculate the REM (the root em size) based

on the root element size. The default for modern web
browsers is 16px, so the conversion is SP_SIZE/16 = rem.

Letter spacing units 

The following units are for spacing letters in a UI.

Platform Android iOS Web

Letter
spacing em pt rem
unit

(Tracking
(Tracking from from Sketch
Conversion Sketch / font / font size
1.0
ratio size in sp) = in px) =
letter spacing letter
spacing

Letter spacing examples

https://material.io/design/typography/the-type-system.html#type-scale 3/13
2/12/2020 The type system - Material Design

Android iOS DesignComponentsDevelopResources

Web


(.2 tracking / 16sp (.2 tracking / 16px
-0.1
font size) = 0.0125 font size) = 0.0125
pt
em rem

Applying the type

scale

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.

1. Scale categories

2. Actual values

Headlines 
https://material.io/design/typography/the-type-system.html#type-scale 4/13
2/12/2020 The type system - Material Design

In the type scale, headlines span from a range of 1

DesignComponentsDevelopResources
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.

A display style is used for Headline 2.

Expressive fonts
Google Fonts

Related Link 

https://material.io/design/typography/the-type-system.html#type-scale 5/13
2/12/2020 The type system - Material Design

DesignComponentsDevelopResources

A script style is used for Headline 3. 

Serif or sans serif typefaces work well for headlines,

especially at smaller sizes.

A sans serif is used for Headline 6.

Subtitles 

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.

A sans serif typeface is used for Subtitle 1.

https://material.io/design/typography/the-type-system.html#type-scale 6/13
2/12/2020 The type system - Material Design

Sans Serif fonts DesignComponentsDevelopResources


Google Fonts 
Related Link 

For subtitles, use caution when using expressive fonts,

including display, handwritten, and script styles.

Caution.
Use caution when using expressive fonts for subtitles.

Body 

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.

https://material.io/design/typography/the-type-system.html#type-scale 7/13
2/12/2020 The type system - Material Design

A serif typeface is used for Body 1.

DesignComponentsDevelopResources



Serif fonts
Google Fonts

Related Link 

A sans serif typeface is used for Body 2.

Don’t use expressive fonts, including display, handwritten,

and script styles for body copy.

Don’t.
Don’t use expressive fonts for body text.

https://material.io/design/typography/the-type-system.html#type-scale 8/13
2/12/2020 The type system - Material Design

DesignComponentsDevelopResources


Caption and overline 

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.

A serif typeface being used for a caption.

Serif fonts
Google Fonts

Related Link 

A sans serif typeface being used for an overline.

Don’t use expressive fonts, including display, handwritten,

and script styles for caption or overline.
https://material.io/design/typography/the-type-system.html#type-scale 9/13
2/12/2020 The type system - Material Design

DesignComponentsDevelopResources



Don’t.
Don’t use expressive fonts for an overline.

Button 

Button text is a call to action used 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.

An all caps sans serif typeface being used for a button.

San Serif fonts

Google Fonts

Related Link 

https://material.io/design/typography/the-type-system.html#type-scale 10/13
2/12/2020 The type system - Material Design

Button text can be sentence case, sans serif, or serif.

DesignComponentsDevelopResources



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

Don’t use expressive fonts as button text, including

display, handwritten, and script styles.

Don’t.
Don’t use a display style for button text.

Up next

https://material.io/design/typography/the-type-system.html#type-scale 11/13
2/12/2020 The type system - Material Design

DesignComponentsDevelopResources



Material is an adaptable system of guidelines, components, and tools that support the best practices of user
https://material.io/design/typography/the-type-system.html#type-scale 12/13
2/12/2020 The type system - Material Design

interface design. Backed by open-source code, Material streamlines collaboration between designers and
developers, and helps teams quickly build beautiful products. DesignComponentsDevelopResources


GitHub / Twitter / YouTube / Subscribe for updates

Privacy Policy
Terms of Service
Feedback

https://material.io/design/typography/the-type-system.html#type-scale 13/13