What is Fluid Typography and should I be using it?

A quick introduction to Fluid Typography

Image: Amador Loureiro on Unsplash

Traditionally, web typography is handled using breakpoints. The font size for a given piece of text content will be set for a number of different viewport sizes (small, medium and large, for example) and will then adjust accordingly at each of these points. At Beamly we have recently been investigating whether or not there is a better way to handle this.

A designer will often provide multiple versions of a design with multiple text sizes. So for example, an h1 might be set as 40px, 28px and 24px across large, medium and small viewports respectively. These sizes can be set by a developer using media queries and maybe a breakpoint variable. But what happens when we find ourselves in between breakpoints? We already know that there is a dizzying array of device and viewport sizes for our users to take advantage of. How can we be sure that we provide a consistent user experience and look and feel across these?

Fluid typography offers a solution

Fluid typography techniques are growing in popularity. But what is fluid typography exactly?

Fluid typography is a form of responsive resizing, powered by viewport units.

Available viewport units are:

• vw: ‘viewport width,
• vh: ‘viewport height’
• vmin: a percentage of viewport width or height, whichever is smaller
• vmax: a percentage of viewport width or height, whichever is larger

Viewport units work like px or em but, instead of using fixed sizes, they are calculated as a percentage of a viewport. Note: browser support for viewport units has considerably improved, however vmax is still not supported by Internet Explorer. We don’t require vmax to create create basic fluid typography solutions, however.

Using viewport units for font-size immediately enables smooth scaling of text to take place. However, this only works up to a point. Direct scaling will lead to extremes of size. Moreover, there is a significant accessibility issue as using viewport units on their own affects zooming.

We need a bit more help in order to avoid unreadably small text!

Using ‘calc()’

In order to side step these issues, we can use calc().

calc() in CSS allows us to use calculated values for units. By combining viewport units with px, we can even out and control the rate of growth.

For example:

h1 {
  font-size: calc(20px + 0.5vw);
}

will slow the rate of growth whereas:

h1 {
  font-size: calc(20px + 1.5vw);
}

will speed it up.

This also fixes the accessibility problem as browser zoom can anchor on the non-viewport unit size.

If you’re using SASS, you could add your calc() equation to a mixin in order to automate it.

CSS ‘locks’

In order to take this a step further and to ensure we have total control, we can use Tim Brown’s CSS locks technique to wrap everything in a media query to prevent extremes of size at the upper and lower levels.

For example:

@media (min-width: 480px) (max-width: 767px) {
  h1 {
    font-size: calc( 20px + 0.5vw);
  }
}

The media query ‘locks’ the upper and lower limits of of your variable font-size.

And there we have it, a basic fluid typography set up.

It’s important to note that this is exactly that: basic. We have looked at very simple examples as an introduction to this web typography technique. However, if we were to implement this across a large scale project, the complexity of our code would likely grow and this could start to affect the readability (and therefore the usability) of our CSS.

In conclusion, fluid typography techniques have been around for a while now and can provide a neat solution to some problems in some projects, not to mention a different way to think about how we design web typography. However, consider your use case and required browser support. At Beamly we have taken the decision not to implement fluid typography just yet, because of the complexity of incorporating into our existing, breakpoint based design system. We look forward to revisiting these techniques soon!

Further reading:

https://www.smashingmagazine.com/2016/05/fluid-typography/

https://medium.com/@angelalagao/fluid-typography-868aa1346d9e

https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing/

https://www.madebymike.com.au/writing/fluid-type-calc-examples/

https://css-tricks.com/math-css-locks/

If you enjoyed reading this, we’d love to hear from you. And by the way, we’re growing our Product & Engineering team! If you’re passionate about creating cutting-edge consumer experiences and building scalable solutions, come join us by visiting https://www.beamly.com/#section-join-us.