DEV Community

Discussion on: Back to Basic: Should we use Rem, Em or Pixel?

Collapse
 
taufik_nurrohman profile image
Taufik Nurrohman • Edited

IMO:

  • Border width (px) - Relative border width is ugly.
  • Icon size (em) - When inline with text.
  • Margin for typography (rem) - Case for margin between heading and paragraph.
  • Padding for typography (em) - Case for different button size.
  • Font size (em or %) - Case for heading font size and secondary font size.
  • Root font size (px) - It is the root! Why bother with relative units? Relative to what??
  • Line height (em or rem) - Because it needs to be relative to the font size. Unless you want to set a vertical rhythm and such.
Collapse
 
elias_zon profile image
ELIAS ZON

thanks to your great summary

Collapse
 
dillonheadley profile image
Dillon Headley

Making the root font size a px (or vw/vh) value can break accessibility for some who change the font size through their browser settings.

Also line height can be kept unit less which acts like ems. ie:
line-height: 1.5;

But otherwise I agree! πŸ˜ƒ

Collapse
 
theodorusclarence profile image
Theodorus Clarence

Agreed with Dillon! Thanks for your addition.