- From: Scott Kellum via GitHub <sysbot+gh@w3.org>
- Date: Fri, 10 Dec 2021 20:57:30 +0000
- To: public-css-archive@w3.org
Thanks @WestonThayer
These examples aren’t quite as dramatic as the demo above, but at higher zoom levels and smaller viewport sizes, the typographic hierarchies tend to flatten out. The difference is that in the example I shared this flattening of hierarchy happens fluidly every time the page is scaled. In the below examples, if these were fluid headlines, you would see the same effect with the headlines _“Don’t be fooled: The Supreme Court’s Texas abortion decision is a big defeat for Roe v. Wade_ in Vox and _“Chaotic footage captures violent melee at Atlantic City casino”_ in the NY Post.
<table>
<tr>
<th>Website</th>
<th>100% zoom level</th>
<th>200% zoom level</th>
</th>
<tr>
<td><a href="https://www.vox.com/">Vox</a></td>
<td>
<img width="1305" alt="Vox Media at a 100% zoom level" src="https://user-images.githubusercontent.com/377189/145638051-6710059f-14f2-479c-b225-22f6d1e0ccea.png">
</td>
<td>
<img width="1305" alt="Vox Media at a 200% zoom level and flattened typographic hierarchy" src="https://user-images.githubusercontent.com/377189/145638143-f155bad7-26c5-49a9-8935-4d2e4e0792a5.png">
</td>
</tr>
<tr>
<td><a href="https://nypost.com/">NYPost</a></td>
<td>
<img width="1305" alt="NY Post at a 100% zoom level" src="https://user-images.githubusercontent.com/377189/145638298-6e38ecc3-e931-46c4-86b8-91f98c662ad3.png">
</td>
<td>
<img width="1305" alt="NY Post at a 200% zoom level" src="https://user-images.githubusercontent.com/377189/145638388-108f03a0-8009-416f-ad8f-ec61dc69cd01.png">
</td>
</tr>
</table>
--
GitHub Notification of comment by scottkellum
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6869#issuecomment-991288325 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 20:57:33 UTC