Components: Angular Material Typography using pixels instead of rem

[Lightk3ira]

Bug, feature request, or proposal:

When using Angular's Typography inside '_theming.scss' ends up using pixels. I believe the best would be for this to instead convert the pixels to 'rem'.

Rem is very important when it comes to accessibility concerns. If the user goes to the browser settings and changes the font size to very large the text in the application should scale accordingly.

As 'rem' is much stronger than pixels when it comes to accessibility I am a bit surprised this is not implemented in this manner. I believe this change would only make a positive impact, currently I am in the debate of using this because of this problem as we will be then failing some accessibility guidelines.

What is the expected behavior?

The text in the application after using Angular's Typography should be converting pixels provided to rem for accessibility for when the user goes to adjust the browsers font size from medium (default) to another such as large.

What is the current behavior?

Angular Typography uses pixels. This prevents the application font-size from scaling when the user has trouble seeing and wishes to scale the font size up through the browser.

What are the steps to reproduce?

1. Create new Angular Application
2. Add Angular Material Typography to the application with default values provided by the Angular guide here
3. In your app components html add a simple h1 with typography class added:
   

   Header Text For Testing

4. Inspect the h1 tag through Google Chrome
5. You will see something similar to this: 400 34px/40px Roboto, "Helvetica Neue", sans-serif;

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

Accessibility

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

All

Is there anything else we should know?

Accessibility is an important part of an application.

[Lightk3ira]

Hello Angular Team, just checking in to see if there is any answer on this. Thanks

[jelbourn]

This is on our radar for 2019, but we don't have any specific on it yet.

[Lightk3ira]

@jelbourn Thanks for your reply regarding this issue.
If I get a chance am I able to submit a pull request regarding a fix for this issue?

Thanks,

[jelbourn]

This is something that's going to happen as part of a larger planned refactoring for our theming system, so it's not the best candidate for a community PR.

[Lightk3ira]

@jelbourn Alright no problem, thanks for the heads up.

[craigcampbell]

Please leave the ability to pick between the two when you do this.

[CharlotteAmyWilson]

@jelbourn do you know roughly when the larger planned refactoring is happening?

[jelbourn]

The goal is to have something available towards the end of 2019, but it depends on how other work goes up until then.

[eLarocque]

Hi Angular Team. Are there any plans to work on this in the near future? This impacts more than just accessibility. For example; with screens having greater and greater resolutions (2k, 4k, etc), components are not taking as much space as they could and seem to be small on those screens. It would be great if our media queries could simply change the base font-size and it would translate to making the material components bigger and taking more real estate.

[jelbourn]

I unfortunately don't have anything to report for the near term. @mmalerba is doing some work on our typography system now, so it's something we're actively thinking about, but we're still in the thinking stages. The biggest challenge here is doing this in a non-breaking way.