# 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.

Published 29 August 2026 by Jake at Pattern Paste.
Canonical: https://patternpaste.com/blog/theme-json-fluid-typography/
Tags: theme.json, Block themes, Tutorial

---

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:

```json
{
  "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:

```css
: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:

```json
{
  "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:

```html
<!-- 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:

```html
<!-- 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](/patterns/), or read [how theme.json colour presets work](/blog/theme-json-colour-presets/).*