Justin Tadlock 3:53 pm on August 15, 2022
Tags:   

Testing and Feedback for the Fluid Typography Feature

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 13.8 introduced the first version of a fluid typography feature, which allows theme authors to define font sizes that adapt to the viewport. Version 13.9 will also add a couple of fixes and enhancements.

Because this is a new feature that will primarily affect how theme authors build their designs, it needs thorough testing from the theme development community. Please take some time to test and share feedback in the comments.

Overview of Fluid Typography

The fluid typography feature allows theme authors to define scalable font sizes via their theme.json file, as shown in the following video clip:

The new feature gives theme authors two new keys to add in their theme.json files:

  • settings.typography.fluid can be set to true to enable fluid typography feature (default false).
  • Then, individual size objects in settings.typography.fontSizes accept a fluid object with min and max values (in the upcoming Gutenberg 13.9, themers can set this to false to opt out for individual sizes. Gutenberg uses these values, the existing size value, and a default formula (see changeset) to calculate the clamp() CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. output.

The following code snippet shows how to both enable the feature and define the individual sizes. It has two size examples under settings.typography.fontSizes. The first size, normal, adds extra minimum and maximum sizes. The second size, large, disables fluid type (requires Gutenberg 13.9).

{
	"version": 2,
	"settings": {
		"typography": {
			"fluid": true,
			"fontSizes": [
				{
					"name": "Normal",
					"size": "1.125rem",
					"fluid": {
						"min": "1rem",
						"max": "1.5rem"
					},
					"slug": "normal"
				},
				{
					"name": "Large",
					"size": "2rem",
					"fluid": false,
					"slug": "large"
				}
			]
		}
	}
}

This results in the following presets after calculations are made:

--wp--preset--font-size--normal: clamp(1rem, 1rem + ((1vw - 0.48rem) * 0.962), 1.5rem);
--wp--preset--font-size--large: 2rem;

How to Test

To test, you must have at least Gutenberg 13.8 installed and a theme with a theme.json file, such as Twenty Twenty-Two. Alternatively, you can add a custom theme.json file to a theme of your own.

The first step is to enable settings.typography.fluid in the theme.json file, which should look similar to the following:

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

Then, you need at least one custom font size under settings.typography.fontSizes. Your theme.json code should now look similar to the following snippet:

{
    "version": 2,
    "settings": {
        "typography": {
            "fluid": true,
            "fontSizes": [
                {
                    "name": "Normal",
                    "size": "1.125rem",
                    "fluid": {
                        "min": "1rem",
                        "max": "1.5rem"
                    },
                    "slug": "normal"
                }
            ]
        }
    }
}

For testing, you can select the “Normal” font size in the editor or copy/paste the following directly into the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor:

<!-- wp:paragraph {"fontSize":"normal"} -->
<p class="has-normal-font-size">Shortbread cotton candy chocolate bar macaroon cupcake. Dragée cupcake tart apple pie ice cream cheesecake sugar plum shortbread wafer. Brownie gummi bears gummies dragée biscuit brownie.</p>
<!-- /wp:paragraph -->

If testing with Gutenberg 13.9, try adding a second font-size that disables the fluid type feature and running through the same scenario (name this one large):

{
    "name": "Large",
    "size": "2rem",
    "fluid": false,
    "slug": "large"
}

The following are some questions to keep in mind and answer:

  • Did the font sizes adapt to the viewport?
  • Did the theme.json code match what you expected on the front end?
  • Was the behavior the same on the front end and editor? Note: this needs Gutenberg 13.9 to work in the site editor.
  • How well does the type scale with a wide range between the min and max ranges?
  • Did disabling the fluid feature for individual sizes work (Gutenberg 13.9+ only)?
  • Are there missing features or options that would improve this experience as a developer?
  • Did this work well for both classic and block themes, depending on which you tested?
  • What did you find frustrating or confusing about the feature?
  • Are there things you particularly appreciated about it?

Please share any and all feedback in the comments.

Changes and Features Expected in Upcoming Releases

Currently, fluid typography is essentially an early, dev-only feature without all the future improvements that will make it shine. It is a solid start that puts a lot of power directly into the hands of theme authors. However, there is more on the horizon.

Gutenberg 13.9 includes two improvements:

Developers should also keep their eye on a couple of related tickets:

Props to @kafleg for technical feedback and review.

#testing