- From: Weston Thayer via GitHub <sysbot+gh@w3.org>
- Date: Fri, 10 Dec 2021 19:12:10 +0000
- To: public-css-archive@w3.org
Attaching some visuals from @scottkellum's samples since that's what helped the issue "click" for me:
| Desktop design | Mobile design |
| --- | --- |
|  *Visual design intent is read the big headline first, content next.* |  *Visual design intent is more content-first.* |
Now let's compare the desktop design at 100% zoom vs. 500% zoom:
| 100% | 500% |
| --- | --- |
| <img alt="Screenshot showing the h1 rendering at ~112px tall." src="https://user-images.githubusercontent.com/709153/145623681-be00b358-91f9-4644-ba0a-7eab286de27b.png" width="350" /> | <img alt="Screenshot showing the h1 rendering at ~66px tall." src="https://user-images.githubusercontent.com/709153/145623740-a927e5ef-3355-45e3-971f-b31a274a2cf6.png" width="350" /> |
The `<h1>` is still quite large at 500%, but it was pretty weird watching it slowly shrink as I zoomed in. Given, all the other content on the page was getting larger, but I was focused on the headline (Scott called this an "optical illusion" that undermines your sense that zoom is working).
But if I had my default browser zoom set to 500% and landed on the page for the first time, all the type is still quite large, so as long as I could still read the headline, I probably wouldn't notice anything was off — unless I started to zoom out.
Without a `zoom` unit, it seems like we have 3 possible actions:
1. Keep the desktop/mobile design hierarchy change and leave the "zooming UX" as-is
1. Violates [WCAG 2.1 SC 1.1.4](https://w3c.github.io/wcag/21/guidelines/#resize-text)
2. But assuming we've used `rem`s, a user can still force the text to scale if they know where the browser setting is. Although there are some edge cases on mobile (imagine a similar hierarchy change between mobile/watch. Not many mobile browsers allow adjusting base font size)
2. Change the visual design so there isn't a hierarchy change and make sure the zooming UX grows the headline
3. Option (1), but revisiting whether SC 1.1.4 is mapping to a real user need. https://github.com/w3c/silver/issues/506 suggests that text only needs to stay above a minimum visual size
@scottkellum do you know any sites in the wild that make a similar hierarchy swap? I just went through a bunch, but none had an extreme enough difference between big type on desktop / small type on mobile to cause this issue. Many have a headline shrink going from say 200% to 250%, but then it starts growing again, which seems way less awkward than the headline *never* growing.
--
GitHub Notification of comment by WestonThayer
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6869#issuecomment-991227215 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 10 December 2021 19:12:12 UTC