Material Design

Typography

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

MDC Typography is a foundational module that applies these styles to MDC Web components. The typographic styles in this module are derived from thirteen styles:

  • Headline 1
  • Headline 2
  • Headline 3
  • Headline 4
  • Headline 5
  • Headline 6
  • Subtitle 1
  • Subtitle 2
  • Body 1
  • Body 2
  • Caption
  • Button
  • Overline

Design & API Documentation

Installation

npm install @material/typography

Basic Usage

HTML Structure

We recommend using Roboto from Google Fonts:

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head>
<body class="mdc-typography">
  <h1 class="mdc-typography--headline1">Big header</h1>
</body>

Styles

@use "@material/typography/mdc-typography";

Style Customization

Typography styles

The typography styles (referred to as <STYLE> below) used in the type system:

Scale Description
headline1 The largest text on the screen, reserved for short, important text or numerals
headline2 Headline variant 2
headline3 Headline variant 3
headline4 Headline variant 4
headline5 Headline variant 5
headline6 Headline variant 6
subtitle1 Smaller than headline, reserved for medium-emphasis text that is shorter in length
subtitle2 Subtitle variant 2
body1 Used for long-form writing
body2 Body variant 2
caption Used sparingly to annotate imagery
button A call to action used by different types of buttons
overline Used sparingly to introduce a headline

CSS Classes

Some components have a set typographic style. For example, a raised MDC Card uses Body 1, Body 2, and Headline styles.

If you want to set the typographic style of an element, which is not a Material Design component, you can apply the following CSS classes.

CSS Class Description
mdc-typography Sets the font to Roboto
mdc-typography--<STYLE> Sets font properties as STYLE. Please see Typography styles section

For example, the headline1 style as a CSS class would be mdc-typography--headline1.

CSS Custom Properties

CSS Custom property Description
--mdc-typography-font-family The base font-family
--mdc-typography-<STYLE>-font-family The font-family for STYLE. Please see Typography styles section
--mdc-typography-<STYLE>-font-size The font-size for STYLE. Please see Typography styles section
--mdc-typography-<STYLE>-line-height The line-height for STYLE. Please see Typography styles section
--mdc-typography-<STYLE>-font-weight The font-weight for STYLE. Please see Typography styles section
--mdc-typography-<STYLE>-letter-spacing The letter-spacing for STYLE. Please see Typography styles section
--mdc-typography-<STYLE>-text-decoration The text-decoration for STYLE. Please see Typography styles section
--mdc-typography-<STYLE>-text-transform The text-transform for STYLE. Please see Typography styles section

Sass Variables and Mixins

Mixin Description
base Sets the font to Roboto
typography($style) Applies one of the typography styles, including setting the font to Roboto
smooth-font Adds antialiasing for typography
overflow-ellipsis Truncates overflow text to one line with an ellipsis
baseline($top, $bottom, $display) Sets a container’s baseline that text content will align to.
text-baseline($top, $bottom, $display) Sets the baseline of flow text content.

A note about overflow-ellipsis, overflow-ellipsis should only be used if the element is display: block or display: inline-block.

$style Values

These styles can be used as the $style argument for the mdc-typography mixin.

  • headline1
  • headline2
  • headline3
  • headline4
  • headline5
  • headline6
  • subtitle1
  • subtitle2
  • body1
  • body2
  • caption
  • button
  • overline

Overriding Styles

All styles can be overridden using CSS custom properties or Sass module/global variables.

When using Sass module variables, the module must be configured before any other @use statements with a variable named $styles-{style}. The variable should be assigned to a map that contains all the properties you want to override for a particular style.

When using Sass global variables, they must be defined before the component is imported by setting a global variable named $mdc-typography-styles-{style}.

Example: Overriding the button font-size and text-transform properties.

CSS custom properties:

html {
  --mdc-typography-button-font-size: 16px;
  --mdc-typography-button-text-transform: 16px;
}

Sass module variables:

@use "@material/typography" with (
  $styles-button: (
    font-size: 16px,
    text-transform: none,
  )
);

@use "@material/button";
@include button.core-styles;

Sass global variables:

$mdc-typography-styles-button: (
  font-size: 16px,
  text-transform: none,
);

@import "@material/button/mdc-button";

Example: Overriding the global font-family property.

CSS custom properties:

html {
  --mdc-typography-font-family: Arial, Helvetica, sans-serif;
}

Sass module variables:

@use "@material/typography" with (
  $font-family: unquote("Arial, Helvetica, sans-serif")
);

@use "@material/button";
@include button.core-styles;

Sass global variables:

$mdc-typography-font-family: unquote("Arial, Helvetica, sans-serif");

@import "@material/button/mdc-button";

Example: Overriding the font-family property for headline1 and font-family and font-size for headline2.

CSS custom properties:

html {
  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;
  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;
  --mdc-typography-headline2-font-size: 3.25rem;
}

Sass module variables:

@use "@material/typography" with (
  $styles-headline1: (
    $font-family: unquote("Arial, Helvetica, sans-serif")
  ),
  $styles-headline2: (
    $font-family: unquote("Arial, Helvetica, sans-serif"),
    $font-size: 3.25rem
  )
);

@use ...

Sass global variables:

$mdc-typography-styles-headline1: (
  font-family: unquote("Arial, Helvetica, sans-serif")
);
$mdc-typography-styles-headline2: (
  font-family: unquote("Arial, Helvetica, sans-serif"),
  font-size: 3.25rem
);

@import ...