Responsive Web Design Using Ems

Whilst working on this site design I decided that I would like to try a different approach to responsive design and after meeting Chris Armstong at New Adventures and the Typecast guys from Front I stumbled across their write up for The Goldilocks Approach to responsive web design.

To be honest I have always tried to stay away from using EM for sizing text let alone trying to size sections of content using them but the Goldilocks example just seemed to make so much sense. You start by building out from the most comfortable paragraph width for reading, usually around 30em is a great starting point for a 16px (1em) font size. This then becomes the base for the rest of your content. As your page widens you may want to move to 2 columns but always keep that maximum paragraph width of 30em’s in mind. Of course as the browser shrinks you then have a fluid layout which shrinks to accommodate the device or window size. The whole idea is really quite freeing as you are no longer trying to work with many different media queries to satisfy the huge range of devices out there. Now the only concern you have is working within the three states: “Too Big”, “Too Small”, and “Just Right”.

Converting Pixels To Em’s

To really get your head round sizing from pixels to EM I used a great tool which has now been permanently bookmarked. Pixel to Em takes all the maths out of converting from, well, pixels to em’s and vice versa. Another great article by Richard Rutter on A List Apart helps to explain the process and best practices for using EM.

Using A Baseline Grid

The final piece in the Typographic jigsaw, using a baseline grid, has really helped me to focus on what many would argue is the most important part of your web design: Typography. I added some simple javascript which you could turn on and off to reveal the baseline grid that I worked to (24px or 1.5em), having this to easily turn on and off enabled me to always keep the baseline in mind whilst laying out the content.

This whole subject has really captured me and it will definitely be something I continue to explore and work with, each element will require a more in depth post to explain how it works but for now I thought this would provide a brief overview with links to some really useful resources for reading up on.

As a final note you can get a invite to Typecast which is a really promising Typography tool from the guys at Front, which enables you to experiment designing to a baseline and experimenting with Typography. I have been using it for a couple of months now and it is really shaping up to change how we design for the web.