Recent advancements in CSS, specifically with Chrome Canary 145, introduce innovative properties namely <code>text-grow</code> and <code>text-shrink</code>. These properties are designed to allow text to automatically adjust and fit the widths of their containers, offering a more seamless approach to responsive design.
The new properties support a variety of fit targets and methods, allowing for either per-line or consistent text fitting. Methods of scaling include options such as scale, scale-inline, font-size adjustments, and letter-spacing modifications. This allows web developers to achieve dynamic text resizing without resorting to JavaScript solutions or complex CSS workarounds, particularly enhancing typographic responsiveness.
Despite the promising potential, there are remaining accessibility concerns, particularly regarding the enlargement of font sizes and how these changes interact with existing web standards. Additional questions are also being raised about how these properties will function in relation to paragraph endings, line-heights, and inline images. The feature is still under early discussion within the CSS Working Group, indicating that while full implementation is yet to be seen, these properties herald a significant shift toward more efficient and responsive web design techniques.

Collections

Chrome Canary 145 introduces experimental CSS properties `text-grow` and `text-shrink` that enable automatic text resizing to fit container widths. These properties support multiple scaling methods including font-size adjustments, letter-spacing, and inline scaling, with options for per-line or consistent fitting. While promising for responsive typography without JavaScript, accessibility concerns remain around font enlargement and interactions with line-heights, paragraph endings, and inline images. The feature is in early discussion at the CSS Working Group.

New CSS Properties for Responsive Text Sizing: text-grow and text-shrink

I mean I really like the concept, because who hasn’t wanted this ability with CSS?
I would love to be able to fine tune my text.
Also I have Q’s about accessibility too, this will be interesting to see play out.