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.