AngularJS Material provides typography CSS classes you can use to create visual consistency across your application.
Material Design Typography Specification
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.
When Roboto isn't loaded, then the typography will fallback to the following fonts:
Helvetica Neuesans-serifTo preserve semantic structures, you should style the <h1> - <h6> heading tags with the styling classes shown below:
.md-display-4
.md-display-3
.md-display-2
.md-display-1
.md-headline
.md-title
.md-subhead
10px for easy rem units (1.2rem = 12px). Body font size is 14px. sp = scalable pixels.
.md-body-1Regular 14px
.md-body-2
Medium 14px
.md-button
.md-captionBody copy with medium weight.
Regular body copy with small text.
Caption