I remember a client project about three years ago where the designer insisted on a hero headline that hit the container edges perfectly on every device. No gaps. I reached for the old reliable FitText.js, but then the client started using a variable font that didn’t play nice with the library’s resizing logic. Total nightmare. I ended up writing a custom ResizeObserver script to manually calculate the font-size based on the scroll width. It worked, but it was 60 lines of JavaScript for a single heading. It felt “clever” at the time, but maintenance-wise? It was a debt bomb waiting to go off.
My first thought was to just hack it with CSS transforms—you know, scaleX() based on some viewport units. And yeah, it looked okay on my 5K monitor. But the second I opened it on a tablet, the aspect ratio went sideways and the text looked like it had been through a trash compactor. Not good. The real fix needed to be native, which is why the new CSS fit text properties are such a massive relief for those of us in the trenches.
The Death of FitText.js: Native text-grow is Here
As I saw in a recent update over at CSS-Tricks, Chrome Canary has started prototyping text-grow and text-shrink. We are finally moving away from magic numbers. This isn’t just about scaling; it’s about telling the browser, “Hey, figure out the space and make it fit.”
The syntax is incredibly clean. If you’re building modern WordPress themes, you can apply this to your heading blocks without a single line of external dependencies. This pairs perfectly with other modern layout tools, like when you’re working with native CSS masonry layouts or complex grid systems.
/* Using the new bbioon-hero-text utility */
.bbioon-hero-text {
/* Grow lines shorter than the container */
text-grow: per-line scale;
/* Shrink lines that overflow */
text-shrink: per-line font-size;
/* Optional: Set a cap so it doesn't get ridiculous */
max-font-size: 120px;
}The per-line value is the secret sauce here. It treats each line independently. The scale method stretches the glyphs themselves, which is great for certain display fonts, while the font-size method actually adjusts the size of the characters. It’s a much more robust approach than the vw hacks we’ve been using for years. You can see the full breakdown of the logic in Roma Komarov’s explainer.
Watch Out for the Accessibility Catch
Here’s the kicker: accessibility. If a user tries to enlarge their font size in their browser settings, a rigid “fit to width” rule might override their preferences. Browsers are still working out how to handle this gracefully. It’s a similar hurdle to what we see with native scroll-based animations—the tech is powerful, but you have to implement it responsibly. You can read more about standard text scaling behavior on the MDN docs for text-size-adjust.
Look, this stuff gets complicated fast, especially when you start mixing it with variable fonts and fluid typography. If you’re tired of debugging someone else’s messy CSS hacks and just want your site to work across every browser, drop me a line. I’ve probably seen (and fixed) it before.
The Technical Takeaway
- Native over JS: Always prefer browser-native properties like
text-growonce support lands to keep your bundle size small. - Method Matters: Use
scalefor artistic display text andfont-sizefor readable content. - Test Everything: Since this is still in the Canary/Experimental phase, always provide a fallback
font-sizefor browsers that don’t support it yet.
Leave a Reply