Set Font Sizes

While the WordPress block editor comes with a set of default font sizes, a theme can override it by offering its own set of custom sizes. Font Sizes can currently be set using one method: via theme.json.

Setting Font Sizes (CODE)

Inside the theme.json file inside of the Frost theme, look for the code below. Change the values for xSmall , Small, Medium, Large, and xLarge as desired.

{
	"settings": {
		"typography": {
			"fontSizes": [
				{
					"fluid": false,
					"name": "xSmall",
					"size": "16px",
					"slug": "x-small"
				},
				{
					"fluid": false,
					"name": "Small",
					"size": "18px",
					"slug": "small"
				},
				{
					"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 Typography

Fluid typography is the adaptation of font sizes with changes in viewport width. As a result, fonts can smoothly scale between a minimum and maximum size— creating uniformity and optimal communication.

This feature is enabled in Frost with the following code in theme.json:

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

Frost leverages fluid typography by setting additional (non-T-shirt) sizes. These are available for larger font display on desktops while scaling down significantly for mobile devices. Included in the theme are 36px, 48px, 60px, and 72px. Each size has a minimum and maximum value set.

{
	"settings": {
		"typography": {
			"fontSizes": [
				{
					"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"
				}
			]
		}
	}
}