Inverse text-sizing based on text-length with attr()

Text reflow on the web has an interesting relationship with Responsive Web Design. As a column gets smaller text wraps and becomes taller1. But for large format display text, that’s not always what you want2. What I’ve wanted for awhile now is a way to inversely size text based on the text length (where the font-size gets smaller as the heading gets longer). Images have the opposite problem, wide desktop images lose hierarchy as the viewport gets smaller. And then portrait images get too much hierarchy when they scale up. ↩ Large format display text wrapping on mobile can even cause accessibility issues, whether it’s cognitive issue with one word per line or a motor issue where long words break the container and cause horizontal scrolling. ↩

daverupert.com · daverupert.com