Material Design's text sizes and styles were developed to balance content density and reading comfort under typical usage conditions.

Table of Contents

• Resources
• Basic Usage
• Typography Variants

Resources

• Demo: Typography
• Material Design Guidelines: Typography
• MDC Web: Typography
• Sass Mixins (MDC Web)

Basic Usage

For typography to work best, it is necessary to set the font to Roboto. This is archieved by the mdc-typography class, and we recommend to set it globally to the root of your page.

import Material.Typography as Typography


Html.h1 [ Typography.headline1 ] [ text "Headline" ]

Typography Variants

Typography elements come in the following thirteen variants.