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.

[fergardi]

Hello!

I had the same "problem" (restlessness, curiosity, whatever) and after inspecting the source code I ended doing something like this:

First, in my custom material theming scss, I changed every PX measure to its equivalent REM representation:

@function define-typography-level(
  $font-size,
  $line-height: $font-size,
  $font-weight: 400,
  $font-family: null,
  $letter-spacing: normal) {
  @return (
    font-size: $font-size,
    line-height: $line-height,
    font-weight: $font-weight,
    font-family: $font-family,
    letter-spacing: $letter-spacing
  );
}
$custom-typography: mat-typography-config(
  $font-family: "'Open Sans', sans-serif",
  $display-4: define-typography-level(8rem, 8rem, 300, $letter-spacing: -0.05em),
  $display-3: define-typography-level(4rem, 4rem, 400, $letter-spacing: -0.02em),
  $display-2: define-typography-level(3.21rem, 3.42rem, 400, $letter-spacing: -0.005em),
  $display-1: define-typography-level(2.42rem, 2.85rem, 400),
  $headline: define-typography-level(1.71rem, 2.28rem, 400),
  $title: define-typography-level(1.42rem, 2.28rem, 500),
  $subheading-2: define-typography-level(1.14rem, 2rem, 400),
  $subheading-1: define-typography-level(1.07rem, 1.71rem, 400),
  $body-2: define-typography-level(1rem, 1.71rem, 500),
  $body-1: define-typography-level(1rem, 1.42rem, 400),
  $caption: define-typography-level(0.85rem, 1.42rem, 400),
  $button: define-typography-level(1rem, 1rem, 500),
  $input: define-typography-level(inherit, 1.125, 400),
);
@include mat-core($custom-typography);

Then, considering that the base font-size is 14px:

html {
  font-size: 14px;
}

Now we can do:

@media screen and (max-width: 960px) {
  html {
    font-size: 12px;
  }
}

And my whole Angular app scales accordingly (given that you use .mat-typography on the top html element)!

Hope it helps.

Cheers!

[mmalerba]

This is something we plan to have support for when we release the MDC-based components we're currently working on.

[MatthiasKunnen]

@mmalerba, with MDC based components now here without relative units, should this issue be picked up again?

In addition, do you happen to know why it was not part of the MDC release? There might be a good reason behind it that I would be interested in finding out.

[mmalerba]

We actually do have this available now via define-rem-typography-config(). I've marked this as a documentation issue because I'm not sure we ever added a mention of that to the docs

[MatthiasKunnen]

Documentation would be appreciated. I hadn't come across this new functionality in either the documentation or the release blogs/posts.

[e-oz]

For those who found it in 2024 or later: Angular Material v18 uses rem for typography.

[amysorto]

Closing this issue since as @e-oz mentioned, Angular Material does use rem for typography now

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}