5 ms·

> Using pixels (px) is tempting because they’re simple to understand: declare font-size: 24px and the text will be 24px. But that won’t provide a great user exp

> Using pixels (px) is tempting because they’re simple to understand: declare font-size: 24px and the text will be 24px. But that won’t provide a great user experience, particularly for users who resize content at the browser level or zoom into content. Pixels (px) in CSS are relative as well, and scale with zoom. What is the benefit of em/rem?

chmod775 6y ago
>What is the benefit of em/rem? They (em*) scale with the element's font size, and if you set an elements font-size itself in em, that will be relative to the parent element's font size. For example: body { font-size: 18px } .something { border: 0.1em solid black; } .something > .inner { font-size: 1.5em } If you change the font-size on body, everything on that page will re-scale seamlessly. This is most useful for things like buttons/icons that are supposed to flow properly with text. So now even if you use them once in big text, and once in a small footnote, they'll still fit perfectly within the line. The biggest limitation to this approach is that you can easily end up with computed values that are weird fractions of pixels, so you have to be a bit smart and pick an easily divisible number for your base font-size if you're aiming for something pixel-perfect.
- onion2k 6y ago
  The challenge with em units is that if you modify a parent element's size it changes the children as well. In your example, if you put 'font-size: 2.0em' on the .something class then the .inner would end up changing to 3.0em. That's rarely what you actually want to happen (especially in a web app). If you just want to control the overall font scaling of everything on the page using rem is preferable, because then they'd ignore the parent and scale based on the root element size.
  - bbx 6y ago
    The key is to use rem for font-size and em or unitless for all other properties: padding, border-width, margin, line-height. That way the size of the element is independent of the context.
- continuational 6y ago
  Ok, I can kinda see the value of that - e.g. if you put a "tag button" inside some text, it will have the right size in relation to that text.
Izkata 6y ago
There's no date on the article, and this was the entry that made me wonder if it's 5+ years old, back when text zoom was more prevalent. When full zoom became the default, em/rem became less necessary, and at least to me appear to be falling out of favor as extra unnecessary complexity. (Quick edit: Mentioned but not really given much focus is that em/rem can be used on, say, image width and margin, as well - making it adjustable in a text-zoom world. That's mainly what I have in mind here.) (Even aside from affecting non-text, in the newly popular component-oriented design, you typically don't want relative font sizing to leak between components.)
rimliu 6y ago
"Relative" and "Absolute" have their own definitions and by that definition "px" is indeed an absolute unit.
- matsemann 6y ago
  Not anymore, as most px units now is based on a reference px, a size determined based on screen density and viewing distance. That's why something rendered at 600px on an iphone takes almost all the width, even though the screen has more than double that in pixels. And when zooming, the reference px is zoomed. So the old reason for not using px and instead use rem doesn't apply. https://developer.mozilla.org/en-US/docs/Glossary/CSS_pixel https://developer.mozilla.org/en-US/docs/Glossary/CSS_pixel
wackget 6y ago
Yeah I came here to ask this. Using relative units for layout seems like a terrible idea. If you want to make your text a little bigger, your entire layout changes too. That's fine if it's something like text padding or paragraph margins, but stuff like border width, or dimensions of boxes? That seems weird. Browsers have been able to zoom pixel widths for years.

chmod775 6y ago

>What is the benefit of em/rem? They (em*) scale with the element's font size, and if you set an elements font-size itself in em, that will be relative to the parent element's font size. For example: body { font-size: 18px } .something { border: 0.1em solid black; } .something > .inner { font-size: 1.5em } If you change the font-size on body, everything on that page will re-scale seamlessly. This is most useful for things like buttons/icons that are supposed to flow properly with text. So now even if you use them once in big text, and once in a small footnote, they'll still fit perfectly within the line. The biggest limitation to this approach is that you can easily end up with computed values that are weird fractions of pixels, so you have to be a bit smart and pick an easily divisible number for your base font-size if you're aiming for something pixel-perfect.

onion2k 6y ago
The challenge with em units is that if you modify a parent element's size it changes the children as well. In your example, if you put 'font-size: 2.0em' on the .something class then the .inner would end up changing to 3.0em. That's rarely what you actually want to happen (especially in a web app). If you just want to control the overall font scaling of everything on the page using rem is preferable, because then they'd ignore the parent and scale based on the root element size.
- bbx 6y ago
  The key is to use rem for font-size and em or unitless for all other properties: padding, border-width, margin, line-height. That way the size of the element is independent of the context.
continuational 6y ago
Ok, I can kinda see the value of that - e.g. if you put a "tag button" inside some text, it will have the right size in relation to that text.

Izkata 6y ago

There's no date on the article, and this was the entry that made me wonder if it's 5+ years old, back when text zoom was more prevalent. When full zoom became the default, em/rem became less necessary, and at least to me appear to be falling out of favor as extra unnecessary complexity. (Quick edit: Mentioned but not really given much focus is that em/rem can be used on, say, image width and margin, as well - making it adjustable in a text-zoom world. That's mainly what I have in mind here.) (Even aside from affecting non-text, in the newly popular component-oriented design, you typically don't want relative font sizing to leak between components.)

rimliu 6y ago

"Relative" and "Absolute" have their own definitions and by that definition "px" is indeed an absolute unit.

matsemann 6y ago
Not anymore, as most px units now is based on a reference px, a size determined based on screen density and viewing distance. That's why something rendered at 600px on an iphone takes almost all the width, even though the screen has more than double that in pixels. And when zooming, the reference px is zoomed. So the old reason for not using px and instead use rem doesn't apply. https://developer.mozilla.org/en-US/docs/Glossary/CSS_pixel https://developer.mozilla.org/en-US/docs/Glossary/CSS_pixel

wackget 6y ago

Yeah I came here to ask this. Using relative units for layout seems like a terrible idea. If you want to make your text a little bigger, your entire layout changes too. That's fine if it's something like text padding or paragraph margins, but stuff like border width, or dimensions of boxes? That seems weird. Browsers have been able to zoom pixel widths for years.