Saw two forum threads arguing about absolute vs. relative font sizing - one said em, one said rem, both had broken sites as proof

Was poking around a web design board and saw two different threads. One guy went all in on em units and his entire layout collapsed on mobile. Another swore by rem until he tested it on a user's browser with custom font settings and the text overlapped everything. Makes me wonder if there's really a winner or if it's just whatever breaks less for your specific audience. What's your go-to and what broke first before you settled on it?

2 comments

2 Comments

noahchen12d ago

@barbara399 hit the nail on the head about testing with zoom. My buddy Jake spent a week on his portfolio site using rem for everything, looked great in his browser, then his mom (who uses 125% zoom because she's got bad eyes) tried it and the nav buttons ended up stacked on top of his bio paragraph. He fixed it by mixing em for the nav component so the buttons scale together and rem for the page margins, but only after triple checking with a zoomed browser on his own machine. The worst part was he had to redo the whole media query breakpoints because they were all hardcoded to pixel values based on his default font size.

barbara39912d ago

Oh wow, I actually think everyone's missing the real issue here - it's not about em vs rem at all, it's that nobody's testing with user zoom or forced font sizes anymore (you know, the stuff accessibility tools do). I've seen perfectly fine rem layouts completely break when someone bumps their browser font up to 150%, and the same happens with em if you don't set a sensible base on the html element. Honestly, I just use a mix of both now - rem for global spacing and typography, em for components that need to scale together, and I always test with high zoom levels before calling it done. The real trick is setting a solid base font size and not assuming everyone's browser defaults are the same, which is where most of these "my site broke" stories come from in the first place.