CSS units - use rem values instead of pixels

[Cleudi]

Bug, feature request, or proposal:

Proposal

What is the expected behavior?

Use rem units especially instead of px units to provide a scalable layout.
Good guide (imho): https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

What is the current behavior?

Without overrides, components change only some parts of their dimensions (the ones defined in em units).

What are the steps to reproduce?

Switch font size of your browser (from very large to very small) and have a look at material demos.
https://material2-app.firebaseapp.com/

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U
Not necessary

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

Fully scaling components require overrides of materials CSS (of course this is not covered by theming) which makes updating hard.

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

Material - latest

Is there anything else we should know?

[Cleudi]

No opinions?

[TheFirstDeity]

I think it makes sense, based on Material spec, for only some things to resize with font because there are two distinct units of measurement (dp and sp) but only sp is supposed to change with font settings.

However, I've noticed that the new Typography mixins size text in px using the exact values that Material guidance recommends in "sp" units. Since "sp" is supposed to scale based on the user's settings, wouldn't it be better to calculate each size based on its ratio to the "regular" inherited font size? Like, specify each font size in "rem" units so that it takes user settings into account.

Also, if we want to scale everything based on font size, then what's the best way to handle spec guidance that requires absolute size considerations like "touchscreen objects" which are supposed to be at least 9mm? The "dp" unit is supposed to be absolute and independent of pixel density, so does that mean we should start using "pt" in place of "dp" sometimes, or maybe media-query the screen's pixel density and adjust our scaling based on that?

Edit: Just found out CSS "px" values are device independent based on crazy geometric nonsense. Since px are supposed to be approx 96/inch (though only required for printing) and a dp is exactly 160/inch, the conversion "dp * 0.6 = px" should translate the Material measurements somewhat evenly into web measurements... Or not, based on this it's a 1:1 conversion between "dp" and "px", so everything happens to be named what it isn't. Sorry for going off topic, I'm trying to figure out how scalable layouts work within spec conformance myself.

(Maybe it's best to break their absolute sizing guidelines in favor of the web-oriented "em" and "rem" approach? In either case, fonts are supposed to scale with user settings, so at least setting the typographic scales with "rem" might be a good idea...)

[jelbourn]

Yeah, the "dp" in the material design spec is largely targeted to Android. For web, it maps to px, since they are indeed device independent.

We don't use em or rem because we have no control over the context that influences the final size. However, with the typography extension to theming, you should be able to customize the styles to use a custom size.

[angular-automatic-lock-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.}