HOW TO USE REM
Is "rem" really a responsive unit? I tried using rem on a project but the size of the texts remain the same as the screen gets smaller. It just works same way as px. Anytime I search, people keep saying rem is a responsive unit. So how do I use it properly?
6 Replies
no, rem is not a responsive unit.
but the advantage of rem over px is that you respect the prefered default font-size of the user.
By default, 1 rem is 16px, but a user can choose (in the OS) to adjust this number.
if you want a responsive unit, you can use viewport or container units. In combination with a clamp() function you can give it a minimum and maximum value
If you have some time, I would recommend this article. It deep dives into fluid typography with css clamp
https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/
Smashing Magazine
Modern Fluid Typography Using CSS Clamp — Smashing Magazine
We’ll explore fluid typography principles, use-cases, implementation with CSS clamp() and an interactive fluid typography calculator.
Wow, Thanks. What if I use vw, does it respect the user's default font-size?
it does not
well, if you combine rem + vw in in the middle part of the clamp, it kinda does a bit
yeah. It does always require a rem or em component for the font to respect the user's custom font size though