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

[avidan-chen]

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

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

[michaelfaith]

Later in the docs, though, this table shows body-2 as the standard body text, which is accurate. So, is it just the table higher up that needs updating to be consistent? This is also consistent with the default body in the pre-mdc typography styles

[avidan-chen]

@michaelfaith in pre-mdc typography styles, the base body text, the default font was body-1:
https://github.com/angular/components/blob/14.2.7/src/material/core/typography/_typography.scss#L268

However, the definition for body-1 was the same as for body-2 (14px) for some reason (which seems counter intuitive to me, as I'd expect body-1 to be bigger than body-2):
https://github.com/angular/components/blob/14.2.7/src/material/core/typography/_typography.scss#L60

Also, in the Material specs it is clearly stated body-1 should be 16px:
https://m2.material.io/design/typography/the-type-system.html#type-scale

With the new Material spec (v3), there are 3 font sizes for body, largest being 16px as well:
https://m3.material.io/styles/typography/type-scale-tokens

Therefore I think the correct behavior would be that body-1 is set to 16px and not 14px.

[michaelfaith]

Therefore I think the correct behavior would be that body-1 is set to 16px and not 14px.

It sounds like you agree with me then, since body-1 is already set to 16px and body-2 is 14px? Your original post says that's already the case, which has been my experience too. It's just that body-2 in MDC-based Angular Material is default, which means the size is consistent with pre-MDC. If they change body-1 (16px) to be default, then that would increase everyone's default font size to 16 and likely break a lot of people. Keeping body-2 (14) as default not only makes the size consistent with pre-MDC styles, but it seems to be consistent with M3 styles, since you probably want the default to be "medium". It seems like the easiest, least impactful, and most correct thing to do would be to just change the table you referred to to match the table lower down in the page and leave body-2 (14px) as default. When they roll out M3-based styling those tables will need to be overhauled again anyway.

[avidan-chen]

@michaelfaith main issue here is that the font-size that's being applied to .mat-typography by default is 14px and not 16px (i.e., body-2 and not body-1).

It's just that body-2 in MDC-based Angular Material is default

which is incorrect according to the specs, as I've demonstrated in my previous comment.

If they change body-1 (16px) to be default, then that would increase everyone's default font size to 16 and likely break a lot of people

So? Breaking changes are a fact. You document it, you bump major version. Developers read the docs and understand there are breaking changes when migrating to major versions.

Keeping body-2 (14) as default not only makes the size consistent with pre-MDC styles, but it seems to be consistent with M3 styles, since you probably want the default to be "medium".

Incorrect IMO. See the links and screenshots from my previous comment.

It seems like the easiest, least impactful, and most correct thing to do would be to just change the table you referred to to match the table lower down in the page and leave body-2 (14px) as default.

Strongly disagree. I get that this change should be in the next major version since it's a breaking change, but I think if Angular Material claims it follows the Material spec., it should do so.

[michaelfaith]

It's just that body-2 in MDC-based Angular Material is default

which is incorrect according to the specs, as I've demonstrated in my previous comment.

How is that incorrect? The spec doesn't say which body should be default text size. It just says body-1 is 16 px, which it is, and body-2 is 14px, which it is. So it does match the spec.

Keeping body-2 (14) as default not only makes the size consistent with pre-MDC styles, but it seems to be consistent with M3 styles, since you probably want the default to be "medium".

Incorrect IMO. See the links and screenshots from my previous comment.

How is that incorrect? 14px equates to medium body in m3, which is what body-2 currently is (m2), which is default. How is that wrong? I think you're just getting tripped up by the fact that it's currently named 2. At the point where m3 rolls out, it'll likely be named body-medium, which I don't think would be problematic, would it? It would still be 14px though

So, it seems like this whole issue should just result in an adjustment in this table:

components/guides/typography.md

Lines 44 to 57 in 6e51008

	| Name | Description |
	|-----------------|--------------------------------------------------------------|
	| `headline-1` | One-off header, usually at the top of the page (e.g. a hero header). |
	| `headline-2` | One-off header, usually at the top of the page (e.g. a hero header). |
	| `headline-3` | One-off header, usually at the top of the page (e.g. a hero header). |
	| `headline-4` | One-off header, usually at the top of the page (e.g. a hero header). |
	| `headline-5` | Section heading corresponding to the `<h1>` tag. |
	| `headline-6` | Section heading corresponding to the `<h2>` tag. |
	| `subtitle-1` | Section heading corresponding to the `<h3>` tag. |
	| `subtitle-2` | Section heading corresponding to the `<h4>` tag. |
	| `body-1` | Base body text. |
	| `body-2` | Secondary body text. |
	| `caption` | Smaller body and hint text. |
	| `button` | Buttons and anchors. |

to match this table:

components/guides/typography.md

Lines 182 to 196 in 6e51008

	| CSS class | Level name | Native elements |
	|------------------------------------------|----------------|-----------------|
	| `.mat-headline-1` | `headline-1` | None |
	| `.mat-headline-2` | `headline-2` | None |
	| `.mat-headline-3` | `headline-3` | None |
	| `.mat-headline-4` | `headline-4` | None |
	| `.mat-h1` or `.mat-headline-5` | `headline-5` | `<h1>` |
	| `.mat-h2` or `.mat-headline-6` | `headline-6` | `<h2>` |
	| `.mat-h3` or `.mat-subtitle-1` | `subtitle-1` | `<h3>` |
	| `.mat-h4` or `.mat-body-1` | `body-1` | `<h4>` |
	| `.mat-h5` | None | `<h5>` |
	| `.mat-h6` | None | `<h6>` |
	| `.mat-body` or `.mat-body-2` | `body-2` | Body text |
	| `.mat-body-strong` or `.mat-subtitle-2` | `subtitle-2` | None |
	| `.mat-small` or `.mat-caption` | `caption` | None |

Notice the "Level Name" column maps directly to the M2 spec...

[avidan-chen]

How is that incorrect? The spec doesn't say which body should be default text size.

My pre-assumption that default body text should be body-1 was because in pre-MDC, body-1 was the default (although it was set to 14px and not 16px as it should have been).

In M2 spec, it says:

The default for modern web browsers is 16px

Taking these two into consideration, it makes more sense to me that the default behavior out of the box would be to set the font-size to 16px, but I agree, it's not clearly defined.

Aligning the docs would definitely improve the situation though.

[michaelfaith]

If nobody's taken it up by the weekend, I can take a stab at aligning the docs.

[michaelfaith]

@avidan-chen I had time to put a PR in for this, if you want to take a look and see what you think

[wshager]

We had the same problem, so I'd like to keep this issue active. I think this is the most confusing part:

Name	Description
body-1	Base body text.
body-2	Secondary body text.

Also note that form controls have body-1 styles, while paragraphs and such have body-2 styles. This clearly differs from Angular < 15, where both had body-1 styles. So confusing and inconsistent.