I have been working on a new post type for The Commonplace Post, featuring HUGE header text that I want to always: fit across the page and flow on one line. The Commonplace Post, July 2026 Issue Considering Fit Text, a typography option in WordPress Gutenberg. It seemed reasonable. According to the blurb under the setting, “The text will resize to fit its container, resetting other font size settings.” I learned the header text gets clamped to a micro font-size when testing how the page looks for users who may not run JavaScript. This explained why every-single-time the page loaded I would visually see the text grow and adjust with a flash of the smaller font-size, it was starting to drive me insane. page header while using fit text when JavaScript was disabled BUT there is no reason fitting text on a page, requires JavaScript! No reason at all. There are other options… No JavaScript Solution For a robust method use the parent container as the bounds for the text by setting container-type and using the container query length unit: cqi, which equals 1% of the container’s inline size. Read more about CSS Container queries on MDN. Combined with clamp(min, val, max) for the text, which clamps min, preferred, and maximum values. I applied both to the top section of my newspaper style by setting container-type: inline-size for the nameplate and clamping the text sizes relative to its parent. It took resizing and adjusting the font size numbers around from desktop to mobile for the header to look great. I recommend starting with val, work your way out to max, and last min. .news .flag { container-type: inline-size; } .news .flag .nameplate { font-size: clamp(1rem, 14.5cqi, 11rem); white-space: nowrap; } To note, you can accomplish close to the same effect using only clamp and the the viewport width as the preferred value between the min and max bounds. However, it is not as precise, as the first example. .text-fit { font-size: clamp(1rem, 6vw, 3rem); } For my use case, with items on either side of the nameplate, the minimal approach had overflowing text while testing and it sacrificed an edge-to-edge text fit on mobile. The irony is WordPress Fit Text uses the clamp() function. But between using JavaScript to dynamically set max-width and the default minimum text size as too small to read… I think it’s better to just use CSS alone especially when there’s support across modern browsers. Looking forward, at header styles, I want to add overlay stamps across the title (e.g., back issue, special edition) and with a good foundation, it will be a breeze. added new post type, newspaper using clamp() and cqi to auto-fit text