Fluid typography in theme.json, and why inline font sizes break mobile, Pattern Paste

Canonical: https://patternpaste.com/blog/theme-json-fluid-typography/

Blog (https://patternpaste.com/blog/) Reference

# Fluid typography in theme.json, and why inline font sizes break mobile

How to configure clamp-based fluid typography in theme.json, why manual font overrides break mobile viewports, and how to structure portable type steps.

Jake 29 August 2026 2 min read

Setting custom pixel font sizes inside the block inspector breaks responsive layouts on smaller screens. When you assign an explicit font size like 56px to a heading in the editor sidebar, WordPress writes an inline CSS style attribute directly into the block markup. That fixed pixel value overrides viewport scaling, forcing a desktop-sized headline onto mobile screens until you write custom CSS media queries to fix it.

Modern block themes solve this globally through theme.json fluid typography. When enabled, WordPress compiles named typography steps into dynamic CSS clamp() functions that scale smoothly between mobile and desktop viewports without custom stylesheets.

## How WordPress calculates fluid clamp values#

When you enable fluid typography in theme.json, WordPress intercepts your font size declarations and compiles them into mathematical clamp() rules. The calculation uses minimum and maximum viewport thresholds to scale the font linearly between screen widths:

{
  "version": 3,
  "settings": {
    "typography": {
      "fluid": true,
      "fontSizes": [
        {
          "slug": "small",
          "size": "0.875rem",
          "name": "Small"
        },
        {
          "slug": "medium",
          "size": "1rem",
          "name": "Medium"
        },
        {
          "slug": "large",
          "size": "1.75rem",
          "name": "Large",
          "fluid": {
            "min": "1.25rem",
            "max": "1.75rem"
          }
        },
        {
          "slug": "x-large",
          "size": "2.75rem",
          "name": "Extra Large",
          "fluid": {
            "min": "1.75rem",
            "max": "2.75rem"
          }
        }
      ]
    }
  }
}

On render, WordPress outputs CSS custom properties on :root that define the dynamic curve:

:root {
  --wp--preset--font-size--small: 0.875rem;
  --wp--preset--font-size--medium: 1rem;
  --wp--preset--font-size--large: clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.781), 1.75rem);
  --wp--preset--font-size--x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 1.563), 2.75rem);
}

When a heading or paragraph uses the has-x-large-font-size class, the browser adjusts the rendered size continuously as the viewport changes width. No breakpoint jumps or device-specific media queries are needed.

## Configuring global fluid boundaries#

By default, WordPress calculates fluid curves between a minimum viewport width of 320px and a maximum viewport width of 1600px. If your site layout caps at a narrower container (for example, 1200px), you can define explicit viewport boundaries inside the settings.typography.fluid object:

{
  "version": 3,
  "settings": {
    "typography": {
      "fluid": {
        "minViewportWidth": "375px",
        "maxViewportWidth": "1280px"
      }
    }
  }
}

This prevents headline sizes from expanding beyond their intended proportions on ultra-wide desktop monitors while preserving readable proportions on mobile phones.

## Why inline font sizes break pattern portability#

When you paste a third-party block pattern or export a custom layout, inspect the block markup for hardcoded fontSize values:

<!-- wp:heading {"style":{"typography":{"fontSize":"42px"}}} -->
<h2 class="wp-block-heading" style="font-size:42px">Enterprise features</h2>
<!-- /wp:heading -->

This markup causes two distinct production issues:

- Mobile overflow: A 42px heading on a 360px mobile screen occupies significant vertical space and can force long words to overflow their container.

- Theme immunity: Because the inline style="font-size:42px" attribute has higher CSS specificity than theme presets, updating your theme's typography scale will not affect this block.

Well-structured pattern markup references the typography slug attribute instead:

<!-- wp:heading {"fontSize":"x-large"} -->
<h2 class="wp-block-heading has-x-large-font-size">Enterprise features</h2>
<!-- /wp:heading -->

By referencing the slug, the block automatically uses the active theme's fluid clamp() formula.

## Auditing typography scaling across viewports#

To verify that your site typography scales smoothly:

- Open DevTools and switch to responsive device mode.

- Drag the viewport slider slowly from 320px up to 1400px while inspecting primary headlines. The computed font-size in the Computed Styles panel should increase incrementally rather than jumping at arbitrary breakpoints.

- Search post_content in your database for style="font-size: or "fontSize":"[0-9] to identify blocks with hardcoded inline overrides.

Every Pattern Paste pattern relies on standard typography slugs rather than inline pixel sizes, ensuring headings scale fluidly on every viewport. Browse all 232 patterns (https://patternpaste.com/patterns/), or read how theme.json colour presets work (https://patternpaste.com/blog/theme-json-colour-presets/).

theme.json (https://patternpaste.com/blog/tag/theme-json/)Block themes (https://patternpaste.com/blog/tag/block-themes/)Tutorial (https://patternpaste.com/blog/tag/tutorial/)

Try the whole library

### £70 a year Save £50 against paying monthly

All 232 patterns and every variation, every theme download and everything we release next. What you copy is yours to keep.

Start free trial three days of full access on sign-up, no card. No automatic charge. (https://patternpaste.com/account/#plan)

## Read next

- Why does my WordPress block pattern look different from the demo? Find out which differences come from your WordPress theme, which reveal a broken pattern, and what to check before adding another CSS override. (https://patternpaste.com/blog/why-block-patterns-look-different-from-demo/) 6 September 2026

- theme.json colour presets, and why a pattern should never state a hex How WordPress turns a palette in theme.json into CSS custom properties, what breaks when a pattern hardcodes a colour, and the fallback chain that fixes it. (https://patternpaste.com/blog/theme-json-colour-presets/) 27 August 2026

All posts (https://patternpaste.com/blog/)