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