Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jelbourn merged 1 commit into from
Sep 17, 2018
Merged

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 18 additions & 12 deletions guides/typography.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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/