angular / angular/components

bug(Typography): Default font settings on `.mat-typography` is `body-2` instead of `body-1`

Open
#27,112 13 comments 3 reactions 0 assignees View on GitHub
area: theming P5
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

14

### Description

When a theme is configured according to the docs, and typography is set up by adding this line:
`@include mat.typography-hierarchy(mat.define-typography-config())`
https://v15.material.angular.io/guide/typography#using-typography-styles-in-your-application

Applying the `.mat-typography` class on the body element defines `body-2` as the default font for the application:
https://github.com/angular/components/blob/16.0.1/src/material/core/typography/_typography.scss#L273

body-1 has a font-size of 16px.
body-2 has a font-size of 14px;

The docs say:
`body-1` | Base body text.
`body-2` | Secondary body text.
https://github.com/angular/components/blob/16.0.1/guides/typography.md?plain=1#L54

If `body-1` is considered `base body text`, I expect it to apply when using the `mat-typography` css class, and not `body-2`.

### Reproduction

1. Follow the docs to set up typography styles in a brand new Angular + Angular Material app:
https://v15.material.angular.io/guide/typography#using-typography-styles-in-your-application

2. Add `mat-typography` to the `body` tag.

3. Inspect font-size on the `body` tag.

### Expected Behavior

I expect `body-1` to be the default font settings which apply when using `mat-typography` (since the docs claim this is `base body text`).

### Actual Behavior

`body-2` is the default font settings when using `@include mat.typography-hierarchy(mat.define-typography-config())` instead of `body-1`.

### Environment

- Angular: 15.2.9
- CDK/Material: 15.2.9
- Browser(s): Chrome / Edge
- Operating System (e.g. Windows, macOS, Ubuntu): macOS / Windows

Contributor guide

Open the contributing guide

Research direction

Start in src/material/core/typography/_typography.scss at the linked selector and compare it with guides/typography.md and the typography documentation. Follow the reproduction steps in a new Angular Material app; done means `.mat-typography` applies the documented base body text settings rather than the secondary settings.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.