Fluid-responsive property calculator

CSS output

What are fluid-responsive properties, 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, or property, rather than switch at specific breakpoints.

Some versions address the whole page, others manipulate individual selectors but all use a calculation based upon the VW unit to generate the scaling behaviour.

Supported by all modern browsers: Can I Use Viewport units.
This website has been fully fluid-reponsive since 2014, without issue.

CSS methods: clamp and min-max

The upside of both these methods is they remove the requirement to use media queries.

See: Can I Use CSS Math Functions for currently aligned browser support.

For more details on these 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 (or property) calculations

This calculator generates the figures for the math equation:

font-size  = calc(ZZ + ((1vw - XX) * YY))
Where   XX = min_viewport / 100
        YY = 100 * (max_font_size - min_font_size) / (max_viewport - min_viewport)
           = 100 * font_size_difference / viewport_difference
        ZZ = Minimum font-size stated in REM

Equivalent in longhand
font-size = calc(min_font_size_in_REM + (max_font_size - min_font_size) * ((100vw - min_viewport_including_unit) / (max_viewport - min_viewport)))    

Note: 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-responsive typography

Adjustment of the base font-size, usually 16px, is an accessibility feature which allows users to enlarge text content on a web page. Using absolute units (px, pt) or screen-relative units (vw, vh, vmin, vmax) for font-sizes will override that setting. Most calculation methods I see ignore this issue, and actually hinder accessibility, which is quite shameful given it's so easily avoided.

The calculation provided does not reset user-defined preferences, it compliments, thereby maintaining this accessibility feature.

The secret sauce is the calculations minimum font-size (or property value). 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.

Update 2020 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
• Prevent non-numeric inputs
• Grid and Flexbox layout
• Limited to 4 decimal places.

Update 2021:

• Replaced key detection with KeyboardEvent API to resolve event.which deprecation issues
• Negative values enabled on the range inputs
• Cut & Paste enabled on input fields
• Multi-keyboard types accomodated: Qwerty, Dvorak, Azerty, etc
• Numeric keypad enabled
• Added a comment referencing the tools' url
• A few Accessibility improvements.