Theme.json and Standard Font Sizing

With WordPress 5.8, it is now possible to configure the editor through a new mechanism: theme.json. WordPress 6.0 recently shipped with even more settings. Themes can provide more control over what editors should do when editing posts or pages on your website (change font size, colors etc.).

With the addition of theme.json, theme authors can also control these settings on a per-block basis, which wasn’t possible before. The top-level applies to all blocks that support the relevant setting, but a specific block’s settings could override it by being more specific.

A significant benefit of the theme.json file is the consolidation of CSS required in both a theme’s style.css file and its style-editor.css file.

Theme.json in Classic Themes

Marcus Kazmierczak, Engineering team lead at Automattic, recently gave an overview on using theme.json in classic themes.

Rich Tabor published a 3-part series on standardizing how we build the next generation of WordPress block themes to accompany Full Site Editing:

Frost is considered a classic WordPress theme and currently includes a theme.json file. Though at some point, it will fully support Full Site Editing.

Theme.json in Frost Theme for WordPress

To standardize font sizes, the Frost theme adopted a naming convention that aligns with WordPress and should allow for future portability.

Here is a list of custom font sizes included in theme.json in Frost:

{
	"name": "Small",
	"slug": "small",
	"size": "16px"
},
{
	"name": "Medium",
	"slug": "medium",
	"size": "20px"
},
{
	"name": "Large",
	"slug": "large",
	"size": "24px"
},
{
	"name": "xLarge",
	"slug": "xlarge",
	"size": "30px"
},
Code language: JavaScript (javascript)

The clamp() CSS Function

Frost registers 4 font sizes (36px, 48px, 60px, 72px) using the clamp() CSS function. This method dynamically resizes font size based on the viewport size, which delivers a better user experience on mobile devices.

The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value. (source)

Here is a list of custom font sizes that use the clamp() CSS function:

{
	"name": "36px",
	"slug": "max-36",
	"size": "clamp(24px, 3vw, 36px)"
},
{
	"name": "48px",
	"slug": "max-48",
	"size": "clamp(30px, 4vw, 48px)"
},
{
	"name": "60px",
	"slug": "max-60",
	"size": "clamp(36px, 5vw, 60px)"
},
{
	"name": "72px",
	"slug": "max-72",
	"size": "clamp(48px, 6vw, 72px)"
}
Code language: JavaScript (javascript)