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 thirteen styles that are supported by the type system. It contains reusable categories of text, each with an intended application and meaning.
Type scale generator
Powered by Google Fonts, the type scale generator is a tool for creating type scales and corresponding code. Any font you choose is automatically resized...
Powered by
Select a category in the type scale to view the font’s details. Adjust your font choice through the menus on the right.
Example type scale
This example type scale uses the Roboto typeface for all headlines, subtitles, body, and captions, creating a cohesive typography experience. Hierarchy is communicated through differences...
This example type scale uses the Roboto typeface for all headlines, subtitles, body, and captions, creating a cohesive typography experience. Hierarchy is communicated through differences in font weight (Light, Medium, Regular), size, letter spacing, and case.
Download this Roboto type scale using type styles in Sketch.
Font size units
The following units are used to express font size on Android, iOS, and the web...
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 |
Conversion ratio | 1.0 | 1.0 | 0.0625 |
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 unit em pt rem Conversion ratio (Tracking from Sketch...
The following units are for spacing letters in a UI.
Platform | Android | iOS | Web |
---|---|---|---|
Letter spacing unit |
em | pt | rem |
Conversion ratio |
(Tracking from Sketch / font size in sp) = letter spacing |
1.0 | (Tracking from Sketch / font size in px) = letter spacing |
Letter spacing examples
Android | iOS | Web |
---|---|---|
(.2 tracking / 16sp font size) = 0.0125 em | -0.1 pt | (.2 tracking / 16px font size) = 0.0125 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.
- Scale categories
- Actual values
Headlines
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...
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.
Serif or sans serif typefaces work well for headlines, especially at smaller sizes.
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 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.
For subtitles, use caution when using expressive fonts, including display, handwritten, and script styles.
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...
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.
Don’t use expressive fonts, including display, handwritten, and script styles for body copy.
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...
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.
Don’t use expressive fonts, including display, handwritten, and script styles for caption or overline.
Button
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 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.
Button text can be sentence case, sans serif, or serif.
Don’t use expressive fonts as button text, including display, handwritten, and script styles.