Re: [csswg-drafts] Browser zoom unit for accessibility [css-values-and-units] (#6869)

Yes, I think this is a common need, and one that will become increasingly more common as container queries become popular.

Just focusing on viewport, here are the graphs of various techniques to scale font sizes along with the viewport line in the background. Anything that matches or is steeper than the slope of that line will result in the font size going down as the browser is zoomed in.

![Graph of font size scaling along with viewport scaling with the squared off line of media queries, straight sloping line of clamp, and curved line of Typetura and interpolated values](https://user-images.githubusercontent.com/377189/147593696-50173503-3274-44d4-951f-4a28c9a1bea2.png)

Here is the same graph, but highlighting places where the font size either doesn’t scale, or scales counter to the direction of zoom as the slope of the viewport scaling is shallower than the steeper slope of the font size scaling.

![The same graph as before but highlighting the segments of the graphs where font size will either not zoom, or zoom out inversely to zoom](https://user-images.githubusercontent.com/377189/147593695-427ddd33-78b2-4334-b660-b8a823ab946c.png)

This is the issue people are discussing in [this issue here regarding WCAG SC 1.4.4](https://github.com/w3c/wcag/issues/1671).

This problem will get worse with element queries because people will take more advantage of container size to determine visual contrast between items, as I am doing in the demo I posted here. In order to achieve sufficient visual contrast at any particular instance in the demo I posted, I needed to have a slope greater than the viewport scaling. Running some tests, if a website like [The Atlantic were to translate their existing typographic hierarchy to a dynamic container derived one they would have the same scaling issue](https://demos.typetura.com/the-atlantic).

-- 
GitHub Notification of comment by scottkellum
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6869#issuecomment-1002226212 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 28 December 2021 18:15:22 UTC