Adam Argyle made a post on Bluesky today announcing a new property called text-grow is now available in Chrome Canary 145+. Much of the folks I follow there have been very excited about it. But I’m here to tell you to be careful.
About fit text
The concept of fit text is not new. The idea is that the size of the text will adapt to each line such that every line fills the width of the container. It’s sort of like text justification, but instead of adjusting the spacing between words and letters, it adjusts the size of the text itself. Here’s the video from Adam’s post:
Lea Verou asked around the internet to get use-cases for the behavior and while there’s no shortage of reasons why someone might want it, this calls for the Jurassic Park meme.
Accessibility awareness
Any time that we mess with the size of text, it makes me think of how my parents have made changes in their devices to set the text size for it to be more legible. I think about how the text we enter into our experiences is not necessarily the text that another user will see after translating it. It drives the point home that the less we try to control how text appears, the better the experiences are for the widest audience.
In Adam’s post on his website, he’s linked to several resources. One of them is the discussion about adding this feature to CSS. I want to call out some of the quotes from the discussion specifically regarding accessibility:
— frankelavskyI just finished a research project on personalization and accessibility (under review) and the most common action taken by people who are considered low vision is to customize text size. Inability to change text size is a pretty significant barrier for many people. Meta-analysis research from 2020 estimates that around 600 million people worldwide would be considered on the spectrum of “low vision” to blind, which was roughly 8% of the world population in 2020. These numbers are expected to grow, due to compounding socio-economic factors, by 2050. This isn’t just a small slice of people.
— yatilMaking text dependent on the viewport has always been problematic for accessibility, this is well documented. This is why we usually advise not to use clamp or vh/vw units in font sizes. It just overrides user preferences unnecessarily.
The only way this could pass muster is to require browsers to include an opt-out to the behavior. Or to ignore it when users zoom in, which would defeat the purpose of the proposal.
I second Patrick’s pointer at LVTF and general W3C horizontal review. It might be good to generally outline when you get specific accessibility input to ensure that proposals are feasible to implement so that all users can use them.
The explainer mentions that there’s still an open question about accessibility for this:
If an end-user tries to enlarge font size, UAs should not fit enlarged lines to the container width. Is minimum-font setting enough?
My worry is similar to the one I have with folks reordering elements visually with CSS. Just because we have CSS technologies, doesn’t necessarily mean that they should be used in any situation. It’s not often that folks really consider the impact of every CSS decision. The large majority of developers are just picking the first solution that works and move on. Taking a moment to consider how our decisison affect more than us is a fading responsibly.
Maybe not for screens
All that said, I think this can be used responsibly. I think for folks using CSS for print media, this could be a useful tool since after text is printed there’s no way of having user settings affect it. Many of the folks that provided visual examples in Lea’s post providing media meant for printing. In reading some of the other replies, it really looks like many of the use-cases are for non-web things. This example is from Kris des Chacals asking for this property for use in OBS.
Maybe the problem is that CSS is becoming too powerful and now we want to use it for everything. I know I do. 😅