4 ms·

I wish the author had gone a bit further into em vs rem. I'm reading other articles on the topic but they're simply technical explanations and I'm still not cle

I wish the author had gone a bit further into em vs rem. I'm reading other articles on the topic but they're simply technical explanations and I'm still not clear on what features of the page are best designed using em or rem.

pabue 6y ago
Generally you want to use rem for setting the font-size of the elements and to controll overall spacing. em is often used for the padding of elements. For example buttons that exist in different sizes.
agloeregrets 6y ago
From an overall perspective, em: unit based on the font size of the element it is querying. rem: unit based on the font size of the body element. rem is helpful if you want to make an entire page scale uniformly if you change the base font size (imagine accessibility settings) while keeping the same proportions with padding to font size. em is great for things like buttons where you may want to make one class for `button.cool-button{ padding: 1em; font-size: 14px; &.xl{ font-size: 20px; }}` and then you can change the font size by setting the `.xl` Class on that button and the padding will go from 14px to 20px. One button, shared proportions.
- chrismorgan 6y ago
  Correction: rem is relative to the font size of the root element, which in HTML is <html>, not <body>.
chrismorgan 6y ago
Just to mess with your mind: in media queries and in the root element’s font-size declaration, em and rem mean the same thing, being the browser’s default font size, which is 16px in most browsers by default, but customisable in some browsers and different by default in some environments (e.g. I seem to recall Kindle using 19px). I call this unit the “browser em”, or bem. No one else really talks about it. One thing I haven’t investigated and probably should: does this unit depend on the language the document is specified in? (Because you can define different default fonts and sizes for different languages in at least Firefox.)
- LocalPCGuy 6y ago
  I would guess it does matter about the language, but likely because as the language changes the font itself may actually change. And different fonts would have different relative font sizes. But like you, I haven't investigated it enough to make a definitive statement about it.

pabue 6y ago

Generally you want to use rem for setting the font-size of the elements and to controll overall spacing. em is often used for the padding of elements. For example buttons that exist in different sizes.

agloeregrets 6y ago

From an overall perspective, em: unit based on the font size of the element it is querying. rem: unit based on the font size of the body element. rem is helpful if you want to make an entire page scale uniformly if you change the base font size (imagine accessibility settings) while keeping the same proportions with padding to font size. em is great for things like buttons where you may want to make one class for `button.cool-button{ padding: 1em; font-size: 14px; &.xl{ font-size: 20px; }}` and then you can change the font size by setting the `.xl` Class on that button and the padding will go from 14px to 20px. One button, shared proportions.

chrismorgan 6y ago
Correction: rem is relative to the font size of the root element, which in HTML is <html>, not <body>.

chrismorgan 6y ago

Just to mess with your mind: in media queries and in the root element’s font-size declaration, em and rem mean the same thing, being the browser’s default font size, which is 16px in most browsers by default, but customisable in some browsers and different by default in some environments (e.g. I seem to recall Kindle using 19px). I call this unit the “browser em”, or bem. No one else really talks about it. One thing I haven’t investigated and probably should: does this unit depend on the language the document is specified in? (Because you can define different default fonts and sizes for different languages in at least Firefox.)

LocalPCGuy 6y ago
I would guess it does matter about the language, but likely because as the language changes the font itself may actually change. And different fonts would have different relative font sizes. But like you, I haven't investigated it enough to make a definitive statement about it.