CSS em and rem units

443 viewsOtherTechnology

I’m dumb. I watched some videos on it and maybe it’s just the way they talk or the way they explain it, but I don’t fully get why to use em and rem units vs pixels.

Note: I do use tailwind and am happy I don’t really have to think about it 🙂 but without it I pretty much always use pixels instead lol.

In: Technology

2 Answers

Anonymous 0 Comments

rem units are a bit easier to grasp and much more useful than px when dealing with zoom/scale on type.

The R in the name is _root_. Basically whatever the base size of the body is, that is a scale factor. So if you set font-size of the body to 10px, and the rem of some heading to 3.2rem, it will be like you set it to 32px.

Why do that? Because now your sizes will proportionately change if the user zooms the browser. Or if you have media queries changing the baseline size for screen width.

Em units are the worst. It’s like rem, but the relative baseline is the parent’s font size. So they compound as you nest elements and are hard to keep track of.

You are viewing 1 out of 2 answers, click here to view all answers.