James Whittaker - Interactive developer, designer and consultant

Em based layouts - Vertical rhythm calculator

comments closed posted on 18 January 2008

Typography on the web has become a point of focus for standards based developers recently. The pioneering work by Mark Boulton and Richard Rutter has highlighted the importance of good web typography. With the advent of more standards compliant browsers and a better understanding of the capabilities of CSS, more developers are spending the extra time and effort in pursuit of typography excellence within their designs.

For years we have touted the phrase ‘the web is not print’ and consequently have forgotten about the basics of designing for type, like working to a baseline rhythm. I have come across many a design where the developer has not thought about typography before diving straight into the code. The result is a mess of random amounts of padding and margin married with unnecessary style rules, this in turn leads to CSS code that is harder to understand and maintain.

One of the key concepts that we can use within our sites is consistent line-height in CSS terms. If you think of a ruled notebook, the lines are all equal heights.

The concept is fairly straight forward but in practice can be confusing especially for a CSS newcomer. All sizing needs to be relative to the base size. This allows for easy scaling up or down while keeping the required spacing and layout consistent, this can be refereed to as an elastic layout. To allow this we need to specify measurements in percent or em.

What is an em measurement?

A pixel is the ‘dot’ on your computer screen. Displays are measured in pixels across and down like 1024 × 768. These dots are unscalable and fixed in size. In some situations this is desirable and it would be better to set your measurements as pixels.

An em is a relative measurement based on the square of the font size at that particular point. As font sizes can vary across differing systems and displays, the result is that the em measurement will always be relatively sized and scalable.

As we are now developing for a wider range of devices and screen sizes we should look to adopt em instead of pixels in all of our designs. Let’s take a look at how.

The browser default size

Modern browsers ( IE7, Opera, Safari and Mozilla ) have a built in default font size of 16px so we can use that as the cornerstone for all of our sizing calculations from now on. At this point we need to make a choice as to the base font-size we are going to work with, nominally this will be 12px or 14px which we can set as a percentage of the 16px browser default. An example for 12px required size would be:

*/ 12 / 16 * 100 = 75% /*

As usual it’s not always that simple and Safari 2 does apply a 13px base size to fixed width fonts. To overcome this situation you will need to tell Safari to use a base size as a set pixel value, like 16px or 12px. Beware though that you must use conditional comments to block that statement from IE. For IE’s font scaling to work correctly it needs to be given a relative base size set in percent or em. For more guidance I refer you to Richard’s article on A List Apart titled – how to size text in CSS.

Working out a required font-size

Well that’s why I built the calculator! to save you the hassle of all of those calculations. I’m going to cheat here and direct you to a great article on 24ways titled – composing to a vertical rhythm. This is the background to the calculations behind my calculator.

Using the calculator

The calculator defaults to a required base font-size of 12px and a 21px line-height. If you have set yours to be any different then please change this now. Some people prefer a line-height to be 1.5 x the base font-size, I personally prefer a larger 1.75 x the font size. It give more breathing space I feel.

Now you have set the base sizes you need to start adding some style rules, so click the button and the interface will expand down. Now give the style a name, this could be p or h1 or any standard rule or your own based on your markup. This name will be in the CSS and can be altered later.

The parent rule is there for creating cascading calculations. Font-sizes in em’s are always based of the parent font-size. So if you need it it’s there if not then leave it set to document base.

Next type your required font-size in pixels and push the calculate button. Your CSS will be there ready to copy to the clipboard and the options to add padding or margins that will live update in the CSS code. BEWARE that if you change your font-size you will need to click the recalculate button as all the other measurements are based off the font-size.

The margins and padding are in line height units, refer to the 24ways article for more understanding or send me an email if your stuck.

The final thing is that you have a simple em calculator for working out pixel to em values based upon the current set font-size. You could use this for working out the width of an element in em’s. Where your design is say 120px you could get that value in em’s. Just enter the pixel value in the box and it will auto calculate.

The calculator

Em Calculator – now for your desktop!

I have now produced the calculator as an Adobe AIR application so that you can run it on your desktop. To run the application you will need the latest Adobe AIR runtime (version 1.0). It will then install and off you go. This version is just the same as the online version shown above. I’m still working on an AIR app with the integrated browser.

Contributions

If you like the EM Calculator and would like to make a contribution to it’s development please use the button below thanks.

Feedback and questions

This site has been built using an elastic layout and em sizing so feel free to have a look at the CSS, usual thing don’t steal it all but look, learn or challenge it.

If you find this useful or have any feedback please let me know. It is a beta version there could be a few little gremlins hanging around which I will address in future versions.

I am working on an Adobe AIR version that has an integrated browser for instant visual feedback so check back for that soon.

add your comment permanent link to article

posted in: CSS  | Flex  | Tools