Fluid Type Installation

Install Fluid Type

Fluid Type is a CSS pack. You paste it once, then tweak the variables if you want a tighter or larger scale.

1. Open Custom CSS

In Squarespace, go to Website → Website Tools → Custom CSS (or Site Styles → Custom CSS, depending on your UI).

2. Paste the pack

Copy the full snippet below into Custom CSS and save.

:root {
  --ft-h1-min: 2.25rem;
  --ft-h1-max: 4.5rem;
  --ft-h2-min: 1.75rem;
  --ft-h2-max: 3rem;
  --ft-h3-min: 1.35rem;
  --ft-h3-max: 2rem;
  --ft-body-min: 1rem;
  --ft-body-max: 1.125rem;
}

h1, .sqsrte-large {
  font-size: clamp(var(--ft-h1-min), 4vw, var(--ft-h1-max)) !important;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(var(--ft-h2-min), 3vw, var(--ft-h2-max)) !important;
  line-height: 1.1;
}

h3 {
  font-size: clamp(var(--ft-h3-min), 2.4vw, var(--ft-h3-max)) !important;
  line-height: 1.2;
}

p, .sqsrte-text {
  font-size: clamp(var(--ft-body-min), 1.2vw, var(--ft-body-max));
  line-height: 1.6;
}

3. Tune the scale

Edit the --ft-*-min and --ft-*-max variables at the top. Min controls phones; max controls large desktops. Keep the ratio gentle so type stays editorial, not shouty.

4. Check mobile

Preview on a phone width. If a heading feels huge on mobile, lower the matching -min value by 0.15rem and re-check.