Fluid Typography for WordPress Block Themes

The latest version of Gutenberg and the upcoming WordPress 6.1 release offers block theme builders a new option for building out a fluid type scale.

Offering end users readable font sizes that adapt to different screen sizes is a win, and WordPress’s initial implementation is suitable and ready to use. Previously, builders were encouraged to use CSS clamp() directly as their "size". Now, the clamp() is calculated for you. Let’s dig in.

First, to opt into using fluid typography, you have to set "fluid": true in your theme.json

{
	"version": 2,
	"settings": {
		"typography": {
			"fluid": true
		}
	}
}
Code language: JSON / JSON with Comments (json)

Once you’ve enabled fluid typography, WordPress uses a set clamp() calculation to generate a series of styles for all the default font sizes.

--wp--preset--font-size--small: clamp(0.75rem, 0.75rem + ((1vw - 0.48rem) * 1.442), 1.5rem);
--wp--preset--font-size--medium: clamp(0.84375rem, 0.84375rem + ((1vw - 0.48rem) * 1.623), 1.6875rem);
--wp--preset--font-size--large: clamp(1.3125rem, 1.3125rem + ((1vw - 0.48rem) * 2.524), 2.625rem);
--wp--preset--font-size--x-large: clamp(1.75rem, 3vw, 2.25rem);
Code language: CSS (css)

You can customize any of these font sizes within your theme’s theme.json.

{
    "version": 2,
    "settings": {
        "typography": {
            "fluid": true,
            "fontSizes": [
                {
                    "fluid": {
                        "min": "1.5rem",
                        "max": "2rem"
                    },
					"name": "Large",
					"size": "1.5rem",
                    "slug": "large"
                }
            ]
        }
    }
}
Code language: JSON / JSON with Comments (json)

A few things to keep in mind when incorporating fluid typography settings:

• size – the preferred size and will default the min value. Right now, you can match your min value.
• min – the smallest font size and will start scaling below 768px.
• max – the largest font size and will begin scaling above 1600px.
• The default scale factor is 1
• The allowed units for fluid type settings are: px, em, and rem (recommended)
• You are encouraged to use rem units. Other units will impact accessibility when and if a user zoom’s their browser text.
• Future iterations of Gutenberg, and in turn, WordPress core, will likely allow builders to adjust targetted media queries and even the scale factor.

We recently incorporated fluid typography into our own Frost theme. Check out this demo page and see it all in action. Also, be sure to provide any feedback to the Themes Team.

As always, let’s continue the conversation and let me know what you think: @dcook.