Sizing type, leading and vertical dimensions with rem-units

When I started thinking about the redesign of this blog, one of the challenges I wanted to tackle in a smart way was type sizing, especially for smaller screens. Ever since I saw Tim Brown’s talk about modular scales at Build 2010 I’ve been interested in the technique and have used it to inform my designs.

Previous versions of this blog have already been based on a modular scale, yet when it came to smaller screens, it was hard to keep adhering to this scale. What if there was a way to size all the type, leading and vertical dimensions — like top and bottom margins and padding — relatively with one property? I have always been a fan of relative sizing, but have found that em-based values are hard to control over larger codebases. This is where rem-based values come in.

Now I am not going to say this is a silver bullet. Nor am I going to lie and tell you I have seen the light and have changed my mindset in regards to type sizing and vertical dimensions forever. I am going to say that, with a bunch of ingredients, getting this blog to scale down in a responsive manner has been a breeze.

The starting point for this blog post was a flexible design system that was created to respond to different viewports. And with that, I am going to honestly explain how I dipped my toe into these relative sizes, and how this ties in to the use of a modular scale.

From this optimal layout implementation, we start refactoring to relative values. Instead of hurting our brain, and losing flexibility at a later date, we should be smart about implementing this.

3. Use a preprocessor to help you out

To preface this, the easy way of calculating and using rem sizes is to set the html element to font-size: 62.5%. This way, if a browser has the default base type size of 16 pixels, it gets calculated to 10 pixels. All rem-based values then become increments of 10. That being said, going to a smaller base size would cause for fewer increments to smaller type sizes and 16 pixels allows for great relative font sizing down.

So let’s get smart. For all sizes that need to be relative, we need to calculate a rem-based value. For this, I use a mixin called "rem", which was slightly modified from Ray Brown’s github repository:

4. Resize with a single font-size property

After you have refactored all of the applicable values to rem-sizes, it only takes one font-size property change to scale all of your type sizes, vertical dimensions etc. In the current version, the 2012 design, of this blog, I use the following media query: