When to use rem and em
Hello guys, I'm currently learning how to build responsive design and I came across that we should try not to use the px units to build responsive designs; only keep that for small things, like logos etc...We should try to stick with units like ch, rem and em.
From what I understand, rem is the font-size relative to our root element, the html element and em is the unit relative to the nearest parent element.
But when should we choose to use rem rather than em.
13 Replies
rem is commonly used for font size since its relative to the root as you say, meaning it scales with browser font size preferences, making it accessible.
em is used for things such as icon sizes, padding, margin and anything you want to scale with the font size of the element.Neither is inherently responsive though. They're still fixed units, just better to use in some circumstances
hmm for responsive design, we would still need to change the value they take? like for example if we define something as 1rem on desktop, on a mobile this will change, so this doesn't mean it will automatically be responsive ?
rem/em are responsive insofar that they change with the user's preference, as snxxwyy said. But there's nothing inherently "responsive" about them in the sense that they don't automatically change. You need to code that yourself.rem isn’t automatically responsive no, it’s fixed like jochem said, I recommend clamp for it to be somewhat automatically responsive. em is somewhat though, since it’ll scale with the font size, you only need to change the font size.
If you use
px for font size it overrides even the user's preference, which is super-duper bad for accessibility.ah I see, we overides the user-preference using px
This little snippet will get you "responsive" font sizes so that the font size will start at 1rem (whatever the user's base font size is, default to 16px) and grow to 2rem based on the smaller of the viewport's width or height.
Of course you'll want to do a bit more than just that so it'll work with more than just the base font size.
Yep I see, I now understand why rem/em is prefered and not px.... it's mainly because of accessibility and not responsiveness
I would argue
em is a little bit of both, it’s not ‘responsive’ since it’s fixed, but it does scale by default which somewhat makes it responsive in a wayTo answer your question, my rule of thumb for new people is this:
*
rem is for font size. Use it so you don't run into problems with compounding ems
* em should be used for margin, padding, and other things that should change based on the current font size (bigger text needs more room to breathe)
* ch should be used for text width (ch is the width of the 0 character in the current font size so it's as close as we have to "one character width")
* px should only be used for visual flourishes and not for anything textual or visually necessary. Like image sizes, boarders, boarder radius, outline, etc
-# of course the reality is more complex than that, but for beginners who want hard-and-fast rules it's a good starting point. The ultimate answer is, as always, it dependsYeah I see, thanks, really appreciate !!
You’re welcome