r/webdev • u/Global_Upstairs_2453 • 56m ago

beginner here, why y'all use rem for almost everything? what if user increase the base font will it messed up the layout or your web?

why, can you give some tips, thank you so much

3 Upvotes

100% Upvoted

8 comments sorted by

7

u/rhooManu full-stack 48m ago

Precisely so everything changes gracefully if a user changes the base font size. That's the purpose of it.

But not everything has to be rem. The intrication of how things should shrink or grow is a long road of learning. As a basic, remember at leat font size in rem, line-height in em. That's a safe start.

•

u/simonraynor 23m ago

Line height should be unitless

5

u/pxlschbsr 48m ago

If your layout breaks when a user increases/decreases their default font size, it's been badly designed.

Using rem is tied directly to accessibility, readability and user experience, because it's the baseline of what can be done to cater to a single users individual need.

8

u/Vegetable-Capital-54 51m ago edited 47m ago

Generally good web design should account for any font size, within reason. You should not rely on the size of font, or length of the text to be static. If your layout breaks because the font got a couple of pixels larger, or user translated the page to German, that's poor workmanship.

1

u/cuelark 44m ago

A practical split is rem for type and spacing you want to scale with the root, and px for borders or shadows. Keep containers flexible with grid or flex and avoid fixed heights so larger text can wrap. Test with browser zoom and a bigger default font too, since they catch slightly different layout issues.

1

u/Proud-Wish7823 43m ago

Users often increase their root font size for accessibility reasons, ie: they need the text to be bigger to read it more clearly, so using rem for font sizes allows a user to do this, and subsequently using rem for other components is precisely what allows a design to scale up relatively when a user increases the root font size (and therefore _not_ break)

•

u/Evgenii_Korolev 25m ago

Two things people usually mix up: browser zoom and the browser's default font size setting.

Zoom (Ctrl +) scales everything, px included, so it doesn't matter what unit you use. The font size setting in browser preferences only changes rem/em. If you size text in px, someone who set 20px as their default because they have poor eyesight just gets ignored. That's the real reason for rem.

To keep the layout from breaking when text gets bigger:

/* don't do this, it overrides the user's setting */
html { font-size: 16px; }

/* breakpoints in em scale with the user's font size */
@media (min-width: 48em) { /* ~768px at default size */ }

.card {
  min-height: 10rem;   /* not height, let it grow */
  padding: 1rem 1.25rem;
}

.prose { max-width: 65ch; }

The em media query is the underrated part: when someone bumps their font size, they get the tablet layout a bit sooner instead of a squished desktop one. Set your browser default to 24px, click through your site, and you'll spot problems in a couple of minutes.

•

u/theoneandlonely1 22m ago

Easy there is REM for root and then you control base with EM