html { font-size: min(max(1rem, 4vw), 22px); } /* or */ body { font-size: clamp(100%, 1rem + 2vw, 24px); } /* with variables */ h1 { --minFontSize: 32px; --maxFontSize: 200px; --scaler: 10vw; font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) ); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter