Building a Flexible Layout using EMs and the Golden Ratio

Building a responsive website can be a lot of work, especially if you're going about it the wrong way. Until recently, I had been constructing my layouts using a mixture of percentages and pixels – which is an extremely laborious, long-winded process.

It resulted in many headaches while trying to ensure my carefully crafted sizing of elements and the spacing between them was consistent across various screen sizes.

Each breakpoint in my stylesheet would contain a set of pixel measurements as I readjusted the sizing and spacing between elements. This quickly became messy, inefficient and the perfectionist in me was becoming very unsettled at my inability to maintain perfect consistency across such a vast range of breakpoints.

Fortunately, there is a much easier method. A method that will ensure your perfectly crafted layout will scale in perfect proportion across a range of breakpoints. Better still, it involves changing only a single CSS rule. Yes – just one line of code and your whole layout will scale beautifully.

The Problem with Pixels

A pixel is an absolute value. A single pixel on your desktop layout is equal to a single pixel on your mobile layout. These, of course, are very different contexts with different requirements. To illustrate this with a simple example: if you set a margin between your heading and paragraph at 80px – this may look great when viewed on a laptop, but on a mobile device where the typeface will inevitably be displayed at a smaller size - 80px of spacing would simply be too much.

Now, you could simply set a new value of, for example - 30px using a breakpoint in your CSS, but you would have to adjust this margin for every major breakpoint in your design when the layout scales. This approach isn't scalable, efficient and unless your a masochist, it's by no means enjoyable.

Why you should always use EMs instead

Unlike the pixel, an em is a relative value. One em is equal to the base font size of the element. If the base font size of your element is 16px, then one em is equal to 16px. If you change the base font size, then the em value will change.

Let's look at the previous example and see how it could be recreated using em's. For this, we'll assume the base font size of the document has been set to 10px.

We'll set the heading with a font size of 6em (which is equal to 60px. 10px * 6). If we replace the margin-bottom value of 80px with a value of 8em we still get the same spacing.

10px * 8 = 80px.

Now, here's where the magic happens. You can scale the layout down by simply changing the base font size in your stylesheet. The heading font size will scale down along with its bottom margin in perfect proportion. If you adjust the base font size to 6px, you get the following result:

Heading = 36px (6px * 6em)

Margin = 48px (6px * 8em)

This is a very simple example, but if you build your entire site layout using this approach then most of the heavy lifting of scaling your site for different screen sizes will be managed by simply adjusting the base font size of the document.

I used this approach to build this site – there's only a handful of CSS rules to handle the various breakpoints and these are generally only for clearing floats and adjusting percentage based widths.

Applying in the Golden Ratio

I took this principle a little further and created a basic scale using the golden ratio. Every single CSS measurement value (including the typography) was then selected from a simple 17 value scale, dynamically calculated using the golden ratio. I simply change the base font size at various breakpoints and everything scales perfectly using the golden ratio.

This is a lot simpler than it sounds. I've used SCSS to define the variables and the golden-ratio mixin from Bourbon to calculate the golden ratio. You could however do this with raw CSS and a modular scale generator such as modularscale.com but it's much simpler to use Codekit which has everything you need included out of the box.

Step 1: Set the base font-size of the document

body {

font-size: 14px;

}

This needs no explanation.

Step 2: Create a variable for the calculations

$base-font-size: 1em;

Using SCSS, define a variable of 1em, which is equal to the font-size of the body element. This is used in the next step for performing the calculations.

Step 3: Create the modular scale

$scale-4: golden-ratio($base-font-size, -4);
$scale-3: golden-ratio($base-font-size, -3);
$scale-2: golden-ratio($base-font-size, -2);
$scale-1: golden-ratio($base-font-size, -1);
$scale:   golden-ratio($base-font-size);
$scale1:  golden-ratio($base-font-size, 1);
$scale2:  golden-ratio($base-font-size, 2);
$scale3:  golden-ratio($base-font-size, 3);
$scale4:  golden-ratio($base-font-size, 4);
$scale5:  golden-ratio($base-font-size, 5);
$scale6:  golden-ratio($base-font-size, 6);
$scale7:  golden-ratio($base-font-size, 7);
$scale8:  golden-ratio($base-font-size, 8);
$scale9:  golden-ratio($base-font-size, 9);
$scale10: golden-ratio($base-font-size, 10);
$scale11: golden-ratio($base-font-size, 11);
$scale12: golden-ratio($base-font-size, 12);

Next, create 17 variables and assigned them a value using the golden-ratio mixin from Bourbon. Two values are passed to the mixin, first is the $base-font-size variable and the second value is the increment. This produces a modular scale of 17 values which you can use anywhere in your stylesheet simply by referencing the variable.

If the base font-size of the document changes, the value of the $base-font-size variable will change relative to this, which in turn will flow through the entire dynamic scale above and produce a new set of proportionate values.

Step 4: Using the scale in your stylesheet

Now, whenever you're setting values in your stylesheet, it's simply a case of selecting a value from the scale:

article {

 font-size: $scale1;
 line-height: $scale1;
 margin-bottom: $scale2;

}

This also saves time fiddling with sizing and spacing. You can sleep comfortably knowing that all your measurements and typography choices are based on the golden ratio.

Step 5: Scaling the layout

Want to scale the layout down for mobile? No problem, just change the base font size in a media query and your entire layout will scale dynamically.

@media screen and (max-width: 500px) {

body { font-size: 10px; }

}

Be careful with Inheritance

Depending on the structure of your site, you'll need to be aware of inheritance when using this example. A value of 1em is equal to the base font size of the element, not the body. This shouldn't be much of an issue if you're using em's for all of your values. You could also consider building your site using REM units.

Conclusion

I'm going to wrap things up with a controversial statement:

In 2013, you should not be using pixel values in your stylesheet.

There will be occasional exceptions to this rule, but you should avoid it as much as possible. The method I've just described will save you countless hours of headaches and writing unnecessary code. If you're a perfectionist like me, you will also feel reassurance knowing that your design is scaling harmonically using a modular scale based on the golden ratio and in excruciating accuracy equal to six decimal places.