A tool for creating type scales and corresponding code. Any font you choose is automatically resized and optimized based on Material typography guidance for readability.



Type scale generator

The type scale generator can also  auto generate the code

Type scale generator-code

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.

Example type scale

The following units are used to express font size on Android, iOS, and the web.

Font size units

Letter spacing units

Letter spacing units-examples

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.

Font size units-conversion

The Material Design type scale includes a range of contrasting styles that support the needs of your product and its content.


University of Michigan - Ann Arbor

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

The Type System

Material Design Documentation

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.

Learn Before

Related

Learn After