EDITOR X from 50px to 150px :root { --maxViewportSize: 1920; --minViewportSize: 320; } font-size: calc(50px + (150 - 50) * ((100vw - 320 * 1px) / (1920 - 320))); font-size: calc(50px + (150 - 50) * ((100vw - var(--minViewportSize) * 1px) / (var(--maxViewportSize) - var(--minViewportSize)))); font-size: calc(1.625rem + 7.5vw); the font-size will be at most 36px, but will decrease to 3vw if the the viewport is less than 1200px font-size: min(3vw, 36px); font-size: max(10vw, 60px); I want the type to go between being 16px on a 320px screen to 22px on a 1000px screen. font-size: min(max(16px, 4vw), 22px); eans font-size:3.5vw, max-font-size:40px, min-font-size:16px font-size: min(max(3.5vw, 16px), 40px); font-size: clamp(16px, 4vw, 22px); clamp() allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size. It has the same effect as the code in Fluid Typography but in one line, and without the use of media queries. font-size: clamp(100%, 1rem + 2vw, 24px); font-size: clamp(16px, 3vw, 32px); font-size: clamp(12px, 2vw, 20px);
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