Simple – Typography
Key point: Control the size of text using fragment, block and inline labels. These values are based upon the Material Design type specification.

The default value for contents is 1rem (16px). 

In some cases, use headings to increase the text size as long as the HTML semantics are followed.

From large to small (s-display-4 being the largest and s-caption the smallest size).

Text size

Inline labels

  •  Inline label: s-display-4
  •  Inline label: s-display-3
  •  Inline label: s-display-2
  •  Inline label: s-display-1
  •  Inline label: s-headline
  •  Inline label: s-body-1
  •  Inline label: s-body-2
  •  Inline label: s-caption

Block labels

  • Block label: s-display-4
  • Block label: s-display-3
  • Block label: s-display-2
  • Block label: s-display-1
  • Block label: s-headline
  • Block label: s-body-1
  • Block label: s-body-2
  • Block label: s-caption

Fragment labels

You can add these custom labels to a fragment (headings in the fragment are excepted). Click the sign at the bottom of the fragment label options.

  • Fragment label: s-display-4
  • Fragment label: s-display-3
  • Fragment label: s-display-2
  • Fragment label: s-display-1
  • Fragment label: s-headline
  • Fragment label: s-body-1
  • Fragment label: s-body-2
  • Fragment label: s-caption

See in action

View typography demo.