Dev Tools
Client-sidefiles never upload

Type scale + Fluid clamp() generator

Pick a base size and a musical ratio; we compute a full -3 to +6 step scale. **Fluid mode** adds a second base for a larger viewport and emits clamp() values that interpolate between the two. Output as Tailwind v4 @theme, CSS variables, or SCSS.

Mode
Modern: each step is a clamp() that interpolates smoothly between two viewports. Recommended on Tailwind v4 / modern SSGs.
Size preview
  • smThe quick brown fox jumps over the lazy dog10.24px β†’ 12.8px
  • base-1The quick brown fox jumps over the lazy dog12.8px β†’ 16px
  • baseThe quick brown fox jumps over the lazy dog16px β†’ 20px
  • lgThe quick brown fox jumps over the lazy dog20px β†’ 25px
  • xlThe quick brown fox jumps over the lazy dog25px β†’ 31.25px
  • 2xlThe quick brown fox jumps over the lazy dog31.25px β†’ 39.06px
  • 3xlThe quick brown fox jumps over the lazy dog39.06px β†’ 48.83px
  • 4xlThe quick brown fox jumps over the lazy dog48.83px β†’ 61.04px
  • 5xlThe quick brown fox jumps over the lazy dog61.04px β†’ 76.29px
Output format
tailwindTheme
@theme {
  --text-sm: clamp(0.64rem, 0.5943rem + 0.2286vw, 0.8rem);
  --text-base-1: clamp(0.8rem, 0.7429rem + 0.2857vw, 1rem);
  --text-base: clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem);
  --text-lg: clamp(1.25rem, 1.1607rem + 0.4464vw, 1.5625rem);
  --text-xl: clamp(1.5625rem, 1.4509rem + 0.558vw, 1.9531rem);
  --text-2xl: clamp(1.9531rem, 1.8137rem + 0.6973vw, 2.4413rem);
  --text-3xl: clamp(2.4413rem, 2.2668rem + 0.8723vw, 3.0519rem);
  --text-4xl: clamp(3.0519rem, 2.8338rem + 1.0902vw, 3.815rem);
  --text-5xl: clamp(3.815rem, 3.5427rem + 1.3616vw, 4.7681rem);
}
β€ΊHow to use
  1. Pick Fluid clamp() (modern, recommended) or Fixed px / rem (traditional) at the top.
  2. Choose a modular ratio: from Minor Second 1.067 (dense) to Golden Ratio 1.618 (dramatic). Most SaaS sites land on Major Third (1.25) or Perfect Fourth (1.333).
  3. Fixed mode: set the Base size (default 16px) plus min/max step range.
  4. Fluid mode: set the smaller viewport base (e.g. mobile 16px), the larger viewport base (e.g. desktop 20px), and the two viewport widths (defaults 320 / 1440 px).
  5. The preview updates instantly with the actual rendered size per step. The output tab strip switches between Tailwind v4 @theme, CSS variables, SCSS, and a plain table.
Tips
  • Why fluid: text scales smoothly with the viewport, so it reads well on phones, tablets, laptops and big screens β€” no @media-query soup.
  • Picking a ratio: 1.2-1.25 for dense dashboards, 1.333-1.5 for landing pages, 1.618 for minimalist heroes.
  • Tailwind v4 picks up @theme { --text-xl: ... } and lets you use the existing text-xl classes β€” no config file edits.
  • Inspired by utopia.fyi but with cleaner outputs and first-class Tailwind v4 support.

Related tools