CSS - Responsive Font Size


Sun Aug 21 2022 02:32:48 GMT+0000 (UTC)

Saved by @webcode #css

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);


The larger the vw value the more visual scaling