18th May 2020
A simple utility to easily calculate fluid-responsive property values (font-size) for embedding directly into your CSS.
Updated to include both clamp and min-max methods.
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 from 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:
CSS methods: clamp and min-max
Two more methods have bubbled to the surface of late. Clamp and min-max. Both of which remove the requirement to use media queries, and thereby simplifying the CSS. Here's the same example as above using these methods:
The only downside to these methods is browser support. Currently (2020), for production, I still recommend using the media-query version, but that should change with time. See Can I Use: CSS Math functions.
For more details on these newer methods please see Chris Coyer's article Simplified Fluid Typography.
Applied to a Flexbox layout
The methods presented will scale any property sized using pixel, em or rem. Check out Fluid-responsive property calculator.
Safari resize issue
Safari will not recalculate the font size upon page resize. This issue can be resolved by adding a
min-height: 0vw to the class.