Responsive CSS Clamp() & Fluid Typography Calculator

The Linear Equation: y = mx + b

Fluid scaling is governed by elementary Cartesian linear geometry. The rate of change between font bounds and screen bounds represents the slope ($m$), while the baseline starting offset represents the vertical intercept ($b$):

Accessibility & WCAG Compliance

Relying solely on viewport units (vw) violates WCAG 2.1 Success Criterion 1.4.4 (Resize Text). Users zooming their browsers to 200% will see no magnification if text is locked to viewport width alone. Our calculator converts the intercept to rem units, preserving zoom accessibility.

Tailwind CSS Config (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      fontSize: {
        'fluid-h1': 'clamp(2.25rem, 3.33vw + 1.5rem, 4rem)',
        'fluid-body': 'clamp(1rem, 0.47vw + 0.89rem, 1.25rem)',
      },
      spacing: {
        'fluid-gap': 'clamp(1rem, 2vw + 0.5rem, 3rem)',
      }
    }
  }
}

Global CSS Tokens (:root)

:root {
  --fluid-min-width: 360;
  --fluid-max-width: 1200;
  --fluid-h1: clamp(2.25rem, 3.33vw + 1.5rem, 4rem);
  --fluid-pad: clamp(1rem, 1.5vw + 0.75rem, 2.5rem);
}

.hero-title {
  font-size: var(--fluid-h1);
  padding-block: var(--fluid-pad);
}