Kevin Powell - Community•10mo ago

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•10mo 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

ChimichangaCop•10mo ago

Thanks! I'll be sure to try harder searching for if my question has already been answered. Sorry about that.

Jochem•10mo 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

ChimichangaCop•10mo 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•10mo ago

unfortunately, that's the most common answer for accessibility, yeah :/ It's a complex topic with few good resources

neal mcguire•10mo ago

I'm trying to remember where, but I saw someone using something like calc(5vw + 1rem).

briancross•10mo 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•10mo 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

ChimichangaCop•10mo ago

I need to look at clamp further as I've never used it before. Thanks a million everyone! 😎

Kayleberries•10mo ago

10/10 would recommend clamp. Makes responsive design so much easier

Gaming

Programming

Is fluid/responsive typography a good idea, or horrible for accessibility?