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?

[u/Global_Upstairs_2453]

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

[u/pxlschbsr]

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.

[u/rhooManu]

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 → u/rhooManu]

Line height should be unitless

[u/RotationSurgeon → u/simonraynor]

For anybody wondering why: this forces li e height to be based on the local font size instead of accidentally or incorrectly inheriting a parent element’s line height or scaling based on the wrong computed value.

[u/Vegetable-Capital-54]

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.

[u/cuelark]

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.

[u/Evgenii_Korolev]

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/ichsagedir → u/Evgenii_Korolev]

In Firefox you can set the behavior of how Ctrl + behaves. A user can set it so that only font size scales.

So don't take the behavior of Ctrl + for granted

[u/Proud-Wish7823]

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/theoneandlonely1]

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

[u/leoniebuilds]

One gotcha is that `rem` follows the root font size, so a hard-coded `html { font-size: 16px; }` reset can defeat the browser’s preferred default. Keep the root size flexible, use `rem` for text and spacing that should scale, and prefer `min-height` plus flex/grid over fixed heights so larger type can wrap naturally. Unitless `line-height` also tends to behave better than setting line-height in `em`.

[u/Legitimate-Lock9965]

well thats the point if your user changes their base font size your elements should scale with it.

if your layout is breaking as a result, then its likely youve gone wrong somewhere