Last year I shared a piece on fluid typography, in particular on adopting a fluid type scale within WordPress block themes, using the CSS clamp() function. The method I experimented with is interesting in that it uses a type scale, then calculates the fluid type values for each font size within the theme’s theme.json file.

While a bit heavy-handed, it did the trick — but now we don’t need this anymore. As of the latest version of the Gutenberg plugin (and the upcoming release of WordPress 6.1) the block editor will handle most of this for us, baking in a way for themes to opt into fluid typography out-of-the-box.

Notice how all the typography (heading and body font sizes) adjust when I shrink the viewport.

Fluid typography & type scale

Fluid typography describes how a site’s font sizes adapt to changes in screen size. I.e. scaling up, or down, based on the minimum and maximum values assigned to the style.

A type, or typographic, scale is a system of font sizes across that establish a harmonious hierarchy across typographic elements of a design. Combining fluidity and scale, a site’s typography instills uniformity and leads to clearer communication. While a personalizable type scale has not been implemented in this initial push, theme authors can set minimum and maximum size values for each font size, enabling the type to scale fluidly across screen width.

I do think the block editor will iterate towards a simplified method of defining a site’s typography with a type scale, but for now theme authors should leverage a tool like Type Scale to do it manually.

Supporting block themes

First off, a theme needs to opt into fluid typography by assigning the settings.typography.fluid theme.json value to true, like so:

"settings": {
	"typography": {
		"fluid": true
	}
}

Then, within each of the settings.typography.fontSizes entries, add an fluid entry, with min and max values assigned to it. Here’s an example of the large font size:

"settings": {
	"typography": {
		"fluid": true
	},
	"fontSizes": [
		{
			"size": "3rem",
			"fluid": {
				"min": "3rem",
				"max": "6rem"
			},
			"slug": "large",
		},
}

It’s worth noting that only px, em and rem units are currently supported. And ideally, theme authors should use rem units, as this leads to a more accessible site. The rem unit refers to the root element’s font size, and by using rem for typography, the site’s type will scale based on the browser’s default font size. Using those theme.json values, we have the following CSS variable output to the front-end and block editor:

--wp--preset--font-size--large: clamp(3rem, 3rem + ((1vw - 0.48rem) * 1.592), 6rem);

Which is the result of these values:

--wp--preset--font-size--{slug}: clamp({fluid.min}, {fluid.min} + ((1vw - 0.48rem) * 1.592), {fluid.max});

The actual fluidity formula is based on this fluid-responsive font-size calculator, but essentially the rate of change is based on the viewport dimensions that the font size should be changing across. If you’re curious for the actual calculations, you can find them within the Gutenberg Github project.

Now add the fontSizes.fluid.min and fontSizes.fluid.max values to each of the fontSizes within the theme.json file and you’re off to the races.

Fluidity for the win

As one of the bigger efforts towards making publishing beautifully rich pages in WordPress, fluid typography is a pretty big experience win for both the folks building with WordPress — and those consuming the content. It’s also a part of making WordPress more powerful, while not more complicated (which we all know is quite the challenge). And for those of you using these block themes (not just authoring), it’s worth noting that the font size interface has not changed. Fluid typography just works. Actually, I think it works great. 

A small caveat

I’ve gone ahead and put together updates for my existing themes, Wei and Wabi — though I did find one caveat.

In order to opt into fluid typography, not only are the fluid.minand fluid.max values required to be px, em, or rem units — but so are the existing size values. If an existing block theme has opted to use the clamp() function as a font size value (like TwentyTwentyTwo does — as well as many other block themes), there’s not a clear path to opt into fluidity. Any site that does not update to WordPress 6.1, but does update the theme, would loose the clamp() size that’s in place, while not receiving the new fluid typography feature. I’m not confident why this limitation is in place, as the size value is not used to calculate the fluid typography value. I’d almost treat the size as a fallback, for when fluidity is not supported (or turned off).

Let me know what you think of the new fluid typography bits that are coming out in WordPress 6.1.