Is fluid/responsive typography a good idea, or horrible for accessibility?
A few times now I've used
calc()
in my CSS to create semi-responsive typography on pages. In particular, I've used this formula from CSS Tricks:
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
My use cases have been homepage heroes and CTAs (hybrids between buttons and cards - icons with text). Is this good practice in the name of responsiveness, or does it negatively impact accessibility? Should I be setting specific font-sizes through media queries instead? Thanks for any input on this π π10 Replies
I'm a big fan of Beck's approach: https://discord.com/channels/436251713830125568/1126828074835644456/1126885022037717023
afaik you should always make sure to use
rem
in your font size calculations, so that the user's font size setting can affect the size as wellThanks! I'll be sure to try harder searching for if my question has already been answered. Sorry about that.
no no, not at all, it's not quite the same question. There's still plenty of interesting things to be said about the accessibility aspect, which I'm afraid I'm not really qualified for
I suppose as long as you're not messing with the base font-size and using rem, it should be ok. It would probably be something that requires further testing.
unfortunately, that's the most common answer for accessibility, yeah :/ It's a complex topic with few good resources
I'm trying to remember where, but I saw someone using something like calc(5vw + 1rem).
Kevin addresses something similar to this in one of his videos. I donβt remember which one exactly but he uses clamp with a calc for the preferred value, adding a rem value to a vw unit (like Neal posted above). I find that you only really need responsive typography on large text like headings, as opposed to body text.
I did this on a recent project:
That looks like the old way of doing it, it's much easier now with clamp π
This is a nice tool for it (if you turn off the
use clamp
checkbox, it'll show you a similar solution to the one you had at the top.
https://utopia.fyi/type/calculatorI need to look at clamp further as I've never used it before. Thanks a million everyone! π
10/10 would recommend clamp. Makes responsive design so much easier