Skip to content

Commit edb2d56

Browse files
crisbetocrisbeto
authored
docs: update typography guide to new terminology (#25940)
Updates the typography guide to be based on the 2018 spec terminology.
1 parent 204adb9 commit edb2d56

File tree

1 file changed

+41
-42
lines changed

1 file changed

+41
-42
lines changed

‎guides/typography.md

Lines changed: 41 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -38,26 +38,25 @@ requests][font-inlining].
3838
A **typography level** is a collection of typographic styles that corresponds to a specific
3939
part of an application's structure, such as a header. Each level includes styles for font family,
4040
font weight, font size, and letter spacing. Angular Material uses the [typography levels
41-
from the 2014 version of the Material Design specification][2014-typography], outlined in the
41+
from the 2018 version of the Material Design specification][2018-typography], outlined in the
4242
table below.
4343

44-
| Name | Description |
45-
|-----------------|-----------------------------------------------------------------------------|
46-
| `display-4` | 112px, one-off header, usually at the top of the page (e.g. a hero header). |
47-
| `display-3` | 56px, one-off header, usually at the top of the page (e.g. a hero header). |
48-
| `display-2` | 45px, one-off header, usually at the top of the page (e.g. a hero header). |
49-
| `display-1` | 34px, one-off header, usually at the top of the page (e.g. a hero header). |
50-
| `headline` | Section heading corresponding to the `<h1>` tag. |
51-
| `title` | Section heading corresponding to the `<h2>` tag. |
52-
| `subheading-2` | Section heading corresponding to the `<h3>` tag. |
53-
| `subheading-1` | Section heading corresponding to the `<h4>` tag. |
54-
| `body-1` | Base body text. |
55-
| `body-2` | Bolder body text. |
56-
| `caption` | Smaller body and hint text. |
57-
| `button` | Buttons and anchors. |
58-
| `input` | Form input fields. |
59-
60-
[2014-typography]: https://material.io/archive/guidelines/style/typography.html#typography-styles
44+
| Name | Description |
45+
|-----------------|------------------------------------------------------------------------------|
46+
| `headline-1` | One-off header, usually at the top of the page (e.g. a hero header). |
47+
| `headline-2` | One-off header, usually at the top of the page (e.g. a hero header). |
48+
| `headline-3` | One-off header, usually at the top of the page (e.g. a hero header). |
49+
| `headline-4` | One-off header, usually at the top of the page (e.g. a hero header). |
50+
| `headline-5` | Section heading corresponding to the `<h1>` tag. |
51+
| `headline-6` | Section heading corresponding to the `<h2>` tag. |
52+
| `subtitle-1` | Section heading corresponding to the `<h3>` tag. |
53+
| `subtitle-2` | Section heading corresponding to the `<h4>` tag. |
54+
| `body-1` | Base body text. |
55+
| `body-2` | Bolder body text. |
56+
| `caption` | Smaller body and hint text. |
57+
| `button` | Buttons and anchors. |
58+
59+
[2018-typography]: https://m2.material.io/design/typography/the-type-system.html#type-scale
6160

6261
### Define a level
6362

@@ -89,11 +88,11 @@ baseline if unspecified.
8988
@use '@angular/material' as mat;
9089

9190
$my-custom-typography-config: mat.define-typography-config(
92-
$display-4: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
93-
$display-3: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
94-
$display-2: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
95-
$display-1: mat.define-typography-level(34px, 40px, 400),
96-
$headline: mat.define-typography-level(24px, 32px, 400),
91+
$headline-1: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
92+
$headline-2: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
93+
$headline-3: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
94+
$headline-4: mat.define-typography-level(34px, 40px, 400),
95+
$headline-5: mat.define-typography-level(24px, 32px, 400),
9796
// ...
9897
);
9998
```
@@ -129,7 +128,7 @@ $my-theme: mat.define-light-theme((
129128
$kids-primary: mat.define-palette(mat.$cyan-palette);
130129
$kids-accent: mat.define-palette(mat.$yellow-palette);
131130

132-
// Typography config based on the default, but using "Comic Sans" as the
131+
// Typography config based on the default, but using "Comic Sans" as the
133132
// default font family for all levels.
134133
$kids-typography: mat.define-typography-config(
135134
$font-family: 'Comic Sans',
@@ -170,28 +169,28 @@ your application. These CSS classes correspond to the typography levels in your
170169
This mixin also emits styles for native header elements scoped within the `.mat-typography` CSS
171170
class. The table below lists the CSS classes emitted and the native elements styled.
172171

173-
| CSS class | Level name | Native elements |
174-
|-------------------------------------|----------------|-----------------|
175-
| `.mat-display-4` | `display-4` | None |
176-
| `.mat-display-3` | `display-3` | None |
177-
| `.mat-display-2` | `display-2` | None |
178-
| `.mat-display-1` | `display-1` | None |
179-
| `.mat-h1` or `.mat-headline` | `headline` | `<h1>` |
180-
| `.mat-h2` or `.mat-title` | `title` | `<h2>` |
181-
| `.mat-h3` or `.mat-subheading-2` | `subheading-2` | `<h3>` |
182-
| `.mat-h4` or `.mat-subheading-1` | `subheading-1` | `<h4>` |
183-
| `.mat-h5` | None | `<h5>` |
184-
| `.mat-h6` | None | `<h6>` |
185-
| `.mat-body` or `.mat-body-1` | `body-1` | Body text |
186-
| `.mat-body-strong` or `.mat-body-2` | `body-2` | None |
187-
| `.mat-small` or `.mat-caption` | `caption` | None |
172+
| CSS class | Level name | Native elements |
173+
|------------------------------------------|----------------|-----------------|
174+
| `.mat-headline-1` | `headline-1` | None |
175+
| `.mat-headline-2` | `headline-2` | None |
176+
| `.mat-headline-3` | `headline-3` | None |
177+
| `.mat-headline-4` | `headline-4` | None |
178+
| `.mat-h1` or `.mat-headline-5` | `headline-5` | `<h1>` |
179+
| `.mat-h2` or `.mat-headline-6` | `headline-6` | `<h2>` |
180+
| `.mat-h3` or `.mat-subtitle-1` | `subtitle-1` | `<h3>` |
181+
| `.mat-h4` or `.mat-body-1` | `body-1` | `<h4>` |
182+
| `.mat-h5` | None | `<h5>` |
183+
| `.mat-h6` | None | `<h6>` |
184+
| `.mat-body` or `.mat-body-2` | `body-2` | Body text |
185+
| `.mat-body-strong` or `.mat-subtitle-2` | `subtitle-2` | None |
186+
| `.mat-small` or `.mat-caption` | `caption` | None |
188187

189188
In addition to the typographic styles, these style rules also include a `margin-bottom` for
190-
headers and paragraphs. For `body-1` styles, text is styled within the provided CSS selector.
189+
headers and paragraphs. For `body` styles, text is styled within the provided CSS selector.
191190

192191
The `.mat-h5` and `.mat-h6` styles don't directly correspond to a specific Material Design
193-
typography level. The `.mat-h5` style uses the `body-1` level with the font-size scaled down by
194-
`0.83`. The `.mat-h6` style uses the `body-1` level with the font-size scaled down by `0.67`.
192+
typography level. The `.mat-h5` style uses the `body-2` level with the font-size scaled down by
193+
`0.83`. The `.mat-h6` style uses the `body-2` level with the font-size scaled down by `0.67`.
195194

196195
The `button` and `input` typography levels do not map to CSS classes.
197196

0 commit comments

Comments
 (0)