If a font size should scale linearly with the viewport width (or height), e.g. from 12px at 375w to 24px at 1280w, the interpolated font size can be calculated using the slope-intercept line equation (y = mx + b
) with x
set to 100vw
(or vh
) and using px
units for b
.
Make your life easier by using Wolfram Alpha to compute the equation of the line passing through two points (x1, y1)
and (x2, y2)
, where x1
and x2
are the size of the viewport dimension (width or height) and y1
and y2
are the target font sizes at those viewport dimensions.
Continuing the example above, for 12px at 375w to 24px at 1280w, the points are (375,12)
and (1280,24)
.
For the line between those two points, Wolfram Alpha returns the equation:
y = (12/905)x + (1272/181)