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);