Hello all.
I’ve been trying different ways to make font flexible across devices, and I’m interested in how others are doing this.
I’ve seen some developers use vw units, others rely on media queries, and now there’s clamp() which seems really flexible. But I’m not sure which is best in terms of performance and accessibility.
For instance, say anything like:
font-size: clamp(1rem, 2.5vw, 2rem);It works well for body language, but occasionally it feels a little contradictory for url.
What’s your go-to approach for responsive font sizing in CSS? Do you stick with media queries, use a utility framework like Tailwind, or go fully fluid with clamp() or calc()?
I’d like to see some example or hear your thoughts!
You should always get using dream or em models for fonts, in my opinion. Then you can use multimedia queries to find the correct breakpoints. Not really understood how lock is used to sizing fonts. To be honest, I think it is a little excess. Just take a look at how systems like css use it as examples.
Here are a few good watches on the subject, though I’m certain would have some exciting insights…
In that first film, Kevin Powell seems to have covered most of my thoughts, aside from one thing that I believe most people don’t. Because my phone’s body language is so much harder to read, I need it to truly become larger than it would be on a desktop. In my opinion, scaling between an upper and lower collection is ineffective for accessible body language.
For things like headings etc that have larger sizes then that’s ok to scale up and down with vw units and clamp() (and you can use something like one of the around to get optimal results).
Use lock for things like headings and another larger word structures in your media queries to make things simpler and utilize browser variables for things like headings and another larger word structures. As for body language, I don’t really feel the need to have it level up and down constantly as I’ve mentioned, but more important to me would be accessible line lengths. Don’t let your line lengths become too long; two or three media queries should suffice for most situations ( regarding font-size ).