Font sizes in theme.json

Think I like:

"fontSizes": [
	{
		"name": "Tiny",
		"size": "0.9rem",
		"slug": "tiny",
		"fluid": {
			"min": "0.8333rem",
			"max": "0.9377rem"
		}
	},
	{
		"name": "Small",
		"size": "0.95rem",
		"slug": "small",
		"fluid": {
			"min": "0.93rem",
			"max": "1rem"
		}
	},
	{
		"name": "Base P/H6",
		"size": "1.125rem",
		"slug": "base",
		"fluid": {
			"min": "1rem",
			"max": "1.25rem"
		}
	},
	{
		"name": "Medium H5",
		"size": "1.4rem",
		"slug": "medium",
		"fluid": {
			"min": "1.2rem",
			"max": "1.6663rem"
		}
	},
	{
		"name": "Large H4",
		"size": "1.875rem",
		"slug": "large",
		"fluid": {
			"min": "1.44rem",
			"max": "2.2211rem"
		}
	},
	{
		"name": "Extra Large H3",
		"size": "2.4rem",
		"slug": "x-large",
		"fluid": {
			"min": "1.728rem",
			"max": "2.9607rem"
		}
	},
	{
		"name": "XX Large H2",
		"size": "2.8267rem",
		"slug": "xx-large",
		"fluid": {
			"min": "2.0736rem",
			"max": "3.9467rem"
		}
	},
	{
		"name": "XXX Large H1",
		"size": "3.5rem",
		"slug": "xxx-large",
		"fluid": {
			"min": "2.4883rem",
			"max": "5.2609rem"
		}
	}
],

Notes:

Default spacing is off if your theme is not overriding it.


2024 Theme:

"spacing": {
	"spacingScale": {
		"steps": 0
	},
	"spacingSizes": [
		{
			"name": "1",
			"size": "1rem",
			"slug": "10"
		},
		{
			"name": "2",
			"size": "min(1.5rem, 2vw)",
			"slug": "20"
		},
		{
			"name": "3",
			"size": "min(2.5rem, 3vw)",
			"slug": "30"
		},
		{
			"name": "4",
			"size": "min(4rem, 5vw)",
			"slug": "40"
		},
		{
			"name": "5",
			"size": "min(6.5rem, 8vw)",
			"slug": "50"
		},
		{
			"name": "6",
			"size": "min(10.5rem, 13vw)",
			"slug": "60"
		}
	],
	"units": ["%", "px", "em", "rem", "vh", "vw"]
},

Notes:

min(1.5rem, 2vw); means whatever is smaller 1.5rem or 2vw, so after viewport width is bigger than 1200 the measurement is 1.5rem

as there are 6 steps the vars are:

--wp--preset--spacing--10: 1rem;
--wp--preset--spacing--20: min(1.5rem, 2vw);
--wp--preset--spacing--30: min(2.5rem, 3vw);
--wp--preset--spacing--40: min(4rem, 5vw);
--wp--preset--spacing--50: min(6.5rem, 8vw);
--wp--preset--spacing--60: min(10.5rem, 13vw);
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;

Ollie Theme:

"spacing": {
	"spacingSizes": [
		{
			"name": "Small",
			"size": "clamp(.5rem, 2.5vw, 1rem)",
			"slug": "small"
		},
		{
			"name": "Medium",
			"size": "clamp(1.5rem, 4vw, 2rem)",
			"slug": "medium"
		},
		{
			"name": "Large",
			"size": "clamp(2rem, 5vw, 3rem)",
			"slug": "large"
		},
		{
			"name": "Extra Large",
			"size": "clamp(3rem, 7vw, 5rem)",
			"slug": "x-large"
		},
		{
			"name": "2xl",
			"size": "clamp(4rem, 9vw, 7rem)",
			"slug": "xx-large"
		},
		{
			"name": "3xl",
			"size": "clamp(5rem, 12vw, 9rem)",
			"slug": "xxx-large"
		},
		{
			"name": "4xl",
			"size": "clamp(6rem, 14vw, 13rem)",
			"slug": "xxxx-large"
		}
	],
	"units": [
		"px",
		"em",
		"rem",
		"vh",
		"vw",
		"%"
	],
	"blockGap": true,
	"padding": true,
	"margin": true
},

Notes:

Names make more sense here: –wp–preset–spacing–medium

Clamp has a minamount eg 24 px a max of 32 px so between 600wide and 800wide it is 4vw eg 700 wide is 28px

2025 seem to be using this naming format and uses clamp but frustratingly has gone with regular instead of medium

For more on clamp https://utopia.fyi/

I think my preference would probably be:

"spacing": {
	"spacingSizes": [
		{
			"name": "Tiny",
			"size": "clamp(0.25rem, 0.2065rem + 0.2174vw, 0.375rem)",
			"slug": "tiny"
		},
		{
			"name": "Extra Small",
			"size": "clamp(0.5rem, 0.413rem + 0.4348vw, 0.75rem)",
			"slug": "x-small"
		},
		{
			"name": "Small",
			"size": "clamp(1rem, 0.8261rem + 0.8696vw, 1.5rem)",
			"slug": "small"
		},
		{
			"name": "Medium",
			"size": "clamp(1.5rem, 1.2391rem + 1.3043vw, 2.25rem)",
			"slug": "medium"
		},
		{
			"name": "Large",
			"size": "clamp(2rem, 1.6522rem + 1.7391vw, 3rem)",
			"slug": "large"
		},
		{
			"name": "Extra Large",
			"size": "clamp(2.5rem, 2.0652rem + 2.1739vw, 3.75rem)",
			"slug": "x-large"
		},
		{
			"name": "2xl",
			"size": "clamp(3rem, 2.4783rem + 2.6087vw, 4.5rem)",
			"slug": "xx-large"
		},
		{
			"name": "3xl",
			"size": "clamp(4rem, 3.3043rem + 3.4783vw, 6rem)",
			"slug": "xxx-large"
		},
		{
			"name": "4xl",
			"size": "clamp(5rem, 4.1304rem + 4.3478vw, 7.5rem)",
			"slug": "xxxx-large"
		}
	],
	"units": [
		"px",
		"em",
		"rem",
		"vh",
		"vw",
		"%"
	],
	"blockGap": true,
	"padding": true,
	"margin": true
},
--wp--preset--spacing--tiny: clamp(0.25rem, 0.2065rem + 0.2174vw, 0.375rem);
--wp--preset--spacing--x-small: clamp(0.5rem, 0.413rem + 0.4348vw, 0.75rem);
--wp--preset--spacing--small: clamp(1rem, 0.8261rem + 0.8696vw, 1.5rem);
--wp--preset--spacing--medium: clamp(1.5rem, 1.2391rem + 1.3043vw, 2.25rem);
--wp--preset--spacing--large: clamp(2rem, 1.6522rem + 1.7391vw, 3rem);
--wp--preset--spacing--x-large: clamp(2.5rem, 2.0652rem + 2.1739vw, 3.75rem);
--wp--preset--spacing--xx-large: clamp(3rem, 2.4783rem + 2.6087vw, 4.5rem);
--wp--preset--spacing--xxx-large: clamp(4rem, 3.3043rem + 3.4783vw, 6rem);
--wp--preset--spacing--xxxx-large: clamp(5rem, 4.1304rem + 4.3478vw, 7.5rem);