Theme.json and Standard Font Sizing

The theme.json feature, available in block themes for WordPress, offers advanced editor configuration capabilities. This functionality gives theme developers more control over font size, colors, and other design elements when editing posts or pages.

It’s a valuable tool in block themes that enhances customization and flexibility in website design and content management within the WordPress ecosystem. The top-level applies to all blocks that support the relevant setting, but a specific block’s settings could override it by being 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:

Theme.json in Frost Theme for WordPress

Frost employs a ‘t-shirt sizing’ method for font sizes, a naming convention designed to standardize and simplify font selection. This approach, which aligns with WordPress standards, enhances consistency and ensures future compatibility across different themes and platforms.

Using familiar size labels like ‘small,’ ‘medium,’ ‘large,’ and so on makes it easier for users to choose the appropriate font size while maintaining a cohesive and scalable design framework.

Included in the theme is a range of standard font sizes to cater to various design needs. Here’s a list of those sizes:

{
	"fluid": false,
	"name": "xSmall",
	"size": "16px",
	"slug": "x-small"
},
{
	"fluid": false,
	"name": "Small",
	"size": "18px",
	"slug": "small"
}
Code language: JavaScript (javascript)

Fluid Typography

Fluid typography in WordPress block themes enables fonts to adapt their sizes based on the viewport width. This feature allows text to scale smoothly between set minimum and maximum sizes, ensuring readability and visual consistency across different devices. It maintains legibility and aesthetics on varying screen sizes, from small mobile screens to large desktop displays.

By integrating fluid typography, WordPress block themes enhance the user experience and accessibility. It ensures that text is proportionate and easily readable, regardless of the device used. This adaptability is critical in responsive web design, making websites more user-friendly and visually appealing in a multi-device digital environment.

Here’s an overview of the fluid typography-enabled font sizes available in the Frost WordPress theme:

{
	"fluid": {
		"min": "18px",
		"max": "20px"
	},
	"name": "Medium",
	"size": "20px",
	"slug": "medium"
},
{
	"fluid": {
		"min": "20px",
		"max": "24px"
	},
	"name": "Large",
	"size": "24px",
	"slug": "large"
},
{
	"fluid": {
		"min": "24px",
		"max": "30px"
	},
	"name": "xLarge",
	"size": "30px",
	"slug": "x-large"
},
{
	"fluid": {
		"min": "30px",
		"max": "36px"
	},
	"name": "36px",
	"size": "36px",
	"slug": "max-36"
},
{
	"fluid": {
		"min": "36px",
		"max": "48px"
	},
	"name": "48px",
	"size": "48px",
	"slug": "max-48"
},
{
	"fluid": {
		"min": "42px",
		"max": "60px"
	},
	"name": "60px",
	"size": "60px",
	"slug": "max-60"
},
{
	"fluid": {
		"min": "48px",
		"max": "72px"
	},
	"name": "72px",
	"size": "72px",
	"slug": "max-72"
}
Code language: JavaScript (javascript)

Conclustion

Frost’s adoption of the ‘t-shirt sizing’ method for font sizes represents a significant step forward in web design within the WordPress ecosystem. This approach not only simplifies the design process but also ensures high consistency and future compatibility across various themes and platforms.

Frost sets a new benchmark for intuitive web design by aligning with WordPress standards and focusing on user-friendly naming conventions. As we embrace these innovative approaches, the potential for creating more accessible, visually appealing, and user-centric websites becomes increasingly attainable.