Work out responsive breakpoint sizing instantly with clear inputs, formula shown and shareable results.
Fluid type is a straight line through the two breakpoint sizes: the slope is the size difference over the viewport difference, expressed in vw by multiplying by 100. Writing the result as a clamp expression means one CSS declaration handles every screen size, replacing a stack of media queries.
Slope
slope = (max font - min font) / (max viewport - min viewport), x 100 for vw
Intercept
intercept = min font - slope x min viewport
slope = (max font - min font) / (max viewport - min viewport), x 100 for vw. Fluid type is a straight line through the two breakpoint sizes: the slope is the size difference over the viewport difference, expressed in vw by multiplying by 100.
Writing the result as a clamp expression means one CSS declaration handles every screen size, replacing a stack of media queries.
Enter font size at the small breakpoint, font size at the large breakpoint, small breakpoint, large breakpoint. The defaults shown are a realistic worked example — swap in your own figures to get a result you can use.