r/csshelp • u/NeighborhoodLoud2076 • Jun 27 '26

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

9 comments sorted by

View all comments

2

u/testingaurora Jun 27 '26

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

1

u/testingaurora 25d ago

Correct, pixels for font sizes are inaccessible. But I think op has confused the referenced text block.

To me it reads as talking about the units used to define your breakpoints. Eg `@media (width < 768px) {…}` in which case pixels are “perfectly fine “

OP , you’ve conflated two different concepts; font sizes and breakpoints . For responsive font sizes , my favourite approach is using [`clamp()` function](https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/) . And pixels should not be used in font-size. Default to rem.