Skip to main content

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

Fluid-responsive property calculator
Units:
Ranges:
Range: (of property)
px
Viewport: (browser width)
px
Choose CSS method:
Options:

CSS output

Generated CSS:

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:

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 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:

Safari 9+ (non-iOS) hack:
/* https://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome */
_:default:not(:root:root),
html {
  animation: webkitfix 1s forwards infinite;
}
@-webkit-keyframes webkitfix {
  100% {
    z-index: auto;
  }
}

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.