Fluid spacing scale?

[dlewand691]

As a complement to your great work on this typography scale, a spacing scale would be extremely helpful. Thanks and keep up the wonderful work!

[AleksandrHovhannisyan]

Thanks for the feedback! Glad you like it.

You could actually use the calculator to create a spacing scale by changing your preferred naming convention and steps. Here's an example: https://www.fluid-type-scale.com/calculate?minFontSize=14&minWidth=400&minRatio=1.25&maxFontSize=16&maxWidth=1280&maxRatio=1.333&steps=-2%2C+-1%2C+0%2C+1%2C+2%2C+3%2C+4%2C+5%2C+6&baseStep=0&prefix=sp&decimals=2&useRems=on&previewFont=Inter

(The only downside is that there's no preview mode for this use case, so it's a little harder to customize.)

Fun fact: the app itself does this. It uses a single scale both for spacing and font sizing:

--sp-xxs: clamp(0.58rem,0.08vw + 0.56rem,0.61rem);
--sp-xs: clamp(0.69rem,0.17vw + 0.65rem,0.76rem);
--sp-sm: clamp(0.83rem,0.31vw + 0.76rem,0.95rem);
--sp-base: clamp(1rem,0.5vw + 0.88rem,1.19rem);
--sp-md: clamp(1.2rem,0.76vw + 1.01rem,1.48rem);
--sp-lg: clamp(1.44rem,1.11vw + 1.16rem,1.86rem);
--sp-xl: clamp(1.73rem,1.58vw + 1.33rem,2.32rem);
--sp-xxl: clamp(2.07rem,2.2vw + 1.52rem,2.9rem);
--sp-xxxl: clamp(2.49rem,3.03vw + 1.73rem,3.62rem);
--sp-xxxxl: clamp(2.99rem,4.12vw + 1.96rem,4.53rem);

If there's enough demand for this feature, I'll definitely take it into consideration. The main reason I marketed this as a fluid type scale calculator is for SEO (and since that's the primary use case I was targeting).

[dlewand691]

Ahhhh fantastic, thank you!