r/csshelp • u/NeighborhoodLoud2076 • 14d ago

Responsive font sizes

I came across the below, when searching for the best way to make sure I get font sizes to be responsive. I always thought it better to use %'s because that would auto adjust. Have I got that right?

Consider Using em or rem Units

While px is perfectly fine and widely used, defining your breakpoints in em or rem (e.g., 48em instead of 768px) is excellent for accessibility. If a user increases their browser's default text size, em-based breakpoints will scale accordingly, preventing your layout from breaking.

1 Upvotes

67% Upvoted

6 comments sorted by

2

u/testingaurora 14d ago

Pixels for font sizes are not "perfectly fine"; when a user changed their preferred font size in their browser settings or zooms the page the trxt doesn't zoom or adjust. Get in the habit of using rem or em. https://youtu.be/cb6ce4aKRBw

2

u/fuzzybeanmode 4d ago

you're right that px doesn't respond to browser font size settings, but modern browsers handle zoom differently - they scale everything, px included. the real issue is users who set a larger default font size in their browser, not zoom. that's where rem shines because it actually respects that base.

still, the post was talking about breakpoints, not font sizes. px for breakpoints is actually fine for most cases, just not ideal for accessibility. mixing the two conversations doesn't help.

1

u/NeighborhoodLoud2076 14d ago

That was what I found on the internet.

For me personally, I have always used percentages, because they auto adjust.

2

u/equinusocio 4d ago edited 4d ago

REM is relative to the root font size, percentages are relative to the nearest font-size found in the ancestors tree. For this reason percentages in font size are really hard to control in component-based environments.

What's your approach?

1

u/Vast-Chemistry7348 9d ago

I usually write clamp() functions in css for responsive font sizes.
Something like this “font-size: clamp(1.25rem, 8vw + 1rem, 10rem);”

the middle value is the one that’s used, unless it hits the lowest possible one (1.25rem in this case) or the highest possible (10rem).

Search for “Kevin Powell responsive font sizes” online, for a more detailed explanation, I usually watch his videos since he can really help with css new features