Free Tool

Spacing & Type Scale Calculator

Generate harmonious typography and spacing scales with fluid clamp() values, CSS custom properties, and LESS variables — ready to drop into any Squarespace Dev Mode project.

Why this matters

Consistent spacing and typography are what separate a professional website from a DIY one. This tool calculates a mathematical spacing scale and fluid font sizes that look perfect on every screen size — from phones to ultrawide monitors.

Typography Scale

Define a base size and a modular scale ratio. The calculator generates every step from xs to 5xl with fluid clamp() values for responsive sizing.

StepPixelsRemPreview
xs10.2px0.638remThe quick brown fox
sm12.8px0.8remThe quick brown fox
base16px1remThe quick brown fox
lg20px1.25remThe quick brown fox
xl25px1.563remThe quick brown fox
2xl31.3px1.956remThe quick brown fox
3xl39.1px2.444remThe quick brown fox
4xl48.8px3.05remThe quick brown fox
5xl61px3.813remThe quick brown fox

Fluid clamp() Values

xsclamp(0.481rem, 0.42406rem + 0.244vw, 0.638rem)
smclamp(0.6rem, 0.52688rem + 0.312vw, 0.8rem)
baseclamp(0.75rem, 0.65863rem + 0.39vw, 1rem)
lgclamp(0.938rem, 0.82313rem + 0.488vw, 1.25rem)
xlclamp(1.175rem, 1.03319rem + 0.605vw, 1.563rem)
2xlclamp(1.469rem, 1.29038rem + 0.761vw, 1.956rem)
3xlclamp(1.831rem, 1.60719rem + 0.956vw, 2.444rem)
4xlclamp(2.288rem, 2.00863rem + 1.19vw, 3.05rem)
5xlclamp(2.863rem, 2.51494rem + 1.483vw, 3.813rem)
CSS Custom Properties
:root {
  --font-size-xs: 0.638rem;
  --font-size-sm: 0.8rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.563rem;
  --font-size-2xl: 1.956rem;
  --font-size-3xl: 2.444rem;
  --font-size-4xl: 3.05rem;
  --font-size-5xl: 3.813rem;

  /* Fluid (clamp) versions */
  --font-size-xs-fluid: clamp(0.481rem, 0.42406rem + 0.244vw, 0.638rem);
  --font-size-sm-fluid: clamp(0.6rem, 0.52688rem + 0.312vw, 0.8rem);
  --font-size-base-fluid: clamp(0.75rem, 0.65863rem + 0.39vw, 1rem);
  --font-size-lg-fluid: clamp(0.938rem, 0.82313rem + 0.488vw, 1.25rem);
  --font-size-xl-fluid: clamp(1.175rem, 1.03319rem + 0.605vw, 1.563rem);
  --font-size-2xl-fluid: clamp(1.469rem, 1.29038rem + 0.761vw, 1.956rem);
  --font-size-3xl-fluid: clamp(1.831rem, 1.60719rem + 0.956vw, 2.444rem);
  --font-size-4xl-fluid: clamp(2.288rem, 2.00863rem + 1.19vw, 3.05rem);
  --font-size-5xl-fluid: clamp(2.863rem, 2.51494rem + 1.483vw, 3.813rem);
}
Pro

Unlock design token exports

Spacing Scale

Build a consistent spacing system from a single base unit. Every token is a multiplier of the base, keeping all whitespace in harmony.

--space-12px0.25x
--space-24px0.5x
--space-38px1x
--space-412px1.5x
--space-516px2x
--space-624px3x
--space-732px4x
--space-840px5x
--space-948px6x
--space-1064px8x
--space-1180px10x
CSS Custom Properties
:root {
  --space-1: 0.125rem; /* 2px — 0.25x */
  --space-2: 0.25rem; /* 4px — 0.5x */
  --space-3: 0.5rem; /* 8px — 1x */
  --space-4: 0.75rem; /* 12px — 1.5x */
  --space-5: 1rem; /* 16px — 2x */
  --space-6: 1.5rem; /* 24px — 3x */
  --space-7: 2rem; /* 32px — 4x */
  --space-8: 2.5rem; /* 40px — 5x */
  --space-9: 3rem; /* 48px — 6x */
  --space-10: 4rem; /* 64px — 8x */
  --space-11: 5rem; /* 80px — 10x */
}
LESS Variables
@space-1: 0.125rem; // 2px — 0.25x
@space-2: 0.25rem; // 4px — 0.5x
@space-3: 0.5rem; // 8px — 1x
@space-4: 0.75rem; // 12px — 1.5x
@space-5: 1rem; // 16px — 2x
@space-6: 1.5rem; // 24px — 3x
@space-7: 2rem; // 32px — 4x
@space-8: 2.5rem; // 40px — 5x
@space-9: 3rem; // 48px — 6x
@space-10: 4rem; // 64px — 8x
@space-11: 5rem; // 80px — 10x
Pro

Unlock design token exports

Full Design Tokens

All typography and spacing tokens combined into a single copyable block. Drop this into your base.less or global stylesheet.

Combined CSS + LESS
/* ═══ Design Tokens ═══ */

/* Typography Scale */
:root {
  --font-size-xs: 0.638rem;
  --font-size-sm: 0.8rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.563rem;
  --font-size-2xl: 1.956rem;
  --font-size-3xl: 2.444rem;
  --font-size-4xl: 3.05rem;
  --font-size-5xl: 3.813rem;

  --font-size-xs-fluid: clamp(0.481rem, 0.42406rem + 0.244vw, 0.638rem);
  --font-size-sm-fluid: clamp(0.6rem, 0.52688rem + 0.312vw, 0.8rem);
  --font-size-base-fluid: clamp(0.75rem, 0.65863rem + 0.39vw, 1rem);
  --font-size-lg-fluid: clamp(0.938rem, 0.82313rem + 0.488vw, 1.25rem);
  --font-size-xl-fluid: clamp(1.175rem, 1.03319rem + 0.605vw, 1.563rem);
  --font-size-2xl-fluid: clamp(1.469rem, 1.29038rem + 0.761vw, 1.956rem);
  --font-size-3xl-fluid: clamp(1.831rem, 1.60719rem + 0.956vw, 2.444rem);
  --font-size-4xl-fluid: clamp(2.288rem, 2.00863rem + 1.19vw, 3.05rem);
  --font-size-5xl-fluid: clamp(2.863rem, 2.51494rem + 1.483vw, 3.813rem);

  /* Spacing Scale */
  --space-1: 0.125rem; /* 2px */
  --space-2: 0.25rem; /* 4px */
  --space-3: 0.5rem; /* 8px */
  --space-4: 0.75rem; /* 12px */
  --space-5: 1rem; /* 16px */
  --space-6: 1.5rem; /* 24px */
  --space-7: 2rem; /* 32px */
  --space-8: 2.5rem; /* 40px */
  --space-9: 3rem; /* 48px */
  --space-10: 4rem; /* 64px */
  --space-11: 5rem; /* 80px */
}

/* LESS Variables (spacing) */
@space-1: 0.125rem;
@space-2: 0.25rem;
@space-3: 0.5rem;
@space-4: 0.75rem;
@space-5: 1rem;
@space-6: 1.5rem;
@space-7: 2rem;
@space-8: 2.5rem;
@space-9: 3rem;
@space-10: 4rem;
@space-11: 5rem;
Pro

Unlock design token exports