Angular Material Typography Guide
| REFERENCES |
|---|
| [1]: https://material.angular.io/guide/typography "Using Angular Material's Typography" |
What is typography?
Typography is a way of arranging type to make text legible, readable, and appealing when displayed. Angular Material's typography is based on the guidelines from the Material Design spec and is arranged into typography levels. Each level has a font-size, line-height and font-weight. The available levels are:
display-4,display-3,display-2anddisplay-1- Large, one-off headers, usually at the top of the page (e.g. a hero header).headline- Section heading corresponding to the<h1>tag.title- Section heading corresponding to the<h2>tag.subheading-2- Section heading corresponding to the<h3>tag.subheading-1- Section heading corresponding to the<h4>tag.body-1- Base body text.body-2- Bolder body text.caption- Smaller body and hint text.button- Buttons and anchors.input- Form input fields.
The typography levels are collected into a typography config which is used to generate the CSS.
Usage
To get started, you first include the Roboto font with the 300, 400 and 500 weights. You can host it yourself or include it from Google Fonts:
<head>
...
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
...
</head>
Now you can add the appropriate CSS classes to the elements that you want to style:
<h1 class="mat-display-1">Jackdaws love my big sphinx of quartz.</h1>
<h2 class="mat-h2">The quick brown fox jumps over the lazy dog.</h2>
By default, Angular Material doesn't apply any global CSS. To apply the library's typographic styles more broadly, you can take advantage of the mat-typography CSS class. This class will style all descendant native elements.
<!-- By default, Angular Material applies no global styles to native elements. -->
<h1>This header is unstyled</h1>
<!-- Applying the mat-tyography class adds styles for native elements. -->
<section class="mat-typography">
<h1>This header will be styled</h1>
</section>