angular / angular/components

bug(typography): h4 not using subtitle-2 as described in the docs

Open
#26,351 2 comments 5 reactions 0 assignees View on GitHub
area: theming P2
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

Is this a regression?

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

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

_No response_

### Description

[Here](https://material.angular.io/guide/typography#typography-levels) the documentation states that `subtitle-2` is corresponding to the `

`. I found that the ` tag is actually using the `body-1` styling as you can see in the following code snipped copied from the `_typography.scss` file.
```css
.mat-h4,
.mat-body-1,
#{$selector} .mat-h4,
#{$selector} .mat-body-1,
#{$selector} h4 {
@include typography-utils.typography-level($config, body-1);
margin: 0 0 16px;
}
```

and subtitle-2 is not corresponding to any heading:

```css
.mat-body-strong,
.mat-subtitle-2,
#{$selector} .mat-body-strong,
#{$selector} .mat-subtitle-2 {
@include typography-utils.typography-level($config, subtitle-2);
}
```

### Reproduction

* Define a custom typography config with `mat.define-typography-config`
* Define `$subtitle-2`
* Use a `

` tag in your template (with or without explicitly defining the class `mat-h4` on the element)
* Style of `subtitle-2` is not applied to the `

` tag.

### Expected Behavior

`

` tags should either use `subtitle-2` or the documentation should be updated

### Actual Behavior

`

` is using `body-1` styling

### Environment

- Angular: 15.0.3
- CDK/Material: 15.0.3
- Browser(s): Chromium based (Brave, Chrome)
- Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu

Contributor guide

Open the contributing guide

Research direction

Start with the typography documentation at the linked typography-levels guide and the referenced _typography.scss rules. Reproduce the issue with a custom mat.define-typography-config and an h4 element, then determine whether the documented subtitle-2 mapping or the SCSS behavior should change. Done means the h4 styling and documentation agree.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, scss
Domain
design, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.