docs(typography): add css classes to typography guide (#13154)

Replaces the bullet list in the typography docs with a table that also shows the CSS classes that each of the breakpoints maps to.

Fixes #13151.

Author: crisbeto

guides/typography.md

@@ -6,17 +6,23 @@ Angular Material's typography is based on the guidelines from the [Material Desi
 arranged into typography levels. Each level has a `font-size`, `line-height` and `font-weight`. The
 available levels are:
 
-* `display-4`, `display-3`, `display-2` and `display-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.
+
+| Name            | CSS classes                      | Description                                                                 |
+|-----------------|----------------------------------|-----------------------------------------------------------------------------|
+| `display-4`     | `.mat-display-4`                 | Large, one-off header, usually at the top of the page (e.g. a hero header). |
+| `display-3`     | `.mat-display-3`                 | Large, one-off header, usually at the top of the page (e.g. a hero header). |
+| `display-2`     | `.mat-display-2`                 | Large, one-off header, usually at the top of the page (e.g. a hero header). |
+| `display-1`     | `.mat-display-1`                 | Large, one-off header, usually at the top of the page (e.g. a hero header). |
+| `headline`      | `.mat-h1`, `.mat-headline`       | Section heading corresponding to the `<h1>` tag.                            |
+| `title`         | `.mat-h2`, `.mat-title`          | Section heading corresponding to the `<h2>` tag.                            |
+| `subheading-2`  | `.mat-h3`, `.mat-subheading-2`   | Section heading corresponding to the `<h3>` tag.                            |
+| `subheading-1`  | `.mat-h4`, `.mat-subheading-1`   | Section heading corresponding to the `<h4>` tag.                            |
+| `body-1`        | `.mat-body`, `.mat-body-1`       | Base body text.                                                             |
+| `body-2`        | `.mat-body-strong`, `.mat-body-2`| Bolder body text.                                                           |
+| `caption`       | `.mat-small`, `.mat-caption`     | Smaller body and hint text.                                                 |
+| `button`        | None. Used only in components.   | Buttons and anchors.                                                        |
+| `input`         | None. Used only in components.   | Form input fields.                                                          |
+
 
 The typography levels are collected into a typography config which is used to generate the CSS.
 
@@ -130,5 +136,5 @@ $config: mat-typography-config();
 ```
 
 
-[1]: https://material.io/guidelines/style/typography.html
+[1]: https://material.io/archive/guidelines/style/typography.html
 [2]: https://fonts.google.com/