← / log / 25th Sep, 2007 /

The Incredible Em & Elastic Layouts with CSS

spacer

Almost a year ago, Ty Gossman over at Stylegala asked me to write an article about elastic layouts. The best I could do was a quick email between work. I always meant to come good on that. Thanks for asking; sorry it took so long.

Also available in:

  1. Italiano
  2. Deutsch
  3. Español
  4. Russian

This article will walk you through creating a basic elastic layout; what exactly an “em” is and how to calculate them, how to use ems to create an elastic layer for content with scalable text and images, including basic vertical rhythm.

What is an Elastic Layout?

An elastic layout scales with users’ text size.

More accurately, an elastic interface scales with browser text size—commonly a default of 16px—which users can change if they wish. Some people make a permanent change for accessibility reasons, others use the UI controls to increase text size if they need to.

Elastic design uses em values for all elements. Ems are a relative size, written like this: 1em, 0.5em, 1.5em etc. Ems can be specified to three decimal places like so: 1.063em. “Relative” means:

  1. They are calculated based on the font size of the parent element. E.g. If a <div> has a computed font size of 16px then any element inside that layer —a child— inherits the same font size unless it is changed. If the child font size is changed to 0.75em then the computed size would be 0.75 × 16px = 12px.
  2. If the user increases (or decreases) text size in their browser, the whole interface stretches (or shrinks.)

See the elastic layout example. Adjust text size to see it scale. It contains all the CSS and HTML used in this tutorial.

For other live elastic examples, visit Dan Cederholm’s beautiful and elastic SimpleBits, or resize text on this site.

Elastic interfaces are flexible and accessible for users, and can be almost as precise as pixels for designers. Layouts can be created accurately and quickly using CSS once we grasp the basic relationship between font size, pixels and ems.

Introducing Em, the Elastigirl of CSS

The em is as powerful and flexible as Elastigirl, she doesn’t mind what the font size is, whether 12px, 16 or 60, she will always be exactly equal to it.

The em is a unit of measurement in typography. What is it and how did it get its name? Here’s a little history:

An em was originally equal to the size of the metal block used to cut a single letter of type for a specific font. It was roughly equivalent to the width of a capital letter “M”.

Further em reading:

  1. The amazing em unit
  2. Em discussion on Typophile

Those with designers’ eyes amongst you might be saying, “hold up a second, letters don’t take up equal space.” You’d be right: Computers use kerning to adjust the horizontal space each letter occupies on the screen, making them equidistant and balanced. Originally, the metal block was trimmed or “kerned” to make the horizontal padding around each letter the same.

So, in CSS, an em is actually a vertical measurement. One em equals the vertical space needed for any given letter in a font, regardless of the horizontal space it occupies. Therefore:

If the font size is 16px, then 1em = 16px.

Getting Started

Before we start throwing ems around a stylesheet, we need to know what the default font size is in the browser. Luckily, we do:

All popular browsers have a default font size of 16px. Therefore, at the default browser setting, 1em = 16px.

In Firefox, you can check default font size via Tools > Options > Content.

So, before a single CSS selector is written, the browser has a 16px deafult font size. The <body> inherits it unless styled otherwise using CSS. Therefore 1em = 16px, 0.5em = 8px, 10em = 160px and so on. We can now specify any element size we need to using ems!

Setting Body Font Size

Some erudite folks suggest setting the <body> font size to either the required font size for body text, or the equivalent of 10px (0.625em or 62.5%) to make calculating child lengths easier. Both have merit, but it seems more logical to me to leave it at the browser default and change it for child elements if necessary.

So, we know that the body font size will be 16px by default. We also know that if a person has changed their settings, our elastic interface will not break, but adjust. Perfect, so we can set:

body{ em; }

However, (gasp) IE has a problem with ems. Resizing text from medium (default) to large in IE5/6 would lead to a huge increase in font size rather than the gradual one expected. So another selector is needed to get IE to behave:

html{ %; }

As Patrick H. Lauke previously pointed out, it’s an IE correction, not a hack—it doesn’t rely on a browser bug to work.

IE will now behave and resize text gracefully, rather than in mighty leaps of stupefying grandeur.

Let’s give our <body> some more style, and center everything in the viewport (this will be important later for our content wrapper.) Our initial CSS ends up like this:

html{
%;
} 

body{
em;
font-family: georgia, serif;
text-align: center;
color: #444;
background: #e6e6e6;
padding: 0;
margin: 0;
}

Formula to Convert Pixels to ems

When first creating elastic pages, you will find yourself doing calculations a lot. Keep a calculator handy.

Tip: Find font size for any element with Chris Pederick’s brilliant Web developer toolbar using: Information > Display element information.

I am no maths wizard, so I needed a simple formula to remember. As a designer, I know pixels intimately, so that’s where I start. I calculate what 1px is in ems and multiple by the pixel size I need. That gives me the equivalent em value. We know that 1em is always equal to the font size of the parent element, therefore:

1 ÷ parent font-size × required pixel value = em value

For your bookmarks: Pixel to ems conversion table for font sizes.

Don’t let my talk of forumla put you off. Elastic interfaces are a joy to build so let’s get practical and create some page elements.

Building an Elastic Container: The Supersuit

To create the centred content layer in the example, we need a little HTML. Let’s be really imaginative and give it an ID of “wrap”:

<div id="wrap">
…
</div>

We want it to be 740px wide to comfortably fit an 800×600px viewport like the example. What is 740px in ems? Let’s find out:

  1. Set a 740px width in ems for our layer:

    We know that the parent element (<body>) has a font size of 16px. Our child layer (<div id="wrap">) will inherit it. So we can calculate what 1px is in ems:

    1em = 16px. Therefore, 1px = 1 ÷ 16 = 0.0625em.

    Ems allow only three decimal places. More is fine in calculations but before writing CSS, round it up to three.

    Then multiply by 740 to get ems:

    0.0625em × 740 = 46.25em

    Or do the whole calculation in one go with the formula:

    1 ÷ 16 × 740 = 46.25em

    (1 ÷ parent font-size × required pixel value = em value)

    You can use the same formula to calculate ems for any width or height you need. Find 1px is in ems for that element. Multiple that by the pixel value you require to get the em equivalent.

  2. Create CSS:

    Apply the width in ems, center the layer in the viewport using the auto left and right margins, give it a 1px gray border with a white background and align the text left:

    #wrap{
    .25em;
    margin: 1.5em auto;
    border: 0.063em solid #ccc;
    background: #fff;
    text-align: left;
    }
    

Now we have an elastic wrapper for our content!

Styling Text with ems

Let’s insert a <h1> and a <p> to our wrapper like so:

<div id="wrap">

<h1> … <h1>
<p> … <p>

</div>

Essential reading:

The Elements of Typographic Style applied to the Web created by Richard Rutter based on the masterwork by Robert Bringhurst.

While we're here, we might as well add some typographic goodness by selecting a basic leading and adding some vertical rhythm, with everything expressed in ems. Here’s a little more history:

Leading (pronounced “led–ing”) was traditionally the insertion of lines of lead underneath rows of text. It is expressed in CSS as line-height but instead of adding space below, it increases the space above and below each line of text.

In the example, I’ve used the same font sizes as Richard Rutter did in his outstanding chapter on vertical motion to make your reading as consistent as possible. The heading font size will be 18px. The paragraph font size will be 12px with an 18px line height. 18px will be our basic leading—the most important value for our interface. Everything else will be proportional to that.

A note on CSS inheritance: Our content wrapper, <div id="wrap">, has no font size set so it has inherited the 1em (16px) font size from its parent, the <body>. Any elements within our wrapper will also inherit that font size, unless we tell the browser otherwise, as we’re about to do.

  1. Set a 12px font size with 18px line height and margin for paragraphs:

    We know that our paragraphs have inherited a 1em (16px) font size from its parent, <div id="wrap">. From our previous calculation, we already know that 1px is 0.0625em. We simply multiple that by 12 to get the em value for 12px:

    0.0625 × 12 = 0.750em

    Or do the whole calculation in one go with the formula:

    1 ÷ 16 × 12 = 0.750em

    (1 ÷ parent font-size × required pixel value = em value)

    Then apply that to the CSS:

    p{
    .750em;
    }
    

    Margin, line height, padding etc. in ems are all relative to the font size of the element they belong to.

    To calculate the desired line height and margin of 18px for our basic leading we do the following:

    18 ÷ 12 = 1.5em

    Dividing the desired line height (18px) by the element font size (12px) gives us the em value for line height. In this example, the line height is 1 and a half times the font size: 1.5em.

    Add line height and margin properties to the CSS:

    p{
    .750em;
    line-.5em;
    margin: 1.5em;
    }
    

    Now the browser will say to itself, “Oh, line height and margin is set to 1.5em, so that should be 1.5 times the font size. What’s the font size, again? 12px? OK, cool, make line height and margin 1.5 times that, so 18px.” It will do all that faster than Dash too, and render it. Wow.

  2. Set 18px font size for the <h1>:

    The <h1> has inherited a 1em (16px) font size from it’s parent, <div id="wrap">. So, we already know what 1px is from before: 0.0625em. We simply multiple that by 18 to get the em value for 18px:

    0.0625 × 18 = 1.125em

    Or do the whole calculation in one go with the formula:

    1 ÷ 16 × 18 = 1.125em

    (1 ÷ parent font-size × required pixel value = em value)

    Then apply that to the CSS:

    h1{
    .125em;
    }
    

    To retain our vertical rhythm we want to set an 18px line height and margin. Easy: If the font size is 18px then 18px in ems is 1em! Let’s add the properties to the CSS (and make the font weight light:)

    h1{
    .125em;
    line-em;
    margin: 1em;
    font-weight: 300;
    }
    

We now have vertical rhythm! Let’s move on to images.

Sizing Images in ems

To retain the rhythm of the the example page, the size of an image should be a multiple of the basic leading.

Our image has a width and height of 90px (18px × 5.) It has right and bottom margins of 18px and is floated left in the paragraph text. This is the HTML:

<p>
<img src="/img/spacer.gif"> 

The image is a child of the paragraph—it’s parent—so we know that the image has inherited a font size of 12px. Therefore, to calculate the image width and height we do the following using the formula:

1 ÷ 12 × 90 = 7.5em

(1 ÷ parent font-size × required pixel value = em value)

Then apply that to the CSS:

p img{
.5em;
.5em;
}

We already know what 18px is in ems for the parent paragraph, so let’s add the margin property (and the float) to the CSS:

p img{
.5em;
.5em;
margin: 0 1.5em 1.5em 0;
float: left;
}

N.B. The image does not need to be within a paragraph to give it semantic meaning. The was used in this instance as an example of how to take inheritance into account whilst calculating ems.

Now we have a supersuit elastic container with some elastic content and vertical rhythm like the example. With a bit of a luck, you have a better insight into creating elastic layouts, and designing with ems in particular. We’re done, you’re the Edna Mode of designers! The elastic example page has all the HTML and CSS you need. View source to grab it.

Using Elastic Design

Some of the benefits of elastic design for designers are precision, control and accessibility. However, some people have expressed concerns that allowing the content to expand past the edge of the viewport at larger text sizes could be problematic. Also, text will sometimes wrap and flow within the framework when the text size is changed; a minor issue, but worth noting.

Concerns have also been expressed over the loss of image fidelity at increased text size. However, if a person changes their text size, the chances are they will also benefit from larger images, and browsers get better at resizing images as they increase in size. Hopefully browsers will get even better at resizing, or maybe we’ll soon have SVG and scalable background images to use.

Implementing elastic design can deliver a deep understanding of ems in CSS. It definitely has a place in every designer or developer’s toolkit, whether in combination with other techniques in hybrid layouts or on its own.

And finally…

Any omissions or errors in this article are my own, so please let me know if I’ve missed something. If you know of other good and relevant resources elsewhere, please add them to the comments or email me and I’ll include them.

I also take full responsibility for all refences to The Incredibles—my 2 sons gave kind permission for me to use their figures for the title image—and I hope Elastigirl doesn’t mind being compared to the em unit.

References and Further Reading

  1. Resources:
    1. Elastic layout example (from the article)
    2. Reference table of common pixel font sizes and em equivalents
  2. Further reading:
    1. The amazing em unit
    2. Em discussion on Typophile
    3. The Elements of Typographic Style applied to the Web — Richard Rutter
    4. CSS2: Font size
    5. CSS2: Assigning property values, Cascading, and Inheritance
    6. CSS Layouts: The Fixed. The Fluid. The Elastic. — Mike Cherim
    7. Fixed or fluid width? Elastic! — Roger Johansson
    8. Elastic Design — A List Apart

Can you Translate?

Also, translated into Italiano by Nicola Pressi, and Deutsch by Pascal Birchler.

If you are bilingual and would like to translate this article for non English speakers, please download my vCard via the about page and contact me. Thanks!

Share

  • spacer
  • spacer
  • spacer
  • spacer
  • spacer

Browse More Articles

79 Comments

  1. 1. By Chris Shiflett on 25th Sep ’07 at 05:33am

    I love the typography in this article and especially the notes in the margins. Oh, and the content is pretty good, too. :-)

  2. 2. By Volkan Görgülü on 28th Sep ’07 at 09:03am

    Great Article, its language is very easy to understand. EMs have never been simplified like this.

  3. spacer 3. By Jon 陳 on 28th Sep ’07 at 16:51pm

    Thanks Chris. I know your type, you love a good letterform :)

    Volkan: Thanks! That’s the highest praise I could wish for. I’m glad you found it useful.

  4. 4. By TheTyG. :) on 5th Oct ’07 at 08:48am

    thanks for the tutorial (finally) Jon.

    It looks like you've done your homework on the subject, before and since.

    Part of the layout that was sort of wowing me is also the way browsers are handling using [control] + [+ and -], making elastic layouts function even better, but also wreaking havoc on some if not implemented properly.

    Thanks again Jon, it looks like a great study on the subject!

    -ty

    PS: I still pen a site review now and then at SG, anyone else who would like to do the same is more than welcome, contact Simon at SG ;)

  5. 5. By Paul on 5th Oct ’07 at 11:03am

    I've always had a sexual attraction for the Mom from The Incredibles. Is that wrong?

  6. 6. By patrick h. lauke on 7th Oct ’07 at 05:14am

    very comprehensive write-up that nicely demystifies the issue. good stuff!

  7. spacer 7. By Jon 陳 on 8th Oct ’07 at 01:14am

    You're welcome Ty, hope you found it useful. Paul, she definitely has moves!

    Thanks Patrick, much appreciated!

  8. 8. By Malte on 14th Oct ’07 at 09:32am

    i'd like to thank you too, jon. i finally got round to learn how to use em for non-typographic elements correctly – and in an entertaining manner. oh, and i love your site design!

  9. 9. By Adam Twardoch on 19th Dec ’07 at 00:01am

    You write:

    Here’s a little history: An em was originally equal to the size of the metal block used to cut a single letter of type for a specific font. It was roughly equivalent to the width of a capital letter “M”. Those with designers’ eyes amongst you might be saying, “hold up a second, letters don’t take up equal space.” You’d be right: Computers use kerning to adjust the horizontal space each letter occupies on the screen, making them equidistant and balanced. Originally, the metal block was trimmed or “kerned” to make the horizontal padding around each letter the same.

    Your explanations are rather confusing, so let me clarify.

    In traditional typography, each piece of type (a “sort”) consisted of a metal block (the “body”), with a letter shape (the “face”) cast on the top. The height of the body was equal across the entire font and constituted the “type size,” also called “point size,” since it was measured in points (roughly equal to 1/72 of an inch). So in a 12 pt font, the bodies of all pieces of type were exactly 12 pt high — no matter if the face cast on it was of an uppercase letter (such as “A” or “K”), a lowercase letter with an ascender (such as “b” or “k”), a lowercase letter with a descender (such as “p” or “g”), a lowercase letter that fit to the x-height (such as “a”, “n”, “o” or, indeed, “x”), a figure or a symbol.

    Each sort had a specific “body width”, also called the “advance width”. The face had its width, too, and it was usually narrower than the body the extra spaces between the face boundary and the body boundary were called “sidebearings”. Since a “w” is typically much wider than an “i”, each sort had a different face width, and also a different advance width (the sidebearings were roughly equal though they were narrower for round shapes than for straight shapes).

    Some letters had a “negative sidebearing”, i.e. a piece of the face stuck outside of the body boundary — for example the right part of the letter “f”. That hanging piece of face was called a “kern”. Kerning was not mandatory — it was an extra effort to improve the spacing, but there fonts that existed without kerning (and still, the body width of each sort was different).

    In many typefaces, the letter “M” was cast on a body that was roughly square, i.e. its width was equal to its height. Therefore, typographers called the body width that was equal to the body height (i.e. to the point size) an “em”. Incidentally, in many typefaces, the letter “n” was cast on a body in which its width was half its height, so 1/2 of the em was often called an “en”. Keep in mind that the naming was always just a convention: an em was always equal to the point size, and an en was always equal to half the point size, but the actual letter “M” in different fonts could be wider or narrower than the em, and letter “n” could be wider or narrower than the en.

    The em was primarily a unit of horizontal measurement, especially for spaces and dashes. An em space was a space as wide as the point size (i.e. it was a perfectly square body with no face), and an en space was a space in which the body width was half its height. There were additional spacing sorts such as a quad space (the width equal to 1/4 of the point size), and others equal to 1/3 em, 1/5 em etc. A font was also typically equipped with an em dash (cast on a square body), an en dash (its width was 1/2 of the body height) and many more dashes.

    If you realize the difference between the body and the face of a font, you’ll also understand why at the same point size, some fonts appear larger and some appear smaller. The point size is the height of the body, and the body is some “blank” space identical for all characters in the font. In metal fonts, this body was a physical block of metal. In digital fonts the body height is only a piece of virtual space, but it still exists — it is sometimes called “UPM size”.

    On the same body, one designer could make a face of the letter “H” that was fairly large, while another designer could put an “H” face that was smaller — but their bodies (i.e. point sizes) were still the same. This is why fonts such as Verdana, Georgia or Arial are, as they say, “large on the body” (i.e. their faces are relatively large relatively to the body), while Calibri, Constantia or Times New Roman are rather “small on the body” (i.e. their faces are rather small compared to the body).

    The body (the “block” on which all letters are “cast”) is the same but the face (the actual drawing of the letters) vary in size across those fonts. So at 12 pt, the body of Georgia and Times is the same, but the face of any given letter in Georgia is larger than the face of the same letter in Times.

    And yes, the term “typeface”, or earlier “type face” comes from the reasoning given above: one 12pt font would have the same body as another 12pt font (since the body is just the block the letters sit on) but the faces (i.e. the graphical shapes cast on the bodies) would be different. On the other hand, the same “type face” (i.e. graphical shape) would be cast on different fonts that varied in point sizes — in other words, Times 10pt would be one font, Times 12pt would be another font, but they would both be the same “type face”: Times. Since digital outline fonts are scalable to any size, the difference between “typeface” and “font” is of different nature: Times.otf in OpenType format, Times.ttf in TrueType format and Times.pfb in Type 1 format are three fonts of the same typeface (Times).

    Of course, in CSS, there is no unit called “en”. To get an “en”, you need to write 0.5em.

    Regards,

    Adam

  10. spacer 10. By Jon 陳 on 19th Dec ’07 at 02:39am

    Hi Adam, thanks for taking the time to provide such a detailed explanation. I might have characterised my brief bit of history as simplistic rather than confusing—it was deliberately so; this article is more about using ems as a unit of measurement in CSS rather than about ems per se—but your extended comment is very much appreciated nevertheless. :)

    In fact, it re-inforces my feeling that Web designers could use more information about how type is digitised and rendered to better understand what’s going on when they set it for the Web.

  11. 11. By Online Druckerei on 26th Dec ’07 at 06:03am

    Thanks for the usefully resources. What i need was "<body>":

    html{

    %;

    }

    body{

    em;

    font-family: georgia, serif;

    text-align: center;

    color: #444;

    background: #e6e6e6;

    padding: 0;

    margin: 0;

    }

    Thanks for sharing it. Very usefully 4 me ;) I added your site in my favorites. THX from Germany

  12. 12. By Gordon Mackay on 1st Jan ’08 at 04:58am

    Hi Jon,

    Firstly, Happy New Year!

    I have been reading through your website quite often lately, and have to say that you've done a great job of getting me interested in typography… so much so that I've decided to redesign my site.

    I’m still doing a lot of head scratching with CSS inheritance issues when using relative font-sizing, and still get a lot of things wrong… but thanks for inspiring me!

  13. 13. By Ralph on 21st Jan ’08 at 02:12am

    Hey Jon,

    I've avoided using .em in any real way whilst putting sites together and always felt a bit lame about the whole thing. I think this article will change that for me, I’m going to redesign a few things using .em instead of px and see how it goes.

    Thanks for the article!

    R :)

  14. 14. By Joshua Gay on 21st Jan ’08 at 15:48pm

    This is a really great article, thank you for writing it!

    To add to the digital typesetting discussion, I believe that a wonderful book to read is Alan Hoenig’s "Tex Unbound." The book is probably not worth buying if you do not plan on writing LaTeX or TeX, but, if you have a chance to read the first couple of chapters, it is well worth it!

  15. spacer 15. By Jon 陳 on 22nd Jan ’08 at 05:59am

    Good luck Gordon and Ralph. Let me know how you get on. Thanks to everyone for sharing your thoughts. :)

  16. 16. By baby on 23rd Jan ’08 at 05:28am

    Interesting that the name is a typographical term. A lot of designers don’t place typography on the list of designing. In other words, they don’t see typography as a part of design or as important to design.

    I think that’s incredibly weird. Typography is an integral part of design, and good designers know that. Those that say it isn’t are either (a) bad designers or (b) good designers, who are using good typography naturally, without realising that what they're doing is actually typography.

  17. 17. By Paul Walker on 26th Jan ’08 at 05:00am

    Since This post’s about elastic layouts, I thought I'd mention that your liquid layout is broken for me unless I increase my font size. (eg: the Name, Email, etc fields are above the comment box; posts are pushed below their title & byline…) (ironically, these both move elements into their more 'conventional' places) and your main menu has gaps in it. (this happens consistently and cross browser, probably because I set my default font size to 13px, and it happens with many (most?) elastic sites worse than yours (as most don’t resize images))

    Also, the issue of content flowing beyond the window borders can sometimes be solved by giving % max-widths to elements. One issue I've yet to solve is that of borders, as they can disappear at small font sizes, and disrupt vertical flow when they should be equal to fractions of pixels (while once this would be fine, in the aggregate it totally destroys any hope of keeping to a baseline grid

  18. 18. By Property Investment Guy on 28th Jan ’08 at 08:31am

    Nice article, thankyou

    It was explained very clearly and helped me understand how EM’s work.

  19. 19. By Ian Sutherland on 30th Jan ’08 at 13:36pm

    Superb article. Very informative and useful.

    Many Thanks

  20. 20. By Ryan on 4th Feb ’08 at 10:20am

    Great Article

    Perhaps you could expand on it to explain margins for elements and the maths behind them? I seem to have quite a bit of difficulty keeping the vertical rhythm when setting margins using ems.

  21. 21. By Ty on 6th Feb ’08 at 11:48am

    Hi Jon,

    So do you have a magic formula for your universal stylesheet, you didn’t touch on the reset, but beyond that what’s your formula for sizing all the H-tags 1 through 6?

    I still like the grandaddy reset at:

    www.leftjustified.net/journal/2004/10/19/global-ws-reset

    Some of the others are overly complicated maybe?