Getting right to the code, here’s a working implementation: html { font-size: 16px; } @media screen and (min-width: 320px) { html { font-size: calc(16px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { html { font-size: 22px; } } It’s worth looking at our more recent post Simplified Fluid Typography for practical, clamped, viewport-based type sizing. That would scale fon