New tool: Responsive font calculator
4th March 2017
A simple utility to easily calculate responsive font values for embedding directly into your CSS.
Easy-peasy, stretch & squeezy.
Current status (25/09/2016): In cross-browser, cross-device testing. Now in full use on this site and in use on components in Tesco's 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:
Tested on Mac so far: Firefox, Safari, Chrome, Opera. PC: Chrome, Firefox, IE9+
As yet I'm uncertain all browsers convert units in the exact same manner.
Applied to a Flexbox layout
This method will scale any object which is sized using em or rem.