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.
That it would be consistent w/ spec.
It is ranked in inverse order.
Consistency.
all
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.
Most helpful comment
Yes, this should be included in our larger refactoring to base most of the components on top of MDC web