How to use Fluid Type Generator
A fluid value interpolates between two viewport widths, while clamp() enforces lower and upper size limits. This works well for type scales and spacing that should grow gradually.
- Choose minimum and maximum sizes in pixels, then the viewport widths at which those sizes should be reached. The maximum viewport must exceed the minimum.
- Select font-size, padding, gap or margin. All use the same interpolation equation, but apply to different layout properties.
- Use the simulated viewport slider to inspect intermediate values. The generated CSS uses real viewport width through vw; it is not tied to the preview panel width.
A practical starting point
A heading can grow from 24px at 360px wide to 48px at 1200px wide, while staying within those bounds.
font-size: clamp(24px, 13.7143px + 2.8571vw, 48px);
Common mistakes
- Do not choose the same minimum and maximum viewport: the interpolation slope would be undefined.
- Pixel-based limits do not automatically respect a user’s preferred text size as well as rem-based limits. Consider adapting the output to your project’s accessible type scale.
Frequently asked questions
What happens outside the chosen viewport range?
Below the minimum width, the size stays at its minimum. Above the maximum width, it stays at its maximum.