angular / angular/components

docs-bug(Typography): It isn't clear how to customise Material 3 typography

Open
#29,214 19 comments 34 reactions 0 assignees View on GitHub
area: theming docs P3
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.