A simple utility to easily calculate responsive font values for embedding directly into your CSS.
Easy-peasy, stretch & squeezy
This method is in full use on this site, and was in commercial use on components in Tesco's 2017 Food Love Stories
In this example the font size is set at 1rem (16px) up to 48rem (768px) viewport width.
It then starts increasing to meet the upper defined value 2em (32px) at 120rem (1920px) wide.
All controlled by a single CSS statement.
Remember to define all font-sizes in em, rem or percent.
Font scaling doesn't stop at the top setting but continues to increment at the same rate. This behaviour may be stopped, or adjusted further, by adding another media query:
Applied to a Flexbox layout
This method will scale any object which is sized using em or rem.