Adding Fluid Typography Support to WordPress Block Themes

WordPress 6.1’s Fluid Typography: A Theme Author’s Wiring Guide

Fluid typography is the practice of scaling font properties smoothly with the viewport rather than jumping between fixed sizes via media queries. The CSS clamp() function is a common way to implement it, but WordPress 6.1 brings native support straight into the Block Editor, allowing theme authors to enable it declaratively from theme.json without hard-coding CSS rules.

The feature landed first in the Gutenberg plugin (version 13.8) and then became part of WordPress Core in 6.1. Its intent is to make fluid type design-driven at a theme level: you can register fluid font sizes once and apply them to any element or block via the editor’s typography controls. Notable benefits include letting theme authors activate the scaling behavior without touching CSS, applying it to discrete entities like blocks, and preserving flexibility around font size units ranging from px and rem to em and %.

Alongside this, select blocks gained new typography and spacing settings in the editor, reducing the need to style those elements from raw CSS. As of this writing, units are limited to rem, em, and px.

Implementation happens in theme.json, the block-theme configuration file. The first step is to opt into fluid type at settings.typography:

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

Let’s say your layout uses contentSize: 768px and a wide size of 1600px. Rather than writing a raw clamp() string for a large font, you declare the range inside the font size itself. The new fluidSize property holds min and max values:

"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [ 
      {
        "size": "2.25rem",
        "fluidSize": {
          "min": "2.25rem",
          "max": "3rem"
        },
        "slug": "large",
        "name": "Large"
      }
    ]
  }
}

That automatically creates a “Large” font setting that scales from 2.25rem up to 3rem. Behind the scenes, WordPress converts those values into a CSS custom property:

.has-large-font-size {
  font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);
}

…and ties it to a selector, say for a Paragraph Block:

<p class="has-large-font-size">...</p>

You can verify the behavior by inspecting the generated styles or checking that the preset variable resolves to a fluid clamp. For example, a 36px font at 768px expanding to 48px at 1600px would take this form:

/* 36px @ 768px increasing to 48px @ 1600px */
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);

If you prefer rem, the calculator would output an equivalent clamp:

/* 2.25rem @ 48rem increasing to 3rem @ 100rem */
font-size: clamp(2.25rem, calc(2.25rem + ((1vw - 0.48rem) * 1.4423)), 3rem);

The min value in theme.json applies up to and including the lower viewport boundary, after which the font size increases until the max takes over once the viewport hits your upper bound.

Two Editing-Working Examples

Adding a New Fluid Preset

Start with a current version of Twenty Twenty-Three (or any block theme plus a Gutenberg plugin build from at least 13.8) and opt into fluid type in theme.json:

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "768px",
      "wideSize": "1600px"
    },
    "typography": {
      "fluid": true
    }
  }
}

Next, add font size presets to the same file:

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "768px",
      "wideSize": "1600px"
    },
    "typography": {
      "fluid": true
      "fontSizes": [
        {
          "name": "Normal",
          "size": "1.125rem",
          "fluid": {
            "min": "1rem",
            "max": "1.5rem"
          },
          "slug": "normal"
        }
      ]
    }
  }
}

If everything is wired correctly, you’ll see the “Normal” font appear as a pickable choice inside the Block Editor’s typography panel:

When you apply that preset to a block, saving the page yields the expected markup:

The front end receives the generated CSS rule:

Digging into the --wp--preset custom property proves that the value is indeed a clamp():

Excluding a Preset from Fluid Scaling

You can also opt individual presets out of the fluid behavior. After enabling the global flag, works on a layout with a wider width:

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "768px",
      "wideSize": "1000px"
    },
    "typography": {
      "fluid": true
    }
  }
}

Register the following font sizes:

{
  "version": 2,
  "settings": {
    "typography": {
      "fluid": true,
      "fontSizes": [
        {
          "size": ".875rem",
          "fluid": {
            "min": "0.875rem",
            "max": "1rem"
        },
          "slug": "small",
          "name": "Small"
        },
        {
          "size": "1rem",
          "fluid": {
            "min": "1rem",
            "max": "1.5rem"
          },
          "slug": "normal",
          "name": "Normal"
        },
        {
          "size": "1.5rem",
          "fluid": {
            "min": "1.5rem",
            "max": "2rem"
          },
          "slug": "large",
          "name": "Large"
        },
        {
          "size": "2.25rem",
          "fluid": false,
          "slug": "x-large",
          "name": "Extra large"
        }
      ]
    }
  }
}

Note that the “Normal”, “Medium”, and “Large” presets include a fluid object, whereas the “Extra Large” one opts out entirely by setting it to false:

The Gutenberg style engine converts each respective setting into a clamp() — or a fixed value when the fluid flag is off:

--wp--preset--font-size--small: clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.24), 1rem);
--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.48rem) * 0.962), 1.5rem);
--wp--preset--font-size--large: clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem);
--wp--preset--font-size--x-large: 2.25rem;

Inspecting front-end CSS shows that .has-x-large-font-size lacks the fluid treatment:

Exposing the variable confirms that --wp--preset--font-size--x-large stays at a static 2.25rem.

Adoption and Reacions

A survey of block themes in the official directory shows familiarity with clamp-based fluid sizing was already reasonably common (over half of the 146 checked used it for font-size), but only a handful — Pixl, Block Canvas, Disco, Rainfall, Wei, Frost, Twenty Twenty-Three, and the TT2 Gopher Blocks demo — register the new fluid typography feature in theme.json.

Developer feedback in the community has been generally positive. Rich Tabor calls it “a pretty big experience win” for both site builders and content readers. Ramon Dodda highlights that this ease of use is the core value-add given theme.json already accepted fluid values:

Contrast that idea with font sizes that respond to specific viewport sizes, such as those defined by media queries, but do nothing in between those sizes. theme.json already allows authors to insert their own fluid font size values. This won’t change, but this PR offers it to folks who don’t want to worry about the implementation details.

Others urge caution. Jason Crist (Automattic) argues that fluid typography “should not just be enabled by default,” noting that its configuration is “an important design decision that should be made carefully.” Quoting Matias Ventura:

Status and Open Questions

Fluid typography remains an area of active development. Theme authors who want to use it before the tooling matures should be prepared for changes downstream, especially the following two GitHub issues: tracking theme.json settings and relevant block-support changes. Additional effort continues on broader typography features and design tools, with the typography tracking ticket and related issue list being the best places to follow developments.