a11y issue with fluid typography

[mayank99]

currently, the fluid font sizes are defined as follows: https://github.com/argyleink/open-props/blob/ed5a83da2f497a180b296b1eed4ca3259db82e5f/src/props.fonts.js#L53-L56

this can cause a WCAG failure when trying to zoom. (see more details)

from what i understand, this issue is because of the vw used in the middle part of the clamp. if this is paired with a combination of vw + rem, then it should fix the issue. an example (values are random):

- --font-size-fluid-0: clamp(.75rem, 2vw, 1rem);
+ --font-size-fluid-0: clamp(.75rem, .75rem + 0.5vw, 1rem);

to get the actual values, a generator like utopia.fyi could be used, to tailor the values to the closest of what is currently offered.

---

the same idea could also be applied to fluid spacing: https://github.com/argyleink/open-props/blob/ed5a83da2f497a180b296b1eed4ca3259db82e5f/src/props.sizes.js#L20-L29

[argyleink]

yo, thanks for the thoughts and help offering!

i'm very aware of clamp and it's ability to compete with zoom. I'm also super familiar with Utopia. here's a few thoughts / where I'm at:

1. there's a lot of preference in fluid sizing. i def don't expect everyone to love Open Prop's take.
2. i personally don't like the way Utopia's feel when in use (heh, preferences coming into play)
3. yes, having a viewport unit in the middle of a clamp can be negative to zoom in that it'll just calc its way into tiny doom text, and the work around is to ensure a minimum of 1rem in that middle query. The open props fluid sizes naturally don't go below 1rem, it's the minimumm / first value passed. Except for fluid-size-0 which is an exception, just as font-size-0 is, they should be used with care because it'll be some tiny text. tldr; the minimum is built into the clamp and so it wont scale below.

All that to say, from my testing on these there isn't an accessibility issue and if folks like Utopia they can go snag it and overwrite / not import the open props ones.