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

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:

1. Mobile overflow: A 42px heading on a 360px mobile screen occupies significant vertical space and can force long words to overflow their container.
2. 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:

1. Open DevTools and switch to responsive device mode.
2. 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.
3. 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, or read how theme.json colour presets work.