Beamly
Published in

Beamly

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.

Powering brand results through data-driven consumer experiences

Recommended from Medium

PoshPussy Actually Happened...

Ironhack’s Prework: Julia Cipolat_Challenge1

2 Meta-Principles for UI Writing

Friday Five with our Design Researcher: Adeline

Design Thinking Exercises — Whole Bank

Change Your Lighting, Change Your Mood

Coming Up With An Idea For Your App

Case study : E-commerce’s challenge

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kate Montgomery

Kate Montgomery

Software Engineer at Condé Nast International

More from Medium

Theatre: Lightning App Builder: Design Best Practices

Decorative header image featuring the headshots of Aayushi Bhargava, lead engineer, Lightning App Builder, and Nate Hossner, senior product manager. The tagline reads: Meet designers at TrailblazerDX.

How to Create a Feedback Form on WordPress Using a Plugin — Complete Guide (2022)

Progressive Web Apps (PWAs) in AEM(Adobe Experience Manager)

Access to Adobe Illustrator Preferences