Learning to Apply Fluid Typography via Theme.Json

Written by Tinjure WP Posted on

Notes: This post is part of understanding new features in full site editing (FSE) interface. This learning post is still in active development and updated regularly.

Fluid typography is described as “a fancy way of describing font properties, such as size or line height, that scale fluidly according to the size of the viewport“. When this feature is used in a site, the fluid font adopt with view port size; progressively growing larger in wider view port and smaller when the view port decreases.

Fluid typography has been recently added to the Gutenberg 13.8, which are expected to be included in WordPress 6.1. This allows theme authors to use fluid typography in block editors by default, without writing additional codes.

More detailed behind the scene discussions on fluid typography is available in the original GitHub PR#39529 threads.

Testing Example

For this brief tutorial example, I took the testing guide from this Justin Tadlock’s post and tested using a modified Twenty Twenty-Three (TT3) theme (currently under development).

Step 1: Enable settings.typography.fluid in the theme.json file

First, settings.typography.fluid object value should be set to fluid as described in the instructions.

{
    "version": 2,
    "settings": {
        "typography": {
            "fluid": true,
        }
    }
}

The default value is false.

Step 2: Define custom font sizes in theme.json file

Defining the settings.typography.fontSizes which accepts fluid object with min and max values, as described here. To opt-out the fluid feature, its value should be set to false.

Let’s copy and paste the following testing examples (source: this testing instruction post) and made some modifications.

{
    "version": 2,
    "settings": {
        "appearanceTools": true,
	     "layout": {
		"contentSize": "640px",
		"wideSize": "1000px"
	    },
        "typography": {
            "fluid": true,
            "fontSizes": [
                {
					"size": ".875rem",
					"fluid": {
						"min": "0.875rem",
						"max": "1"
					},
					"slug": "small",
					"name": "Small"
				},
				{
					"size": "1rem",
					"fluid": {
						"min": "1rem",
						"max": "1.25rem"
					},
					"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"
			}
            ]
        }
    }
}

In the example above, the fluid feature is enabled (line 5), font sizes for “normal” (lines: 7-15) and “x-large” (lines:16-21) are defined.

The first normal font size, adds extra min and max size values for the fluid object (lines: 10-13). For the second “x-large” size, the fluid object is disabled by setting its value as “false“.

Under the hood, Gutenberg converts the above properties as “a unique clamp() formula for every font size and output the value in the font size preset CSS var” using this font-size calculator.

The following preset after the calculations:

/* 1.125rem(18px) @ 48rem(768px) increasing to 1.25rem(20px) @ 100rem(1600px) */
  --wp--preset--font-size--normal: clamp(1.125rem, calc(1.125rem + ((1vw - 0.48rem) * 0.2404)), 1.25rem);
  --wp--preset--font-size--large: 2rem;
Step 3: Testing markup

For testing purposes, I used the following testing HTML markup, inspired from this GitHub PR post.

<!-- wp:paragraph -->
<p>TESTING FLUID TYPOGRAPHY</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Paragraph small / Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"normal"} -->
<p class="has-normal-font-size">Paragraph normal / Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"large"} -->
<p class="has-large-font-size">Paragraph Large / Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"x-large"} -->
<p class="has-x-large-font-size">Paragraph x-Large / Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text </p>
<!-- /wp:paragraph -->

Next, viewing on a browser.

Step 4: Viewing in a browser

The following is GIF image in action in a browser showing how font sizes change, when browser width is shrink or widen.

Please note that, because fluid feature for for X-Large fonts is disabled via theme.json (line: 41, step 2 above), font size of the last para with X-large (above) don’t change when the browser width varies.

The fluid typography feature worked as showed as demonstrated in this original GitHub PR.

Limitations

According to the author of the original GitHub PR#39529, this feature is currently available only via theme.json and not available in block editor UI. “The rationale would be that we could test our API choices first, then let any lessons guide how we express fluid typography in the UI.”

Wrapping Up

In this short learning post, how to enable fluid typography feature in block themes via theme.json is described briefly. There are already may block theme examples that have adopted this feature in their block themes.

Resources

Before starting to create my own block patterns, I did a brief google search for useful guide and tutorials on creating patterns and found the following useful for my project.