Fluid-responsive font-size calculator
Fluidly scale typography smoothly across viewport widths. Generate a fluid-responsive property (font-size) value for embedding directly into your stylesheet.
Mike Foskett - (incept: )
Updated 2021: Fluid-responsive property calculator
Responsive font-size typography, or fluid-responsive property, calculator
What are fluid-responsive fonts / fluid typography?
Also known as: Responsive typography (excellent article), Flexible Type, Fluid Type, Viewport Sized Typography, Fluid Typography, and even Responsive Display Text.
They all leverage the viewport width, and / or height, to smoothly scale the font-size rather than switch at specific breakpoints.
Some versions address the whole page, others manipulate individual selectors but all of them use a calculation based upon the
VW unit to generate the scaling behaviour.
Supported by all modern browsers: Can I Use Viewport units.
CSS methods: clamp and min-max
The upside of both these methods is they remove the requirement to use media queries.
Unfortunately, at present, they don't have the level of browser support that the media-query version has. This will change with time, see: Can I Use CSS Math Functions for currently aligned browser support.
For more details on these newer methods please see Chris Coyer's article Simplified Fluid Typography.
If you experience SASS issues with min-max, try capitalising Min and Max. SASS is case-sensitive while CSS is not. Thanks to Ana Tudor for that tip.
Fluid typography calculations
This calculator generates the figures for the math equation:
VW is used which supplies a different font-size on devices spun between portrait to landscape. Personally, I do not consider this an issue but if you do, drop me a line and I'll see what I can work up.
The alternative is to use
vmin (or eventually
vmax once IE plays catch-up). See Responsive fonts - auto-scaling the root font-size for more detail.
Mike Riethmuller has written an excellent article Precise control over responsive typography, though it underplays my accessibility concerns.
Accessibility of fluid type
When the calculation is applied it does not reset user-defined preferences, it compliments, thereby maintaining this accessibility feature.
The secret sauce is the calculations minimum font-size. It is stated in REM, which reads any user-defined setting before applying the math. This is why the unit on this value does not change with the selected preference. Why not use a percentage value? Unfortunately, percentage values fail in IE and Edge.
Safari resize issue
The simplest fix for Safari fluid-typography appears to be adding
min-height: 0vw. See Martin Wolf's Codepen Fluid Typography Safari 11 Issue Fixed.
Alternatively, Paul O'Brian over on Stack Overflow offered this hacky solution:
The 2020 update included:
- Variable property name
- CSS clamp option
- CSS min/max option
- Safari resize fix option
- Longhand calculation option
- Settings preserved with localStorage
- Improved HTML form semantics
- Prevention of non-numeric inputs
- Grid and Flexbox layout
- Limited to 4 decimal places.
Social links and email client: