diff --git a/guides/typography.md b/guides/typography.md index 1fafdae6b211..bcbe53242a40 100644 --- a/guides/typography.md +++ b/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 `

` tag. -* `title` - Section heading corresponding to the `

` tag. -* `subheading-2` - Section heading corresponding to the `

` tag. -* `subheading-1` - Section heading corresponding to the `

` 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 `

` tag. | +| `title` | `.mat-h2`, `.mat-title` | Section heading corresponding to the `

` tag. | +| `subheading-2` | `.mat-h3`, `.mat-subheading-2` | Section heading corresponding to the `

` tag. | +| `subheading-1` | `.mat-h4`, `.mat-subheading-1` | Section heading corresponding to the `

` 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/