Request feature: Change from px to rem for Button

[haojia321]

Please consider changing unit from px to rem for Button and any other components.
It makes UI looking better in cross device applications.

[DanielRuf]

Definitely, especially retina and when users zoom in / out.
The goal should be to replace all occurrences of px in materislize with rem.

[fega]

@tomscholz it looks more like an enhancement request

[tomscholz]

@fega ;) You are right

[haojia321]

Hi Guys,
Whats the default @root font-size in this framework? I think I will create a PR to change Button from px to rem.

[DanielRuf]

@haojia321 depends

This is not how it should be. According to specs on a scale of 12, 14, 16, 20 and 34. https://material.io/guidelines/style/typography.html#typography-typeface

Too many type sizes and styles at once can wreck any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.

These sizes and styles were developed to balance content density and reading comfort under typical usage conditions. Type sizes are specified with sp (scaleable pixels) to enable large type modes for accessibility.

English and English-like scripts

Latin, Greek, and Cyrillic.

The basic set of styles are based on a typographic scale of 12, 14, 16, 20, and 34.

[DanielRuf]

http://materialdesignblog.com/material-design-typeface-in-css/
https://material.io/guidelines/layout/units-measurements.html
body is 14

https://github.com/material-components/material-components-web/blob/master/packages/mdc-typography/_variables.scss#L89-L97

[haojia321]

So I think what we need to do is just change component from px to rem. We let user to set root font-size on their own?

[haojia321]

Hi Guys,
This is the PR for button size changes. I will change other components later but before I do that. I want to know if you guys are fine with this change or not

Thanks
Hao

[Hoshinokoe]

It's very nice feature to have REMs instead of pixels for all components, meaning you don't have to state an explicit height, width, padding, etc, for every device. Simply set font-size on root level and have the whole component (and its nested elements) proportionally changed. Right now, form elements (like checkboxes, radios, etc) have fixed width and height.

This is great for making site mobile friendly.