What is the best practice for responsive font resizing?
So, as far as i know I should use the
rem unit for fonts to not interfere with users preferences. But what should I use for dynamic font resizing? Like there will be a difference between the size of the font on desktop and on a mobile phone. AI suggested to do something like this: font-size: calc(! * @)
Where:
! - default size like 1.5rem etc.
@ - scale factor determined by the vw unit. Something like 0.5vw etc.
Like, I tried that and it for sure works, but is it a good method ?4 Replies
It is for sure a recommended method, it's called "fluid typography". Rather than using
calc you'd typically use clamp which you can take a look at here https://developer.mozilla.org/en-US/docs/Web/CSS/clamp. It increases and decreases the font size relative to the window size and as a bonus removes the need of using media queries for adjusting font sizes on the different varients of screen sizes.MDN Web Docs
clamp() - CSS: Cascading Style Sheets | MDN
The clamp() CSS function clamps a middle value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value.
Oh, I see that's a great method for sure but do I have to use
vw units as the middle value ? Cause as far I know I should place there my prefered value and with vw I heard that there can be some issues
I would rather use the rem tbh
@snxxwyy
Well I've answered my question by myself
I can't, I'm forced to use the vw unit@Piesz you heard correctly, you should always include at least a
rem component
you can use math for the middle component though, so you can do something like clamp(1rem, 1rem + 1vw, 2rem)
if you use purely vw as a value, you are correct in assuming that not using rem ignores a user's set font-size preference, which is a major accessibility issue^^
In regards to "I'm forced to use the vw unit", you don't have to use it but it's what allows the element to scale with the window size.