Material's documentation aptly puts it as follows:
Typography is a way of arranging type to make text legible, readable, and appealing when displayed.
Material offers a different level of typography that has different font-size, line-height, and font-weight characteristics that you can apply to any HTML element, not just the components provided out of the box.
In the following table are CSS classes that you can use to apply Material's typography, such as <div class="mat-display-4">Hello, Material world!</div>:
| Class Name |
Usage |
| display-4, display-3, display-2 and display-1 |
Large, one-off headers, usually at the top of the page (for example, a hero header) |
| headline |
Section heading corresponding to the <h1> |
