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

Reference the Material Design specification for Typography.

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

Headline

Headline

Headline
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
    Medium 14px
  • .md-caption
    Regular 12px

Examples

Body copy with medium weight.

Button

Regular body copy with small text.

Caption