Skip to main content

Responsive font calculator

Easily generate responsive font values for embedding directly into your stylesheet.

Mike Foskett - (update: )

1rem = 16px

Enter values

Units:

Selector:

Font-size:

Viewport width:

Options:

CSS output

Generated CSS:
    

What are Responsive Fonts?

Also known as: Flexible Type, Fluid Type, Viewport Sized 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.

How's it done?

This calculator generates the figures for the math equation:

Equation:
font-size  = calc(ZZ + ((1vw - XX) * YY))
Where   XX = viewport_Width_Minimum / 100
        YY = 100 * font_Size_Difference / viewport_Width_Difference
        ZZ = Minimum font-size stated in REM      

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 please 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).

Tested

Scaling conforms to expectations on both class and root selectors.
Still to check effect on user-defined base font setting.

  • Mac: Firefox Dev, Opera Dev, Chrome, Vivaldi - cool
  • Mac Min - Pop-up test window fails
  • Mac Safari - works but only at full pixel level, no sub-pixels so less smooth. The pop-up test window has issues also. Investigating…
  • PC: Firefox Dev, Chrome - all's cool
  • PC: IE - tool (and site) isn't supported, but the method works as expected across IE 9 - Edge.

Socialise: