Skip to main content

Fluid-responsive property calculator

Fluidly scale a property smoothly between viewport widths. Generate the CSS required to create a fluid-responsive property value (e.g. font-size) for embedding directly into your stylesheet.

Mike Foskett - (incept: )

Fluid-responsive property, and responsive font-size typography, calculator

Fluid-responsive property calculator (updates output as values change)
Units:

Ranges:

Range: (of property)
px
Viewport: (browser width)
px
CSS method:
Output Options:

CSS output

Generated CSS:
    

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.

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 (or property) calculations

This calculator generates the figures for the math equation:

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.