The type scale generator can also  auto generate the code

University of Michigan - Ann Arbor

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


Type scale

Material Design Documentation

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

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.

Learn Before

Related