Skip to main content

Responsive font calculator

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

Mike Foskett - (update: )

1rem = 16px

Responsive typography font-size calculator

Enter values

Units:

Selector:

Font-size:

Viewport width:

Options:

CSS output

Generated CSS:
    

What are Responsive Fonts?

Also known as: Responsive typography (excellent article), 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.

So how's it calculated?

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).
See Responsive fonts - auto-scaling the root font-size for more detail.

Testing

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 - all cool
  • Mac: Min - Pop-up "Test window" fails
  • Mac: Safari - works but only at full pixel level, no sub-pixels so less smooth, and in some circumstances requires a page refresh. The "Test window" has issues also. Investigating…
  • PC: Firefox Dev, Chrome - all cool
  • PC: IE - though the tool (and site) isn't supported, the method works as expected across IE 9 - Edge.

Accessibility

When the calculation is applied, using the :root selector, it does not reset user-defined preferences, it compliments, thereby maintaining this accessibility feature.

As for applying to other selectors? It appears to work well, though not as throughly tested. The secret sauce here is the 1rem value which reads the user-defined setting before applying the math.

Socialise: