---
title: Fluid typography and block themes
description: Fluid typography in WordPress block themes is now easier with the latest Gutenberg update, allowing automatic scaling of font sizes across devices.
doc_version: current
last_updated: '2026-03-31T09:55:30.000Z'
date: '2022-08-05T13:18:26.000Z'
author: Rich Tabor
summary: Fluid typography in WordPress block themes is now easier with the latest Gutenberg update, allowing automatic scaling of font sizes across devices.
tags:
  - Design
  - Themes
  - WordPress
published: true
type: blog
url: /fluid-typography-block-themes
canonical: https://richtabor.com/fluid-typography-block-themes
id: 2342
---

Last year I shared a piece on fluid typography, in particular on [adopting a fluid type scale within WordPress block themes](/fluid-type-scale-theme-json/), using the [CSS clamp()](https://developer.mozilla.org/en-US/docs/Web/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](https://make.wordpress.org/core/2022/06/04/roadmap-to-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](/fluid-type-scale-theme-json/) 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](https://type-scale.com/) 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](https://websemantics.uk/tools/responsive-font-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](https://github.com/WordPress/gutenberg/blob/trunk/lib/block-supports/typography.php#L344-L351) within the [Gutenberg Github project](https://github.com/WordPress/gutenberg).

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.min`and `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](https://github.com/WordPress/twentytwentytwo/blob/trunk/theme.json#L198) — 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.

## Sitemap

[Full site index](/sitemap.md)