Responsive vs. Fluid Typography

Typography is arguably the most important aspect to any site—it communicates your brand’s message and objectives—yet it is often not given the attention it deserves. The current tech landscape includes all sorts of devices and screen resolutions, and designers and developers are expected to render content to work for all of these possible scenarios. We’ll take a look at two techniques for sizing typography across devices: responsive typography and fluid typography, and the drawbacks of each.

Responsive Typography

The concept of responsive typography has been around for a while and refers to setting static values at specific breakpoints. For example, sites that utilize large heading sizes would also need to properly resize the text to work well on mobile and tablet devices. While this technique is easy to understand and implement, it’s not ideal; there are a lot of intermediary screen sizes being ignored or not considered, leading to undesirable results and requiring a lot more configuration.

Example:

h1 {
    font-size: 1.912em;
}

@media (min-width: 768px) {
    h1 {
        font-size: 2.486em;
    }
}

@media (min-width: 1024px) {
    h1 {
        font-size: 3.232em;
    }
}

Fluid Typography

The concept of fluid typography provides a more integrated user experience across all devices. It’s nearly impossible to account for all device sizes, but with fluid typography, we can dynamically scale text depending on the screen width. To do this simply, we can define a base font size using the viewport width unit (vw). But to implement this effectively, we need to do something so our text is not infinitely scaling—too small where it’s illegible or too large where it blows out the design. We can adapt the “css locks” approach which allows us to contain the scaling between two breakpoints or “gates.” This approach uses a simple formula with CSS calc() where we can plug in 4 variables: minimum font size, maximum font size, minimum viewport width, and maximum viewport width. This technique seems great in theory but falls short in terms of accessibility, essentially hijacking the browser’s font size so impaired users are unable to scale this themselves.

Example:

/* calc( [min font] + ( [max font] - [min font] ) * ( ( 100vw - [min vw] ) / ( [max vw] - [min vw] ) ) ); */

body {
    font-size: calc( 16px + ( 21 - 16 ) * ( 100vw - 320px ) / ( 1024 - 320 ) );
}
Fluid Typography Demo
Fluid Typography Demo

Key Takeaways

It’s always important to consider your audience when making design-related decisions. Maybe fluid typography is not ready to be widely implemented until the accessibility issues are corrected. Maybe a combination of the two will suit your needs. Below are a list of helpful tools to continue learning:

  • Modular Scale – tool for sizing text based on a modular scale
  • Typetura – javascript tool for sizing text with CSS keyframe animations
  • Textblock – javascript tool for typesetting