This is a font-size calc lock based on a linear function, combining a base font size in rem
units and a variable font-size in rem
/px
. Test it by resizing the browser window between 20em and 40em (generally 320px and 960px) and looking at the title and paragraphs.
The title goes from 20px to 40px.
Paragraphs go from 15px to 18px.
This example is resilient to base font-size changes (e.g. when the user explicitly changed the base font-size for all websites in their browser’s preferences). Try it by changing your base font-size (in the browser settings, not by zooming this page) to something like 20, 24 or 32px, and check that 1) the text does get bigger and 2) the linear font-size progression is still working.