# Fluid Type Scale_ Generate responsive `clamp()` font sizes that scale smoothly between two viewport widths — no breakpoints. Set your range, base sizes, and ratios; copy the CSS. The preview below is live: resize the window to watch it flow. Common ratios: 1.2 minor third · 1.25 major third · 1.333 perfect fourth · 1.5 perfect fifth · 1.618 golden. ``` :root { --step-2: clamp(0.6944rem, 0.6577rem + 0.1836vw, 0.8rem); --step-1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem); --step-0: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem); --step-1: clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem); --step-2: clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem); --step-3: clamp(1.728rem, 1.4799rem + 1.2407vw, 2.4414rem); --step-4: clamp(2.0736rem, 1.7334rem + 1.7011vw, 3.0518rem); --step-5: clamp(2.4883rem, 2.027rem + 2.3067vw, 3.8147rem); } ``` ## How it works A fluid size interpolates linearly with the viewport between a minimum and a maximum, then clamps at each end. For every step the calculator finds the size at the min viewport and at the max viewport, then expresses the line through those two points as `clamp(min, intercept + slope·100vw, max)`. Each step's two endpoint sizes come from the type ratio: **size = base × ratiostep**, computed separately at the min and max ends so the scale can tighten on small screens and open up on large ones. Output is in `rem` (relative to your root size) so it respects the user's browser font setting. Tip: paste the variables into `:root`, then use them like `font-size: var(--step-1)`. The middle term needs no `calc()` — `clamp()` is already a math context. ## Accessibility ### Screen reader support --- *Source: [ocxly.com/typescale.html](https://ocxly.com/typescale.html) — OCXLY, free 100% client-side privacy-first tools. Generate responsive CSS clamp() font sizes for a fluid type scale between two viewport widths, with a live preview and copyable CSS.*