docs-bug(Typography): It isn't clear how to customise Material 3 typography
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### Documentation Feedback
Material 2 docs were pretty clear about how to customise typography.
```
@use '@angular/material' as mat;
$my-custom-level: mat.m2-define-typography-level(
$font-family: Roboto,
$font-weight: 400,
$font-size: 1rem,
$line-height: 1,
$letter-spacing: normal,
);
$my-custom-typography-config: mat.m2-define-typography-config(
$headline-1: mat.m2-define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
$headline-2: mat.m2-define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
$headline-3: mat.m2-define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
$headline-4: mat.m2-define-typography-level(34px, 40px, 400),
$headline-5: mat.m2-define-typography-level(24px, 32px, 400),
// ...
);
```
The current page called "Customizing Typography" doesn't have an information on how to customise it at all. It describes the usage only.
Migration guide isn't answering this question as well (https://material.angular.io/guide/material-2-theming#how-to-migrate-an-app-from-material-2-to-material-3).
### Affected documentation page
https://material.angular.io/guide/theming#customizing-your-typography
Contributor guide
Research direction
Start with the affected “Customizing Your Typography” section in the theming guide and compare it with the Material 2 migration guide linked in the issue. Document how Material 3 typography can be customized, including the Sass configuration approach shown in the report, and ensure the page answers the customization question rather than only describing usage.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- sass
- Domain
- documentation
- Issue type
- Documentation
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100