When to use what? px, em, rem?

So far I have only been using PX and viewport units, but have decided to learn how to use rem and em. I know how they work but I have problems thinking in these units. I’m so used to think in pixels.

I have never had any problems with pixels, but i read that em/rems are easier to scale. I don’t believe that using rems for everything is the way to go because you rarely want everything to scale accordingly the way they do when only setting the size at the root.

How do you use the different units, and for what?

I switched from em to rem this fall and it makes life so much easier!

I tend to use px for boxes where - like you - it is easier for me to conceptualize a 250px wide box.

But for type I always use em/rem.

Do you only use rem? I can see it working on simple sites but on bigger ones? I was thinking about using em’s for components, and rem’s for “global” styles. for example:

.component{
font-size: 16px;
padding: 2em;
h1{
font-size: 2em;
}
p{
font-size: 1em;
}
}

rem for all font-size and margins and padding, and usually px for divs and layout, but it can vary.

I was tired of the cascading effect of ems.

What do you do when you have two columns with lots of nesting, and you need to match up paragraphs in each? If you use ems, you get flaky sizes, like 1em → 1.5em → 2.2em —> 3.675em

With rem, 1.5rem always means 50% bigger than html font-size.

1 Like

Thats true. As said I don’t have much experiance with these units=) But i’m using rems in a small project I started today, hope to get the hang of it.

Search for the topic of “rem” or “rems” on SitePoint.

There was a good discussion/debate going on this summer.

No, but maybe some site visitors have.
I understand the comfort in using pixels, they are a tangible unit on screen that you can visualise. But the fact is, fixed size layouts are dead! fluidity and responsiveness are what web users demand theses days.
In terms of font size, never use pixels, use em or rem, whichever suits you best. Some users want to be able to zoom the fonts in their browser. em and rem are much better for accessibility.
Now when that user scales the font up, will the enlarged text still fit its container?
That question brings us on to units for layout elements. Here, for the most part fixed units should be avoided for setting things like width and height, though I make a distinction between width and max-width also major and minor page elements.
On the major page elements, don’t use fixed units for width. While em will stand up to font size increase (it increases with the font), it is fixed in terms of browser size, so is not responsive, and pixels are totally unresponsive in both cases. So if you are setting a width, use % or set it to auto and let the margin control the gutter, if you want a gutter. This should keep things nice and fluid and avoid needing a million media queries.
But it is OK to use set units like em or px for the max-width values on such elements to set the point you want it to stop growing with the browser.
On smaller, minor page elements, the set units may be better suited. Small graphical elements, such as icons should be fine in pixels. Even something like a side bar could have a width in pixels or em. It would just need a query to make it stack on smaller screens. Also text lines may get tight if the font is zoomed (using px), but the other point is in general, leave height at auto for text containing elements, to allow it to wrap in such cases.

For responsive website we generally use font size in “em”. and for fixed grid website we use “px”

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.