To date, the practice of responsive web design has been centered on two key techniques.
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.
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.
EMs enable you to define the relative size, padding, and margin of design components. With [CODE]em[/CODE] 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 [CODE]1em[/CODE] to maintain the same value throughout the entire document. REMs, which are always equal to the font-size of the root [CODE]HTML[/CODE] element, are supported in all modern browsers including ie9+.
If you’re supporting legacy browsers use the broadly supported [CODE]EM[/CODE] in your css. Ensure that you control for the EM’s nested scaling behavior in your css code. Try to apply [CODE]font-size[/CODE] directly on type elements like [CODE]h1[/CODE], [CODE]h2[/CODE], and [CODE]p[/CODE], and not nestable container objects like [CODE]div[/CODE] or [CODE]li[/CODE].
Let’s begin by selecting a reasonable default value for [CODE]1rem[/CODE] in pixels.
-- CODE language-css --
font-size: 16px; // 1rem = 16px
Next, we can define the relative size of a few typographic elements.
-- CODE language-css --
While the sizes of [CODE]H1[/CODE] and [CODE]H2[/CODE] will change from design to design, anchoring the size of [CODE]p[/CODE] at [CODE]1rem[/CODE] 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.
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, [CODE]section[/CODE] becomes the outer wrapper to a simple one column layout. REM based top and bottom padding is used to create vertical space between each [CODE]section[/CODE].
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.
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.