How to separate heading-level tags from font size

A common reason for improper heading hierarchy or skipped heading levels is that content editors often choose headings based on a specific font size.

For example, imagine a page section with an h2 level tag that contains the section title. Beneath the section title is a row with three columns of content. Each column should use an h3 level tag to introduce the contents and maintain a logical hierarchy. However, in many cases, a content editor might choose a lower level heading tag like h4 or h5 because the default font size suits the design better.

Educating content editors on the importance of heading hierarchy is part of the solution, but there is also a need for better administrative tools to create/edit page content. Providing the content editor with separate controls for heading-level tag and text styles will make it easier to achieve the desired visual style while maintaining a proper document outline.

Here are some ideas on how to achieve this

Add CSS helper classes for text styles

An additional stylesheet could be created with helper classes for each font size and text style. Each CSS declaration would be assigned a fixed value based on the existing type scale definitions. Depending on the specificity of other styles the !important flag may need to be used for these override styles.

.text-xs { font-size: 0.694rem; }
.text-sm { font-size: 0.833rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.2rem; }
.text-xl { font-size: 1.44rem; }
[…]

Add font-size control to the content editor

On their own, the text style helper classes are not immediately useful. The content editor would either need to apply the helper class using HTML or a custom admin control could be added to apply it to the selected text. The implementation for this will vary depending on the CMS, but in WordPress this can be done using theme.json.

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"typography": {
			"fontSizes": [
				{
					"size": "0.694rem",
					"slug": "xs",
					"name": "XS"
				},
				{
					"size": "0.833rem",
					"slug": "sm",
					"name": "SM"
				},
				{
					"size": "1rem",
					"slug": "normal",
					"name": "Normal"
				},
				{
					"size": "1.2rem",
					"slug": "lg",
					"name": "LG"
				},
				{
					"size": "1.44rem",
					"slug": "xl",
					"name": "XL"
				},
				[…]
			]
		}
	},
	"styles": {
		[…]
	}
}