CSS - Typography

AngularJS Material provides typography CSS classes you can use to create visual consistency across your application.

Material Design Typography Specification

General Typography

AngularJS Material uses the Roboto font for all of its components.

The Roboto font will be not automatically loaded by AngularJS Material itself. The developer is responsible for loading all fonts used in their application. Shown below is a sample link markup used to load the Roboto font from a CDN. 

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

Notes

When Roboto isn't loaded, then the typography will fallback to the following fonts:

  • - Helvetica Neue
  • - sans-serif

Heading Styles

To preserve semantic structures, you should style the <h1> - <h6> heading tags with the styling classes shown below:

Selectors

Output

  • .md-display-4
    Light 112px
  • .md-display-3
    Regular 56px
  • .md-display-2
    Regular 45px
  • .md-display-1
    Regular 34px
  • .md-headline
    Regular 24px
  • .md-title
    Medium 20px
  • .md-subhead
    Regular 16px

Example
Note: Base font size is 10px for easy rem units (1.2rem = 12px). Body font size is 14px. sp = scalable pixels.

Body Copy

Selectors

Output

  • .md-body-1

    Regular 14px

  • .md-body-2

    Medium 14px

  • .md-button
  • .md-caption
    Regular 12px

Examples