CSS Clamp() Generator

Create fluid, responsive typography with real-time preview

⚡ JavaScript is required for the interactive generator. Please enable JavaScript to use this tool.

Font Settings

Unit System
Minimum font size at smallest viewport
Maximum font size at largest viewport

Viewport Settings

Usually mobile width (e.g., 320px)
Usually desktop width (e.g., 1280px)
Quick Presets:

Live Preview

The quick brown fox jumps over the lazy dog
Current font size: 24px
Generated CSS 
font-size: clamp(16px, calc(16px + 16 * ((100vw - 320px) / 960)), 32px);
Media Query Equivalent 
/* Traditional approach */
Copied!