Fluid font sizes in WordPress 6.1

In WordPress 6.1, “Fluid font sizes” make their debut. This enables font sizes to adapt to changes in screen size, for example, by growing larger as the viewport width increases, or smaller as it decreases.

Fluid Typography has been tested via theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. since the 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/ pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party releases 13.8 and 13.9.

How to use fluid font size in your theme

Fluid font sizes can be activated for 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.-based themes and classic themes via a theme.json file.

The new boolean settings.typography.fluid acts as a toggle that, when set to true, will convert the following values to a clamp() function:

• font size preset values within settings.typography.fontSizes 
• custom font sizes, whether defined in theme.json or the editor

The clamp() function contains an upper, lower and preferred font size. The latter will adjust itself according to the width of the viewport.

For presets, individual font sizes can be defined by their minimum and maximum values, which determine the smallest and largest values of a font size. Moreover, individual preset font sizes can opt out by setting settings.typography.fontSizes[].fluid to false.

In the absence of explicit minimum and maximum values, the editor will scale the existing size value up and down to calculate smallest and largest values automatically using computed lower and upper font size values based on the single value.

Consider the following example theme.json:

{
	"version": 2,
	"settings": {
		"typography": {
			"fluid": true,
			"fontSizes": [
				{
					"size": ".9rem",
					"fluid": {
						"min": "0.9rem",
						"max": "1.2rem"
					},
					"slug": "piccolino",
					"name": "Piccolino"
				},
				{
					"size": "2rem",
					"fluid": {
						"min": "1.8rem",
						"max": "3.3rem"
					},
					"slug": "in-mezzo",
					"name": "In Mezzo"
				},
				{
					"size": "2.8rem",
					"fluid": false,
					"slug": "neutrale",
					"name": "Neutrale"
				},
				{
					"size": "4.75rem",
					"slug": "grandone",
					"name": "Grandone"
				}
			]
		}
	},
	"styles": {
		"typography": {
			"fontSize": "16px"
		},
		"elements": {
			"h1": {
				"typography": {
					"fontSize": "4rem"
				}
			}
		},
		"blocks": {
			"core/post-date": {
				"typography": {
					"fontSize": "14px"
				}
			}
		}
	}
}

The above theme.json definition generates the following font size presets that you can use throughout your theme:

--wp--preset--font-size--piccolino: clamp(0.9rem, 0.9rem + ((1vw - 0.48rem) * 0.577), 1.2rem);

--wp--preset--font-size--in-mezzo: clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3.3rem);

--wp--preset--font-size--neutrale: 2.8rem;

--wp--preset--font-size--grandone: clamp(3.5625rem, 3.5625rem + ((1vw - 0.48rem) * 6.851), 7.125rem);

When fluid typography is activated, custom font sizes in styles will also be converted to fluid font sizes values, resulting in the following CSSCSS Cascading Style Sheets.:

.wp-block-post-date{font-size: clamp(10.5px, 0.65625rem + ((1vw - 7.68px) * 1.262), 21px); ...}

h1{font-size: clamp(3rem, 3rem + ((1vw - 0.48rem) * 5.769), 6rem); ...}

body{font-size: clamp(12px, 0.75rem + ((1vw - 7.68px) * 1.442), 24px); ... }

Themes that don’t opt into the fluid font size enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. will see no difference in the way fonts presently work. It is still possible to roll a custom clamp() or other fluid-like formula in the size and fontSize property values.

Applying fluid font sizes in the editor

Nothing changes in the way the typography UIUI User interface works or appears in the editor.

Where fluid font size presets have been defined in theme.json, users can apply these values using the font size picker:

Any custom value set in the editor will also be converted and saved as a clamp() value:

Current issues and limitations

Fluid font sizes will only work where a font size is defined in px, em or rem units. For the purposes of computing a “preferred font size” the algorithm will convert font sizes in px to rem assuming a base size of `16px`, which is the equivalent of 1em or 1rem.

This is to not only make the job of calculating the clamp formula easier, but to encourage the use of relative sizes: setting the font size to scale proportionally with whichever base size the browser sets will help to maintain accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility). 

The first iteration has also made some base assumptions in relation to:

• Minimum and maximum viewport widths (1600px and 768px).
• Calculating minimum and maximum font sizes in the absence of specific values.
• The rate of scale between minimum and maximum font size boundaries.

At the moment, static values exist for the purposes of generating clamp formulae. A follow-up pull request PR is exploring a way to make these parameters configurable.

These issues and more are being tracked via the [Feature] Typography label.

Future enhancements

Future iterations of fluid typography may look at areas such as:

• Making the clamp formula more configurable.
• Exploring the potential for filters to allow themes or plugins to customize font size output using available clamp values.
• Designing fluid typography UI controls.
• Introducing fluidity to other typography properties such as letter spacing.
• Allowing configurable upper and lower font size limits, so that font sizes will not ever be too small or too big.

If you have any ideas for subsequent iterations, create an issue or a pull request.

Related reading

• Make WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. post: Block Font Sizes and Fluid typography (the proposal)
• Fluid Typography Option #24480
• Block supports: add fluid typography #39529
• Make WordPress core post: Testing and Feedback for the Fluid Typography Feature
• Block supports: add configurable fluid typography settings to theme.json #42489
• Open issues and feature enhancement requests 
• Typography Tools: Tracking #34345 (A general tracking issue for typography tools)
• Testing and Feedback for the Fluid Typography Feature
• Converting custom font sizes to fluid values #44758

Props for review @webcommsat and @bph.

#6-1, #core-editor, #dev-notes, #dev-notes-6-1, #gutenberg