search

styled-components / polished

A lightweight toolset for writing styles in JavaScript ✨
https://polished.js.org/
MIT License
7.64k stars 208 forks source link

RFC change modularScale default unit from `em` to `rem` #150

Closed brikou closed 7 years ago

brikou commented 7 years ago

em units are based on the font size of the element they’re used on whereas rem units are based on the font size of the html element.

I suggest to update modularScale signature to use rem as default.

read more here https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

WDYT ?

brikou commented 7 years ago

EDIT: in fact I think that default base should be simply 1 (as float or 16 if you deal with px). This helper shouldn't have anything to do with unit IMO.

brikou commented 7 years ago

The more I think about it... the more I feel that I am wrong and 1em as base unit is perfect... So closing this issue

brunnolou commented 7 years ago

@brikou can you explain why you now think em is better instead of rem in modular scale?

IMHO modularScale(2) should always be the same px size, and not be determined by the font size of the parent.