Responsive typography with REMs: How to build a scalable typographic foundation in three steps

To date, the practice of responsive web design has been centered on two key techniques.

• Fluid grids: The use of a fluid width grid to contain blocks of content and control layout. Horizontal divisions in content, including the main content column, are set as a percentage of their containing element.
• Adaptive layouts: The use of css3 @media queries to adapt designs to a variety of screen characteristics — most importantly, the resolution of the viewport.

Unfortunately, with only these two techniques, responsive sites struggle to maintain the integrity of their design the further you adjust your screen resolution from a set of defined width breakpoints.

Most of the design problems are typographic. Unlike responsive images and videos, which scale vertically as the width of their content column adjusts, text set in pixels does not automatically adjust its size as the window resizes — it wraps. That quickly leads to lines of text that are either too short or too long to be easily read.

We faced these problems during the most recent redesign of the Bugsnag dashboard. As a result, we introduced a third technique, fluid typography, to the design process.

• Fluid typography: The use of a scalable typographic foundation. Typographic sizes and vertical divisions in content, including all margins and padding, are set in EMs or REMs.

Building a scalable typographic foundation

While designers and developers have embraced the use of relative units, percentages, to divide the horizontal space of a web page, many continue to rely on static units, pixels, to size vertical space. You’ll see this through the use of pixels to set margins, padding, and size.

If you’ve attempted to make responsive an element that uses pixels to define these measures, you’ll know how hard it is to coordinate changes across breakpoints. When you change one element’s pixel-based property value to make a particular breakpoint look better, you’ll have to manually tune every other element’s various pixel-based properties to keep your design in balance.

Introducing EM to your design

EMs enable you to define the relative size, padding, and margin of design components. With em sizing it becomes trivial to manipulate the absolute size of an entire design while preserving the relative size of design elements. Let’s take a quick look at how both EMs and REMs, their more useful counterpart, behave in css:

In css, EMs are sized relative to the font-size of their parent container. While it’s occasionally useful to leverage EM’s nested scaling behavior, in practice you’re almost always going to want 1em to maintain the same value throughout the entire document. REMs, which are always equal to the font-size of the root HTML element, are supported in all modern browsers including ie9+.

If you’re supporting legacy browsers use the broadly supported EM in your css. Ensure that you control for the EM’s nested scaling behavior in your css code. Try to apply font-size directly on type elements like h1, h2, and p, and not nestable container objects like div or li.

1. Sizing type with REM

Let’s begin by selecting a reasonable default value for 1rem in pixels.

html{
  font-size: 16px;   // 1rem = 16px
}

Next, we can define the relative size of a few typographic elements.

h1{
  font-size: 2rem;
}
h2{
  font-size: 1.5rem;
}
p{
  font-size: 1rem;
}

While the sizes of H1 and H2 will change from design to design, anchoring the size of p at 1rem is a useful convention. As you set REM based margins and paddings to create space between objects, working in units relative to your paragraph font-size helps to create a vertical rhythm that will guide the reader’s eye down the page.

2. Setting vertical space with REM

Now that we’ve set the size of our content in REM, we need to ensure that the vertical whitespace between our elements scales in proportion too.

To achieve this, we’re going to add REM sized margins and padding to our type elements. With percentage based left and right padding, section becomes the outer wrapper to a simple one column layout. REM based top and bottom padding is used to create vertical space between each section.

3. Scaling your design with media queries

Now, with our REM based flexible foundation in place, we can change a single css value to manipulate the absolute size of every single element within our design, without changing their relative size.

Check out the full screen demo, and watch as the entire design scales in proportion as you shrink your browser’s width down to its minimum.

Next steps: Responsive typography with modular scale & SASS

At this point, the font sizes that we picked for h1 and h2 are arbitrary, but in real life design situations, it’s far more useful to have a system for creating a meaningful relationship between your type sizes. In my next post I’ll show you how to leverage the power of modular scales to create a family of type sizes, and share SASS techniques to create repetitious strings of media queries like the one above with elegant syntax.