Fluid Typography & Responsive Scale Studio

Generate fluid clamp() typography and harmonious modular scales for responsive web apps without media queries

Scale Presets

Load recommended modular ratios and responsive scales

Viewport & Scale Parameters

Define bounds for linear interpolation

Viewport Screen Width Bounds

Min Screen (px):

Max Screen (px):

Base Font Size Bounds (1rem)

Min Base (px):

Max Base (px):

Modular Scale Ratio:

Live Viewport Resizer & Typography Preview

768 px

375px1440px

Hero Title (3xl)

Subheading (lg)

Body text scales smoothly across all devices without breakpoint jumps.

:root {
  --font-size-xs: clamp(0.638rem, 0.122vw + 0.609rem, 0.719rem);
  --font-size-sm: clamp(0.8rem, 0.15vw + 0.765rem, 0.9rem);
  --font-size-base: clamp(1rem, 0.188vw + 0.956rem, 1.125rem);
  --font-size-md: clamp(1.25rem, 0.235vw + 1.195rem, 1.406rem);
  --font-size-lg: clamp(1.563rem, 0.291vw + 1.494rem, 1.756rem);
  --font-size-xl: clamp(1.956rem, 0.366vw + 1.87rem, 2.2rem);
  --font-size-2xl: clamp(2.444rem, 0.451vw + 2.338rem, 2.744rem);
  --font-size-3xl: clamp(3.05rem, 0.573vw + 2.916rem, 3.431rem);
}

@theme {
  --text-xs: clamp(0.638rem, 0.122vw + 0.609rem, 0.719rem);
  --text-sm: clamp(0.8rem, 0.15vw + 0.765rem, 0.9rem);
  --text-base: clamp(1rem, 0.188vw + 0.956rem, 1.125rem);
  --text-md: clamp(1.25rem, 0.235vw + 1.195rem, 1.406rem);
  --text-lg: clamp(1.563rem, 0.291vw + 1.494rem, 1.756rem);
  --text-xl: clamp(1.956rem, 0.366vw + 1.87rem, 2.2rem);
  --text-2xl: clamp(2.444rem, 0.451vw + 2.338rem, 2.744rem);
  --text-3xl: clamp(3.05rem, 0.573vw + 2.916rem, 3.431rem);
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontSize: {
      'xs': 'clamp(0.638rem, 0.122vw + 0.609rem, 0.719rem)',
      'sm': 'clamp(0.8rem, 0.15vw + 0.765rem, 0.9rem)',
      'base': 'clamp(1rem, 0.188vw + 0.956rem, 1.125rem)',
      'md': 'clamp(1.25rem, 0.235vw + 1.195rem, 1.406rem)',
      'lg': 'clamp(1.563rem, 0.291vw + 1.494rem, 1.756rem)',
      'xl': 'clamp(1.956rem, 0.366vw + 1.87rem, 2.2rem)',
      '2xl': 'clamp(2.444rem, 0.451vw + 2.338rem, 2.744rem)',
      '3xl': 'clamp(3.05rem, 0.573vw + 2.916rem, 3.431rem)',
      }
    }
  }
}

:root { --font-size-xs: clamp(0.638rem, 0.122vw + 0.609rem, 0.719rem); --font-size-sm: clamp(0.8rem, 0.15vw + 0.765rem, 0.9rem); --font-size-base: clamp(1rem, 0.188vw + 0.956rem, 1.125rem); --font-size-md: clamp(1.25rem, 0.235vw + 1.195rem, 1.406rem); --font-size-lg: clamp(1.563rem, 0.291vw + 1.494rem, 1.756rem); --font-size-xl: clamp(1.956rem, 0.366vw + 1.87rem, 2.2rem); --font-size-2xl: clamp(2.444rem, 0.451vw + 2.338rem, 2.744rem); --font-size-3xl: clamp(3.05rem, 0.573vw + 2.916rem, 3.431rem); }

@theme { --text-xs: clamp(0.638rem, 0.122vw + 0.609rem, 0.719rem); --text-sm: clamp(0.8rem, 0.15vw + 0.765rem, 0.9rem); --text-base: clamp(1rem, 0.188vw + 0.956rem, 1.125rem); --text-md: clamp(1.25rem, 0.235vw + 1.195rem, 1.406rem); --text-lg: clamp(1.563rem, 0.291vw + 1.494rem, 1.756rem); --text-xl: clamp(1.956rem, 0.366vw + 1.87rem, 2.2rem); --text-2xl: clamp(2.444rem, 0.451vw + 2.338rem, 2.744rem); --text-3xl: clamp(3.05rem, 0.573vw + 2.916rem, 3.431rem); }

// tailwind.config.js module.exports = { theme: { extend: { fontSize: { 'xs': 'clamp(0.638rem, 0.122vw + 0.609rem, 0.719rem)', 'sm': 'clamp(0.8rem, 0.15vw + 0.765rem, 0.9rem)', 'base': 'clamp(1rem, 0.188vw + 0.956rem, 1.125rem)', 'md': 'clamp(1.25rem, 0.235vw + 1.195rem, 1.406rem)', 'lg': 'clamp(1.563rem, 0.291vw + 1.494rem, 1.756rem)', 'xl': 'clamp(1.956rem, 0.366vw + 1.87rem, 2.2rem)', '2xl': 'clamp(2.444rem, 0.451vw + 2.338rem, 2.744rem)', '3xl': 'clamp(3.05rem, 0.573vw + 2.916rem, 3.431rem)', } } } }