Fluid Type Calculator
Create responsive typography that scales smoothly between any viewport size. No more media query breakpoints—just fluid, mathematical type scales powered by CSS clamp().
Dynamic Scale
Add or remove sizes from your type scale. Use mathematical ratios or customize each size individually.
Live Preview
See how your typography looks at any viewport width with the interactive preview slider.
Multiple Exports
Export as CSS variables, Tailwind config, or a complete Tailwind plugin ready for production.
Scale Ratio
Apply a mathematical ratio
Viewport Range
Type Sizes
Export
:root {
/* Fluid Typography Scale */
/* Generated with Workhorse Fluid Type Calculator */
/* Viewport range: 375px - 1536px */
--font-xs: clamp(0.75rem, 0.7096rem + 0.0108vw, 0.875rem);
--leading-xs: 1.5;
--tracking-xs: 0em;
--font-sm: clamp(0.875rem, 0.8346rem + 0.0108vw, 1rem);
--leading-sm: 1.5;
--tracking-sm: 0em;
--font-base: clamp(1rem, 0.9596rem + 0.0108vw, 1.125rem);
--leading-base: 1.6;
--tracking-base: 0em;
--font-lg: clamp(1.125rem, 1.0846rem + 0.0108vw, 1.25rem);
--leading-lg: 1.5;
--tracking-lg: 0em;
--font-xl: clamp(1.25rem, 1.1693rem + 0.0215vw, 1.5rem);
--leading-xl: 1.4;
--tracking-xl: -0.01em;
--font-2xl: clamp(1.5rem, 1.3385rem + 0.0431vw, 2rem);
--leading-2xl: 1.3;
--tracking-2xl: -0.02em;
--font-3xl: clamp(1.875rem, 1.6731rem + 0.0538vw, 2.5rem);
--leading-3xl: 1.2;
--tracking-3xl: -0.02em;
--font-4xl: clamp(2.25rem, 1.8463rem + 0.1077vw, 3.5rem);
--leading-4xl: 1.1;
--tracking-4xl: -0.02em;
--font-5xl: clamp(3rem, 2.3540rem + 0.1723vw, 5rem);
--leading-5xl: 1;
--tracking-5xl: -0.02em;
}How Fluid Typography Works
Fluid typography uses CSS clamp() to create font sizes that scale linearly between a minimum and maximum viewport width.
The Formula
clamp(min, preferred, max)The min value is the smallest the font will ever be. The max is the largest. The preferred value uses viewport units to scale between them.
Example Output
clamp(1rem, 0.5rem + 1.5vw, 2rem)This creates a font size that starts at 1rem on small screens, scales up based on viewport width, and caps at 2rem on large screens.
Ready to use in your project?
Export your custom type scale and drop it into any project. Works with vanilla CSS, Tailwind, or any framework.