Components: Angular Material typography sizing is inconsistent w/ Material spec

Created on 4 Sep 2018  路  5Comments  路  Source: angular/components

Bug, feature request, or proposal:

Angular Material does not use the same typography size ranking as the Material spec.
https://material.io/design/typography/the-type-system.html#type-scale clearly shows Body 1 as larger and darker than Body 2.
https://material.angular.io/guide/typography indicates that body-2 is darker than body-1.

This can be seen in the source code as well. https://github.com/angular/material2/blob/master/src/lib/core/typography/_typography.scss#L24
Similar issues apply to other types of font.

What is the expected behavior?

That it would be consistent w/ spec.

What is the current behavior?

It is ranked in inverse order.

What are the steps to reproduce?

  1. View the documentation for the Material spec.
  2. View the Angular Material docs.
  3. View the corresponding source code.

What is the use-case or motivation for changing an existing behavior?

Consistency.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

all

Is there anything else we should know?

Fixed in MDC G P3 theming material spec

Most helpful comment

Yes, this should be included in our larger refactoring to base most of the components on top of MDC web

All 5 comments

The current typography scale is based on the previous iteration of the Material Design spec.

I am not an expert in that field but I think the font-size and letter-spacing are also wrong according to Material Design Spec: https://material.io/design/typography/the-type-system.html#type-scale

For example, mat-display-1 has a font-size of 112px while according to MD spec it should be 96px.

Am I wrong? Also I noticed there is no mention about the _Overline_ style...

Is there any plan or strategy on aligning Angular Material's theming with the Material spec?
I find the current spec more intuitive, esp. from a web development perspective.

Is this potentially also part of the larger refactoring mentioned in https://github.com/angular/components/issues/15580#issuecomment-477755555?

Yes, this should be included in our larger refactoring to base most of the components on top of MDC web

It's also missing the "overline" style completely.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

LoganDupont picture LoganDupont  路  3Comments

michaelb-01 picture michaelb-01  路  3Comments

alanpurple picture alanpurple  路  3Comments

3mp3ri0r picture 3mp3ri0r  路  3Comments

Hiblton picture Hiblton  路  3Comments