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
Jochem
Jochemβ€’15mo ago
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 well
Chimi
Chimiβ€’15mo ago
Thanks! I'll be sure to try harder searching for if my question has already been answered. Sorry about that.
Jochem
Jochemβ€’15mo ago
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
Chimi
Chimiβ€’15mo ago
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.
Jochem
Jochemβ€’15mo ago
unfortunately, that's the most common answer for accessibility, yeah :/ It's a complex topic with few good resources
neal mcguire
neal mcguireβ€’15mo ago
I'm trying to remember where, but I saw someone using something like calc(5vw + 1rem).
briancross
briancrossβ€’15mo ago
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:
/* Font sizes */
--fs-xs: 0.75rem;
--fs-small: 0.875rem;
--fs-base: 1rem;
--fs-large: 1.125rem;
--fs-xl: clamp(1.25rem, calc(0.5rem + 2.5vw), 1.5rem);
--fs-2xl: clamp(1.5rem, calc(0.5rem + 3vw), 2rem);
--fs-3xl: clamp(2rem, calc(1rem + 3vw), 2.5rem);
/* Font sizes */
--fs-xs: 0.75rem;
--fs-small: 0.875rem;
--fs-base: 1rem;
--fs-large: 1.125rem;
--fs-xl: clamp(1.25rem, calc(0.5rem + 2.5vw), 1.5rem);
--fs-2xl: clamp(1.5rem, calc(0.5rem + 3vw), 2rem);
--fs-3xl: clamp(2rem, calc(1rem + 3vw), 2.5rem);
Kevin Powell
Kevin Powellβ€’15mo ago
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/calculator
Utopia
Fluid type scale calculator
Fluid responsive design
Chimi
Chimiβ€’15mo ago
I need to look at clamp further as I've never used it before. Thanks a million everyone! 😎
Kayleberries
Kayleberriesβ€’15mo ago
10/10 would recommend clamp. Makes responsive design so much easier
Want results from more Discord servers?
Add your server