The answer used to be absolutely yes because, if you used
px units, you prevented the text from being resized by the user at all.
But browser zoom is the default method for making everything bigger (including text) these days and it works great even if you use
But… Kathleen McMahon really digs into this and finds that it’s still worth setting all your type (both
line-height) in relative units because:
- setting type in
pxprevents browser settings from making font size adjustments (which some people definitely use) and
- setting type in relative units maintains greater design fidelity as users use browser zoom (which a lot of people definitely use).
Feels like we could use more information in this article.
For example, em work as a percentage multiplier, so a div with heading 2em and a sub div with the same 2em will quadruple your font size. It’s better to use rem, which will give consistent font sizes.
It really depends. I do not think using REM’s is really beneficial. There are several use cases where it is better to use em than rem. As the em is relative to parent div. For example a heading h2 in body tag vs a h2 inside the article tag can have different sizes.
The answer is no.
Relative units are a mathematical nightmare if you’re got reusable components. (How bigi s 2em of 1.3 em of 1.3em of 2em)
Pixels work fine, fit easily with design brieifs of container sizes and images and allow to ensure your headings and text remains constant regardless of the parent wrapper.
@Neville it doesn’t have to be a mathematical nightmare.
Now the math is super easy and you can also support users changing their font-size settings
I use rems for dimensional styling as well, it allows me to globally increase the size of my entire design if I target the root’s font size. I use it to make everything just a tiny bit bigger in mobile devices and also make it all smaller on a very specific desktop dimension range. So far I haven’t gotten into any issues but I wonder if anyone might have an argument against it.
My process/approach are to use
remfor the overall document typographic context; then
emrelative to a specific context like padding, superscript; when something is treated like an image
px(svg, elements as art, etc). Seems to work ok so-far, though I haven’t made a study of it.