The Incredible Em & Elastic Layouts with CSS

Elastigirl saying “I’m an em” and Mr Incredible saying “and I’m a PX”

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:

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:

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.
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:

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{ font-size:1em; }

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{ font-size:100%; }

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{
font-size: 100%;
} 

body{
font-size: 1em;
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:

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.
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{
width: 46.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.

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{
font-size: 0.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{
font-size: 0.750em;
line-height: 1.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.
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{
font-size: 1.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{
font-size: 1.125em;
line-height: 1em;
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="90.jpg" alt="Clevedon Pier" /> Lorem…
</p>

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{
width: 7.5em;
height: 7.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{
width: 7.5em;
height: 7.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

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!

85 Comments

1. By Chris Shiflett on 25th Sep ’07 at 12:33pm

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

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

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

3. By Jon 陳 on 28th Sep ’07 at 23: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. By TheTyG. :) on 5th Oct ’07 at 15:48pm

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. By Paul on 5th Oct ’07 at 18:03pm

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

6. By patrick h. lauke on 7th Oct ’07 at 12:14pm

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

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

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

Thanks Patrick, much appreciated!

8. By Malte on 14th Oct ’07 at 16:32pm

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. By Adam Twardoch on 19th Dec ’07 at 08: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 width: 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. By Jon 陳 on 19th Dec ’07 at 10: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. By Online Druckerei on 26th Dec ’07 at 14:03pm

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

html{

font-size: 100%;

}

body{

font-size: 1em;

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. By Gordon Mackay on 1st Jan ’08 at 12:58pm

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. By Ralph on 21st Jan ’08 at 10: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. By Joshua Gay on 21st Jan ’08 at 23: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. By Jon 陳 on 22nd Jan ’08 at 13:59pm

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

16. By baby on 23rd Jan ’08 at 13:28pm

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. By Paul Walker on 26th Jan ’08 at 13:00pm

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. By Property Investment Guy on 28th Jan ’08 at 16:31pm

Nice article, thankyou

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

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

Superb article. Very informative and useful.

Many Thanks

20. By Ryan on 4th Feb ’08 at 18:20pm

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. By Ty on 6th Feb ’08 at 19:48pm

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:

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

Some of the others are overly complicated maybe?

22. By sTYle on 6th Feb ’08 at 19:52pm

Do you like these H-tag base style settings?

h1 { font-size: 1.6em; }

h2 { font-size: 1.5em; }

h3 { font-size: 1.4em; }

h4 { font-size: 1.3em; }

h5 { font-size: 1.2em; }

h6 { font-size: 1em; }

I think these were from the tripoli CSS framework.

23. By maYO on 7th Feb ’08 at 10:57am

Nice article. Em-based layouts really improve usability when used correctly.

But they won’t be necessary anymore, because the modern browsers (that is, IE7 and Firefox 3, Opera) can also properly scale fixed layouts.

24. By andymurd on 7th Feb ’08 at 11:29am

Great article Jon, it really helps clear up the maths, but I have a question…

As ems are a unit of vertical measurement that change in terms of pixels when the font size is changed, do you recommend that ems are used for horizontal sizing. Your article sets the #wrap div width in ems, which will grow with ctrl-+. This will eventually overflow the screen needing users to scroll horizontally (a bad thing, especially for partially sighted users).

For this reason I usually use ems for vertical sizing but percentages for horizontal when building elastic designs. Unfortunately it means that using the golden ration in grid based layouts is not really possible. Do you have any comments or recommendations on this?

25. By Reynder webdesign on 7th Feb ’08 at 11:36am

Very could article. I made it een example for all my designers. Article too is well designed!!

26. By max on 7th Feb ’08 at 13:10pm

really great article, just bookmarked! ;-)

27. By Rick on 7th Feb ’08 at 13:27pm

This is a very well written explanation on ems and elastic layouts. Very pleasant and easy to read, understand, and apply – the most important when reading a tutorial. Also, you did a great work on typography on your site, with a vertical rhythm adequate, increasing your article’s overall readability. Thank you Jon!

28. By Rory on 7th Feb ’08 at 13:39pm

When first creating elastic pages, you will find yourself doing calculations alot.

"Alot" is not a word. I think you mean "a lot". (Yes, it matters. You might even say it matters a lot.)

29. By Andrew on 7th Feb ’08 at 14:47pm

I only WISH your site supported elastic widths, I scrolled the most of any website I visited all day trying to read this article.

30. By Will Kelly on 7th Feb ’08 at 15:42pm

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.

Jon, good article and very useful chartm but your text sizing method has one major drawback. If elements with font-sizes set in em’s are nested, i.e with lists, these elements inherit the font size. Therefore each child element will be 0.75em (or 75%) of the previous one:

See an example here. (Would have posted the code put it was coming out really ugly!)

I would recommend against using that method and setting the global font size in the body tag i.e. 'font-size:75%' for 12px. Then only setting different font-sizes where necessary.

31. By Jon 陳 on 7th Feb ’08 at 16:31pm

Thanks Rory. Duly corrected. I’m pretty certain no-one said spelling didn’t matter. I love a polite pedant, ask Chris.

Andrew, this site is elastic. I have a feeling you’re referring to a liquid layout, not an elastic one? Line lengths are kept to a measure I find comfortable, in the same way that your own site is fixed width and optimised for 1024px widths and above. Personal taste, personal choice, as with Paul Walker’s 13px default font size. ;)

Ty/sTYle: CSS reset’s are personal choice, again. Eric Meyer’s reset is a good one. Regarding the example scale, I think Robert Bringhurst said it much better than I:

Use the old familiar scale, or use one of your own devising, but limit yourself, at first, to a modest set of distinct and related intervals.

maYo, thanks, but I think with a bit of digging around you’ll find that only Opera does zoom well. It’s an on-going debate—and one for another post—but for now I won’t be retiring the em unit.

Ryan, that may be a post for another day . :)

andymurd: I think you’re partially right, but pure elastic layouts are actually useful for people with some visual and cognitive impairments: The layout is constant, allowing people to stay oriented even when they increase text size. However, user experience with viewport overflow and text size generally is subjective as others have said—some graciously, others not. :) It’s worth bearing in mind that hybrid layouts using max-width to enable the content to expand only as far as the viewport are available. Whatever people choose is up to them, and the audience they seek to serve.

Thanks Will, interesting point, but that is solved with a simple font-size:1em on the first child. Retaining the default ensures that even images are sized correctly in ems. IE (surprise) will compute incorrectly against a parent length equivalent to 12px. My preference born out by some minor but painful computed size errors in complex layouts is not to adjust the body, and only set font size where necessary for specific elements. I’ve been meaning to do something about code and pre handling in comments for a while though, thanks for the reminder! :)

Thanks everyone for all the positive replies. If yours weren’t positive, but were insightful and well-mannered, thanks to you too! On a final note, before comments are closed shortly, elastic layout techniques are only one option as I made clear in the article. The choice is yours.

32. By Vern on 9th Feb ’08 at 14:51pm

WooHoo!

I have fallen behind in keeping up with CSS web design. I started designing web sites before animated gifs.

This is now my favorite design method. As an artist and designer… maintaining the layout is an obsession with me. Plus I had just started to design a software tutorial site and this is PERFECT for that type of thing. Being able to zoom in and maintain layout so you don’t lose your place and can see the images larger is a big bonus.

Here’s my first attempt I put together in about a day

One thing I've found is that once I get the images "correct" based on ems I pretty much "design" by just changing the sizes with out worrying about the exact pixel relationship. If I don’t like the size or position I just tweak the values til I like it.

I am late to the game but can catch up quick I hope.

33. By vern on 10th Feb ’08 at 23:03pm

This might be over the top… but I added in a javascript to automatically change the body fontsize style based on the width of the browser window. The user changing of text size still works.

Auto Scaling

34. By vern on 11th Feb ’08 at 14:13pm

I haven’t finished my sample yet but I wanted to get this in before comments were closed.

I think you can combine "flexible" with "elastic". Decide where you want the flexible widths to happen and use percent instead of ems (or possibly a percent of a parent?). When the page is resized the copy still changes based on the em units but selected elements would increase in width beyond the original sizes or proportions. Some layout changes would still occur but that is the trade off with flexible layouts anyway.

Personally I hate it when copy reflows on flexible layouts… I always have to review what I was reading to find the spot I was at.

Recently I was playing around with using HTML and CSS to do a simple "print" newsletter using using columns support in FF and print only styles. It worked great. HTML as page layout. I was trying to avoid buying a new application and be able to put the newsletters on line without needing to post PDF.

-vern

35. By Jon 陳 on 11th Feb ’08 at 14:57pm

Vern, I liked the auto-scaling example. It would be perfect with SVG, and harks back to a principle of people using their browsers more effectively to control layout.

The hybrid layout you refer to could be achieved using the max-width property and an expression hack for IE 6 (unfortunately.) Thanks for the contribution, nice work on the elastic example. :)

36. By vern on 11th Feb ’08 at 15:11pm

This is icky and rough but the idea is there. To get "wider" viewing area you still have to shrink the text size.

Flexible-elastic layout

-vern

37. By vern on 11th Feb ’08 at 15:27pm

You have no idea how cool and simple this type of web design is. I am in heaven! I found this totally by accident doing a search for something else I've already forgotten. Great job on the article and I am happy it was on the first page of the google search results. ;)

It’s taken me AGES to break my old habit of using tables for web design. It was ingrained in my DNA. Now I have to redo everything. ;)

p.s. Seriously my first web site was done before animated gifs were viewable in browsers. I remember one day someone in my office showing me what he called a rendering "bug" in Netscape. Standards shmanders… back then there was only really just one browser and no CSS so who cared?

-vern

38. By Leon Paternoster on 14th Feb ’08 at 09:25am

I agree that using font-size: 100% is best, for two reasons. Firstly, it encourages large, readable text; secondly, 16 is handily divisible by 2, 4, 8 and, erm, 16. This helps the maths when figuring out margins and padding.

I also use * {margin: 0; padding: o;} at the top of the style sheet. This gives complete cross-browser control of margins and padding, and also gets rid of padding problems that traditionally require an IE hack to solve.

39. By N on 18th Feb ’08 at 21:51pm

I love this article. Thank you for sharing us:). You are the best!

40. By John Ingle on 20th Feb ’08 at 20:59pm

Thank you for the excellent introduction to em! I'll certainly use this knowledge when designing templates for my own site as well as my web applications at work.

Just a note, for those not mathematically inclined you can also calculate your ems with a single operation. Just do:

required pixel value / parent font size = em value

You can thank your order-of-operations for that simplification. :)

41. By Lee Jorgensen on 23rd Feb ’08 at 09:41am

Excellent article – I’m going to have to do some experimenting now; I tend to use fixed width pixel based layouts becuse it’s generally easier to do and of course you don’t have the image resizing problems. Anyone have any tips for dealing with resizing images proportionally whilst retaining detail and avoiding the jaggies?

42. By Jon 陳 on 26th Feb ’08 at 11:41am

Thanks for adding that John. It’s exactly what I do. However, it means designers have to know inheritance initmately. Calculating from a starting point of 1px in ems for any element seemed to be the most friendly way or orientating folks for this starter tutorial.

Lee, browsers render the jaggies and artifacts when they resize. Hopefully, they’ll get better at recalculating. You could use content filtering to display SVG to browsers who support it, and bitmaps to those who don’t.

43. By Braintrove.com on 29th Feb ’08 at 17:50pm

Thanks… great stuff!

44. By Ty (tzmedia) on 3rd Mar ’08 at 15:01pm

Roger at 456BereaStreet, just posted a suggestion for adding maximum widths to Em based layouts, makes sense check it out here:

[Ed: Link fixed]

http://www.456bereastreet…

For IE 6 he’s dug up something called Dynamic Properties which I hadn’t heard of.

45. By Jon 陳 on 3rd Mar ’08 at 16:25pm

Ty, that would be a hybrid layout. It’s a well-known technique to have the content start to wrap rather than overflow the viewport. There are accessibility benefits for some users, but not all— especially those who welcome the layout retaining its original form to orientate themselves, as previously mentioned in the article. Hybrid layouts are something I’ll be covering soon.

Please consider posting links using <a href…> as indicated above the textarea rather than pasting an unlinked URL.

46. By dharma on 4th Mar ’08 at 05:59am

Thank you for this article which will be a boon to so many designers across the world. The shift from tables to CSS has its own learning curve and the shift from Pixels to ems is even scarier. This article makes it look so simple. Appreciate the hard work behind this.

47. By Jordan Beckett on 4th Mar ’08 at 20:19pm

Hey Jon, brilliant description! I can finally come out of the stone-age and develop web sites that work on the majority of browsers! Thanks so much, man.

I have a new question for ya: I'd like to allow people to comment on my photos on my personal web site (www.the-flipside.com), in exactly the same format as your comments… well not EXACTLY, but you know what I mean. How do I developt this? Perhaps it’s good subject matter for your next article?

All the Best,

Jordan Beckett

48. By Jordan Beckett on 4th Mar ’08 at 20:30pm

Oh, one more thing… pretty subtle, but no www? Even when I put in the "www." it takes it out. What gives? Your broke the interweb? haha, or is it just a new movement of apple-pie loving anti-www websites?

Pardon the facetious humor :-) I’m really interested, and have been astonished what I've learned in the last 30mins of reading your web site. Thanks for all the OBVIOUS hard work you do to share this stuff! Cheers!

All the Best,

Jordan Beckett

49. By Olga on 5th Mar ’08 at 07:12am

Hi, Jon! Tnx for article! I read more about it early and i think this em calculator will be usefull for an onyone

50. By Aapo Saaristo on 6th Mar ’08 at 23:07pm

Very nice writeup. I've been seeing more and more elastic layout recently. IKEA, for instance, has a really nice full-page elastic layout.

Jordan Beckett: www is evil. I absolutely HATE it when I try to visit a website, and either get "connection timed out" or some httpd-placeholder page, because I didn’t add the all powerful www. in the hostname.

All the sites doing this are further enforcing the popular misconception that all domain-names start with www. www. is an appropriate prefix when there are multiple servers responding on the same domain, and they need to be differentiated. (like billing.host.tld, db.host.tld and such) Otherwise it’s useless.

When a user enters an URL into the browser, they're already expecting a WWW-server, serving files with http on port 80, there’s no need for the user to have to make an extra effort to indicate they are interested in browsing the world wide web, and not, say, the gopher network.

This is why we can advertise websites as site.tld, and not as http://www.site.tld:80/index.html.

As you might have guessed from my humongous post, that was supposed to consist mostly of praise to Jon for a great article, I’m a strong advocate of no-www, and on my personal blog, for instance, have taken the agressive stance of forwarding users accessing the site with www. to a very ascetic page describing my views on the matter in great depth.

Sorry for going on like that. This Link is VERY related (wife is already in bed, and it’s 2 AM) :D Thanks again Jon for a great article.

51. By Skim on 9th Apr ’08 at 08:12am

Everyone should do like this! Good article!

52. By Max on 27th Apr ’08 at 20:45pm

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

53. By David on 16th May ’08 at 15:15pm

Yep, I never knew why people used ems instead of px or % until I read this article. Now everything I do is in em’s! Unless I need a set background image, it looks like I have a new found love…

54. By Jean-Claude Guasp on 23rd May ’08 at 21:52pm

Hi,

After some intensive search on the web, with IE7, I cannot get 2 img right below the other without gap (these are rather small graphic img showing vertical graph lines). IE keeps adding 3 px in-between the 2 img. On the other hand, it’s feasible and OK with Moz FireFox.

my question is: how to get rid of these 3px?

Your article is interesting but doesn’t mention any relation with Point sizes!

My web search didn’t return any proper article either. So my 2nd question is: could you attempt to give us a comparison table?

Thank you very much for your time.

JC Guasp

1)

55. By Jon 陳 on 27th May ’08 at 11:04am

Jean-Claude, you’re a little off-topic, but try setting img{ vertical-align: bottom } for those images. If that doesn’t work, posting your markup and CSS to CSS-discuss might be your next port of call.

Regarding pt sizing: The article is concerned with ems. I would recommend only using points for print styles. In CSS, 1pt should be the equivalent of 1/72 inch (as it is in print typography), and that will continue in CSS3. Of course, that depends entirely on display resolutions and physical size.

56. By Sam on 23rd Jun ’08 at 08:12am

Hey really good blog, was very informative and you put across alot of key points.

I never knew why people used ems till now.

Well Done,

Sam

57. By Richard Williams on 14th Jul ’08 at 11:57am

I can’t get this to work now with FireFox 3. Reducing body font-size to 0.8em, say, will reduce the character sizes but the image sizes and other measurements aren’t changed. However the same pages work for me in IE6. Anyone got a solution to this?

58. By chris on 20th Jul ’08 at 10:40am

Having read a fair bit about typography in the past in connection with manipulating things like LaTeX, Postscript, and PDF programmatically….I thought that em was "meant" to be used for horizontal sizing, and ex to be used for vertical sizing.

Still learning on how to make use of CSS properly.

This article and other similar articles and sites, are a breath of fresh air. They stand apart from most other sites that merely provide information in barely acceptable format, which i tend to scan instead of reading.

Well done.

59. By Optik Kablo on 27th Jul ’08 at 13:17pm

HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out

60. By Disabled Designer on 13th Aug ’08 at 08:36am

A great explanation, loving CSS and the possibilities. keep up the good work

61. By Shivanand Sharma on 19th Aug ’08 at 16:28pm

ah, I just lost my comment. The preview button is broken.

It’s a blessing to find this article on Google’s first page. Especially for those starting out with ems. I’m designing a wordpress theme and this article is a part of my research. I spent another half-an-hr reading the comments (and the article within the comment – the history of em). Very informative. Many thanks.

62. By Edde Beket on 6th Sep ’08 at 00:32am

Nice explanation, again. Personally I do use the "set 1em to 10px" trick. It makes life so much easier. After resetting to 10px/1em all you have to do to get a certain size, is divide by 10. 720px becomes 72em, 16px is 1.6em and so forth.

<code>

body {

font-size: 62.5%; /* Resets 1em to 10px */

}

</code>

BTW: would resetting to 62.5% also make IE behave? Or is it necessary to reset to 100% first?

63. By nickel22 on 17th Sep ’08 at 15:57pm

wow! this article is fantastic, very clean and simple explanation …for an argument that i have always seek to understand!

thanks, thanks a lot Jon (and thanks to Nicola for italian translation, perfect!)

bye nickel

64. By oyun on 26th Sep ’08 at 06:16am

It’s a blessing to find this article on Google’s first page. Especially for those starting out with ems. I’m designing a wordpress theme and this article is a part of my research. I spent another half-an-hr reading the comments (and the article within the comment – the history of em). Very informative. Many thanks.

65. By Andrew Powell on 6th Oct ’08 at 12:55pm

Great article. Just stumbled across this today. Very well written.

66. By estetik on 27th Oct ’08 at 17:15pm

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.

67. By ilmu komputer gratis on 19th Nov ’08 at 03:25am

Wow… how a great article! It really inspired me to build elastic layout. thanks.

68. By Ania on 19th Nov ’08 at 10:46am

It is realy great designs on this site…… this is very helpfull site for web designers…iam a web designer so i am very happy now !

This looks good! Really good tutorial include so many helpful informations!

Thanks

69. By VectorTherapy on 24th Nov ’08 at 20:42pm

Excellent Article ! Really opens your eyes.

70. By Jermaine Maree on 28th Nov ’08 at 21:31pm

This is a great tutorial. Only issue I find with Em & Elastic Layouts is the use of background images. Things tend to break pretty easily then. Only sugesstions I have seen is using nested div’s with z-index’s. Any suggestions? :D

71. By Stuart Anderton on 11th Dec ’08 at 01:18am

Thanks for the article Jon. I tried doing this earlier in the year, it’s a shame I didn’t find your article sooner. I wonder the value of this method as we move to more advanced browsers that actually zoom the pages rather than simply increase the font size. I think both IE and Firefox do this already.

72. By Gilda on 22nd Dec ’08 at 23:14pm

Been struggling with my design being totally destroyed by using ctrl+ in firefox (somehow IE not following the CSS just adjusted itself, which is why is took me so long to identify the problem) redefining all my sizes in ems just solved the problem. Thank you, Thank you, Thank you, this was a great tutorial.

Gilda

73. By oyunoyna on 28th Dec ’08 at 18:20pm

very clean and simple explanation …for an argument that i have always seek to understand!

74. By Jocelyn on 3rd Jan ’09 at 03:54am

Great write up! Very clear & organized

75. By Jawad Farooq on 4th Jan ’09 at 23:50pm

Thanks, Very easy and and complete explanation

Great, much appreciate

76. By oyunlar on 5th Jan ’09 at 17:15pm

It really inspired me to build elastic layout. thanks.

77. By flashoyun on 5th Jan ’09 at 17:17pm

thanks for nice stuff

78. By Leicester on 5th Jan ’09 at 21:22pm

Really well written and explained article, had always wondered what the uses of ems were.

79. By Antti on 11th Jan ’09 at 15:43pm

Stupid question, but isn’t zooming in newest browsers making elastic layouts automatically out from fixed layouts? So you can use pixels, but they behave like EM-layouts in older browsers (like IE6). Or am I missing something?

80. By Electricspace on 14th Feb ’09 at 23:26pm

For those who want to work with em’s: I’ve written a simple program in .NET to a pixel size to em. I use it in my day-to-day work:

You can download the program “Pixel 2 em calculator" from http://electricspace.blogspot.com/2009/02/pixel-2-em-calculator.html

81. By cv örneği on 21st Feb ’09 at 21:04pm

It is realy great designs on this site…… this is very helpfull site for web designers…iam a web designer so i am very happy now !

This looks good! Really good tutorial include so many helpful informations!

82. By ev arkadaşı on 21st Feb ’09 at 21:05pm

wow! this article is fantastic, very clean and simple explanation …for an argument that i have always seek to understand!

thanks, thanks a lot Jon (and thanks to Nicola for italian translation, perfect!)

İlhami ÇAKMAK

83. By Steve on 22nd Feb ’09 at 15:47pm

Hi this is a great article and very clear. I just thought i’d let you know that the equation you gave for working out pixels to ems can be simplified from:

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

to:

required pixel value / parent font size = em

84. By hans on 25th Feb ’09 at 07:39am

Good tutorial to illastrate em as unit of layout. To view the elastic effect, you have to use javascript to change the size of font (em) and the size of layout must be re-calculated.

The layout generator here could dynamically view the effect.

85. By Jon 陳 on 25th Feb ’09 at 08:55am

Thanks Steve. The simplified equation can also be found on the pixels conversion page.

Hi Hans. If I understand you, it might be worth noting that you don’t have to use JavaScript. When this tutorial was written only Opera did page zoom dynamically by default.

Em-based layouts still have a place in our arsenals, in the same way that liquid ones do. Newer browsers having zoom built-in doesn’t automatically make fixed width the best option — especially for true universal design.

Thanks for all your feedback and contributions, folks.

Lately in the Log

Introducing Analog — Wed, 30th Dec 2009 {16}

Just before Christmas, a few friends and I launched a new company,…

SxSW Pick ’n’ Mix for 2010 — Fri, 4th Sep 2009 {10}

I know I’m woefully late. Voting ends today! I don’t really…

Review: HTML and CSS Web Standards Solutions — Wed, 19th Aug 2009 {22}

I’m so glad that this book exists. I’ve been hoping someone…

All Change, Please — Thu, 13th Aug 2009 {33}

‘One door closes, another opens’ is an idiom that has always…

OSCON 2009: incoming! — Sat, 18th Jul 2009 {2}

Just a quick note. More of a test really. Can I crank out a quick post in…

SkillSwap Goes Typographic — Mon, 9th Mar 2009 {16}

Right. I’m blitzing this. Two posts in one day. It’s unheard…

Remarks from the log

By çiçekçi in OSCON 2008, the Year of the Butterfly:

very nice article..thanks…

By seo services in The Paragraph in Web Typography & Design:

designers to create narrative spaces, consisting of text, images, video, etc. add context and readability of these…

By Annie Ha in Review: HTML and CSS Web Standards Solutions:

Hi Jon, As a graphic design student, I strive for a better structure and well design website. I was looking for a…

By Shane in Days like these:

Great post, makes me feel better that not only I have days like these! Thanks.

By Joey in Introducing Analog:

Long time reader - first time commenter! Good luck with the new company, hope it all works out for you :)

By Emcee Hao in Complex Type: CSS Fix, ClearType Miss:

dude, awesome type. rock on.

Footnotes

This simple dish was created with a little xHTML, a dash of CSS and a pinch of PHP. It’s garnished with hAtom, hCalendar, XFN, hCard and rel-tag with a large slice of accessible intent. Hopefully it plays nicely, all the time.

1. By Chris Shiflett on 25th Sep ’07 at 12:33pm

I love the typography in this article and especially the notes in the margins. Oh, and the content is pretty good, too. :-)
2. By Volkan Görgülü on 28th Sep ’07 at 16:03pm

Great Article, its language is very easy to understand. EMs have never been simplified like this.
3. By Jon 陳 on 28th Sep ’07 at 23: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. By TheTyG. :) on 5th Oct ’07 at 15:48pm

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. By Paul on 5th Oct ’07 at 18:03pm

I've always had a sexual attraction for the Mom from The Incredibles. Is that wrong?
6. By patrick h. lauke on 7th Oct ’07 at 12:14pm

very comprehensive write-up that nicely demystifies the issue. good stuff!
7. By Jon 陳 on 8th Oct ’07 at 08:14am

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

Thanks Patrick, much appreciated!
8. By Malte on 14th Oct ’07 at 16:32pm

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. By Adam Twardoch on 19th Dec ’07 at 08: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 width: 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. By Jon 陳 on 19th Dec ’07 at 10: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. By Online Druckerei on 26th Dec ’07 at 14:03pm

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

html{

font-size: 100%;

}

body{

font-size: 1em;

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. By Gordon Mackay on 1st Jan ’08 at 12:58pm

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. By Ralph on 21st Jan ’08 at 10: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. By Joshua Gay on 21st Jan ’08 at 23: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. By Jon 陳 on 22nd Jan ’08 at 13:59pm

Good luck Gordon and Ralph. Let me know how you get on. Thanks to everyone for sharing your thoughts. :)
16. By baby on 23rd Jan ’08 at 13:28pm

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. By Paul Walker on 26th Jan ’08 at 13:00pm

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. By Property Investment Guy on 28th Jan ’08 at 16:31pm

Nice article, thankyou

It was explained very clearly and helped me understand how EM’s work.
19. By Ian Sutherland on 30th Jan ’08 at 21:36pm

Superb article. Very informative and useful.

Many Thanks
20. By Ryan on 4th Feb ’08 at 18:20pm

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. By Ty on 6th Feb ’08 at 19:48pm

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:

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

Some of the others are overly complicated maybe?
22. By sTYle on 6th Feb ’08 at 19:52pm

Do you like these H-tag base style settings?

h1 { font-size: 1.6em; }

h2 { font-size: 1.5em; }

h3 { font-size: 1.4em; }

h4 { font-size: 1.3em; }

h5 { font-size: 1.2em; }

h6 { font-size: 1em; }

I think these were from the tripoli CSS framework.
23. By maYO on 7th Feb ’08 at 10:57am

Nice article. Em-based layouts really improve usability when used correctly.

But they won’t be necessary anymore, because the modern browsers (that is, IE7 and Firefox 3, Opera) can also properly scale fixed layouts.
24. By andymurd on 7th Feb ’08 at 11:29am

Great article Jon, it really helps clear up the maths, but I have a question…

As ems are a unit of vertical measurement that change in terms of pixels when the font size is changed, do you recommend that ems are used for horizontal sizing. Your article sets the #wrap div width in ems, which will grow with ctrl-+. This will eventually overflow the screen needing users to scroll horizontally (a bad thing, especially for partially sighted users).

For this reason I usually use ems for vertical sizing but percentages for horizontal when building elastic designs. Unfortunately it means that using the golden ration in grid based layouts is not really possible. Do you have any comments or recommendations on this?
25. By Reynder webdesign on 7th Feb ’08 at 11:36am

Very could article. I made it een example for all my designers. Article too is well designed!!
26. By max on 7th Feb ’08 at 13:10pm

really great article, just bookmarked! ;-)
27. By Rick on 7th Feb ’08 at 13:27pm

This is a very well written explanation on ems and elastic layouts. Very pleasant and easy to read, understand, and apply – the most important when reading a tutorial. Also, you did a great work on typography on your site, with a vertical rhythm adequate, increasing your article’s overall readability. Thank you Jon!
28. By Rory on 7th Feb ’08 at 13:39pm

When first creating elastic pages, you will find yourself doing calculations alot.

"Alot" is not a word. I think you mean "a lot". (Yes, it matters. You might even say it matters a lot.)
29. By Andrew on 7th Feb ’08 at 14:47pm

I only WISH your site supported elastic widths, I scrolled the most of any website I visited all day trying to read this article.
30. By Will Kelly on 7th Feb ’08 at 15:42pm

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.

Jon, good article and very useful chartm but your text sizing method has one major drawback. If elements with font-sizes set in em’s are nested, i.e with lists, these elements inherit the font size. Therefore each child element will be 0.75em (or 75%) of the previous one:

See an example here. (Would have posted the code put it was coming out really ugly!)

I would recommend against using that method and setting the global font size in the body tag i.e. 'font-size:75%' for 12px. Then only setting different font-sizes where necessary.
31. By Jon 陳 on 7th Feb ’08 at 16:31pm

Thanks Rory. Duly corrected. I’m pretty certain no-one said spelling didn’t matter. I love a polite pedant, ask Chris.

Andrew, this site is elastic. I have a feeling you’re referring to a liquid layout, not an elastic one? Line lengths are kept to a measure I find comfortable, in the same way that your own site is fixed width and optimised for 1024px widths and above. Personal taste, personal choice, as with Paul Walker’s 13px default font size. ;)

Ty/sTYle: CSS reset’s are personal choice, again. Eric Meyer’s reset is a good one. Regarding the example scale, I think Robert Bringhurst said it much better than I:

Use the old familiar scale, or use one of your own devising, but limit yourself, at first, to a modest set of distinct and related intervals.

maYo, thanks, but I think with a bit of digging around you’ll find that only Opera does zoom well. It’s an on-going debate—and one for another post—but for now I won’t be retiring the em unit.

Ryan, that may be a post for another day . :)

andymurd: I think you’re partially right, but pure elastic layouts are actually useful for people with some visual and cognitive impairments: The layout is constant, allowing people to stay oriented even when they increase text size. However, user experience with viewport overflow and text size generally is subjective as others have said—some graciously, others not. :) It’s worth bearing in mind that hybrid layouts using max-width to enable the content to expand only as far as the viewport are available. Whatever people choose is up to them, and the audience they seek to serve.

Thanks Will, interesting point, but that is solved with a simple font-size:1em on the first child. Retaining the default ensures that even images are sized correctly in ems. IE (surprise) will compute incorrectly against a parent length equivalent to 12px. My preference born out by some minor but painful computed size errors in complex layouts is not to adjust the body, and only set font size where necessary for specific elements. I’ve been meaning to do something about code and pre handling in comments for a while though, thanks for the reminder! :)

Thanks everyone for all the positive replies. If yours weren’t positive, but were insightful and well-mannered, thanks to you too! On a final note, before comments are closed shortly, elastic layout techniques are only one option as I made clear in the article. The choice is yours.
32. By Vern on 9th Feb ’08 at 14:51pm

WooHoo!

I have fallen behind in keeping up with CSS web design. I started designing web sites before animated gifs.

This is now my favorite design method. As an artist and designer… maintaining the layout is an obsession with me. Plus I had just started to design a software tutorial site and this is PERFECT for that type of thing. Being able to zoom in and maintain layout so you don’t lose your place and can see the images larger is a big bonus.

Here’s my first attempt I put together in about a day

One thing I've found is that once I get the images "correct" based on ems I pretty much "design" by just changing the sizes with out worrying about the exact pixel relationship. If I don’t like the size or position I just tweak the values til I like it.

I am late to the game but can catch up quick I hope.
33. By vern on 10th Feb ’08 at 23:03pm

This might be over the top… but I added in a javascript to automatically change the body fontsize style based on the width of the browser window. The user changing of text size still works.

Auto Scaling
34. By vern on 11th Feb ’08 at 14:13pm

I haven’t finished my sample yet but I wanted to get this in before comments were closed.

I think you can combine "flexible" with "elastic". Decide where you want the flexible widths to happen and use percent instead of ems (or possibly a percent of a parent?). When the page is resized the copy still changes based on the em units but selected elements would increase in width beyond the original sizes or proportions. Some layout changes would still occur but that is the trade off with flexible layouts anyway.

Personally I hate it when copy reflows on flexible layouts… I always have to review what I was reading to find the spot I was at.

Recently I was playing around with using HTML and CSS to do a simple "print" newsletter using using columns support in FF and print only styles. It worked great. HTML as page layout. I was trying to avoid buying a new application and be able to put the newsletters on line without needing to post PDF.

-vern
35. By Jon 陳 on 11th Feb ’08 at 14:57pm

Vern, I liked the auto-scaling example. It would be perfect with SVG, and harks back to a principle of people using their browsers more effectively to control layout.

The hybrid layout you refer to could be achieved using the max-width property and an expression hack for IE 6 (unfortunately.) Thanks for the contribution, nice work on the elastic example. :)
36. By vern on 11th Feb ’08 at 15:11pm

This is icky and rough but the idea is there. To get "wider" viewing area you still have to shrink the text size.

Flexible-elastic layout

-vern
37. By vern on 11th Feb ’08 at 15:27pm

You have no idea how cool and simple this type of web design is. I am in heaven! I found this totally by accident doing a search for something else I've already forgotten. Great job on the article and I am happy it was on the first page of the google search results. ;)

It’s taken me AGES to break my old habit of using tables for web design. It was ingrained in my DNA. Now I have to redo everything. ;)

p.s. Seriously my first web site was done before animated gifs were viewable in browsers. I remember one day someone in my office showing me what he called a rendering "bug" in Netscape. Standards shmanders… back then there was only really just one browser and no CSS so who cared?

-vern
38. By Leon Paternoster on 14th Feb ’08 at 09:25am

I agree that using font-size: 100% is best, for two reasons. Firstly, it encourages large, readable text; secondly, 16 is handily divisible by 2, 4, 8 and, erm, 16. This helps the maths when figuring out margins and padding.

I also use * {margin: 0; padding: o;} at the top of the style sheet. This gives complete cross-browser control of margins and padding, and also gets rid of padding problems that traditionally require an IE hack to solve.
39. By N on 18th Feb ’08 at 21:51pm

I love this article. Thank you for sharing us:). You are the best!
40. By John Ingle on 20th Feb ’08 at 20:59pm

Thank you for the excellent introduction to em! I'll certainly use this knowledge when designing templates for my own site as well as my web applications at work.

Just a note, for those not mathematically inclined you can also calculate your ems with a single operation. Just do:

required pixel value / parent font size = em value

You can thank your order-of-operations for that simplification. :)
41. By Lee Jorgensen on 23rd Feb ’08 at 09:41am

Excellent article – I’m going to have to do some experimenting now; I tend to use fixed width pixel based layouts becuse it’s generally easier to do and of course you don’t have the image resizing problems. Anyone have any tips for dealing with resizing images proportionally whilst retaining detail and avoiding the jaggies?
42. By Jon 陳 on 26th Feb ’08 at 11:41am

Thanks for adding that John. It’s exactly what I do. However, it means designers have to know inheritance initmately. Calculating from a starting point of 1px in ems for any element seemed to be the most friendly way or orientating folks for this starter tutorial.

Lee, browsers render the jaggies and artifacts when they resize. Hopefully, they’ll get better at recalculating. You could use content filtering to display SVG to browsers who support it, and bitmaps to those who don’t.
43. By Braintrove.com on 29th Feb ’08 at 17:50pm

Thanks… great stuff!
44. By Ty (tzmedia) on 3rd Mar ’08 at 15:01pm

Roger at 456BereaStreet, just posted a suggestion for adding maximum widths to Em based layouts, makes sense check it out here:

[Ed: Link fixed]

http://www.456bereastreet…

For IE 6 he’s dug up something called Dynamic Properties which I hadn’t heard of.
45. By Jon 陳 on 3rd Mar ’08 at 16:25pm

Ty, that would be a hybrid layout. It’s a well-known technique to have the content start to wrap rather than overflow the viewport. There are accessibility benefits for some users, but not all— especially those who welcome the layout retaining its original form to orientate themselves, as previously mentioned in the article. Hybrid layouts are something I’ll be covering soon.

Please consider posting links using <a href…> as indicated above the textarea rather than pasting an unlinked URL.
46. By dharma on 4th Mar ’08 at 05:59am

Thank you for this article which will be a boon to so many designers across the world. The shift from tables to CSS has its own learning curve and the shift from Pixels to ems is even scarier. This article makes it look so simple. Appreciate the hard work behind this.
47. By Jordan Beckett on 4th Mar ’08 at 20:19pm

Hey Jon, brilliant description! I can finally come out of the stone-age and develop web sites that work on the majority of browsers! Thanks so much, man.

I have a new question for ya: I'd like to allow people to comment on my photos on my personal web site (www.the-flipside.com), in exactly the same format as your comments… well not EXACTLY, but you know what I mean. How do I developt this? Perhaps it’s good subject matter for your next article?

All the Best,

Jordan Beckett
48. By Jordan Beckett on 4th Mar ’08 at 20:30pm

Oh, one more thing… pretty subtle, but no www? Even when I put in the "www." it takes it out. What gives? Your broke the interweb? haha, or is it just a new movement of apple-pie loving anti-www websites?

Pardon the facetious humor :-) I’m really interested, and have been astonished what I've learned in the last 30mins of reading your web site. Thanks for all the OBVIOUS hard work you do to share this stuff! Cheers!

All the Best,

Jordan Beckett
49. By Olga on 5th Mar ’08 at 07:12am

Hi, Jon! Tnx for article! I read more about it early and i think this em calculator will be usefull for an onyone
50. By Aapo Saaristo on 6th Mar ’08 at 23:07pm

Very nice writeup. I've been seeing more and more elastic layout recently. IKEA, for instance, has a really nice full-page elastic layout.

Jordan Beckett: www is evil. I absolutely HATE it when I try to visit a website, and either get "connection timed out" or some httpd-placeholder page, because I didn’t add the all powerful www. in the hostname.

All the sites doing this are further enforcing the popular misconception that all domain-names start with www. www. is an appropriate prefix when there are multiple servers responding on the same domain, and they need to be differentiated. (like billing.host.tld, db.host.tld and such) Otherwise it’s useless.

When a user enters an URL into the browser, they're already expecting a WWW-server, serving files with http on port 80, there’s no need for the user to have to make an extra effort to indicate they are interested in browsing the world wide web, and not, say, the gopher network.

This is why we can advertise websites as site.tld, and not as http://www.site.tld:80/index.html.

As you might have guessed from my humongous post, that was supposed to consist mostly of praise to Jon for a great article, I’m a strong advocate of no-www, and on my personal blog, for instance, have taken the agressive stance of forwarding users accessing the site with www. to a very ascetic page describing my views on the matter in great depth.

Sorry for going on like that. This Link is VERY related (wife is already in bed, and it’s 2 AM) :D Thanks again Jon for a great article.
51. By Skim on 9th Apr ’08 at 08:12am

Everyone should do like this! Good article!
52. By Max on 27th Apr ’08 at 20:45pm

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
53. By David on 16th May ’08 at 15:15pm

Yep, I never knew why people used ems instead of px or % until I read this article. Now everything I do is in em’s! Unless I need a set background image, it looks like I have a new found love…
54. By Jean-Claude Guasp on 23rd May ’08 at 21:52pm

Hi,

After some intensive search on the web, with IE7, I cannot get 2 img right below the other without gap (these are rather small graphic img showing vertical graph lines). IE keeps adding 3 px in-between the 2 img. On the other hand, it’s feasible and OK with Moz FireFox.

my question is: how to get rid of these 3px?

Your article is interesting but doesn’t mention any relation with Point sizes!

My web search didn’t return any proper article either. So my 2nd question is: could you attempt to give us a comparison table?

Thank you very much for your time.

JC Guasp

1)
55. By Jon 陳 on 27th May ’08 at 11:04am

Jean-Claude, you’re a little off-topic, but try setting img{ vertical-align: bottom } for those images. If that doesn’t work, posting your markup and CSS to CSS-discuss might be your next port of call.

Regarding pt sizing: The article is concerned with ems. I would recommend only using points for print styles. In CSS, 1pt should be the equivalent of 1/72 inch (as it is in print typography), and that will continue in CSS3. Of course, that depends entirely on display resolutions and physical size.
56. By Sam on 23rd Jun ’08 at 08:12am

Hey really good blog, was very informative and you put across alot of key points.

I never knew why people used ems till now.

Well Done,

Sam
57. By Richard Williams on 14th Jul ’08 at 11:57am

I can’t get this to work now with FireFox 3. Reducing body font-size to 0.8em, say, will reduce the character sizes but the image sizes and other measurements aren’t changed. However the same pages work for me in IE6. Anyone got a solution to this?
58. By chris on 20th Jul ’08 at 10:40am

Having read a fair bit about typography in the past in connection with manipulating things like LaTeX, Postscript, and PDF programmatically….I thought that em was "meant" to be used for horizontal sizing, and ex to be used for vertical sizing.

Still learning on how to make use of CSS properly.

This article and other similar articles and sites, are a breath of fresh air. They stand apart from most other sites that merely provide information in barely acceptable format, which i tend to scan instead of reading.

Well done.
59. By Optik Kablo on 27th Jul ’08 at 13:17pm

HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out
60. By Disabled Designer on 13th Aug ’08 at 08:36am

A great explanation, loving CSS and the possibilities. keep up the good work
61. By Shivanand Sharma on 19th Aug ’08 at 16:28pm

ah, I just lost my comment. The preview button is broken.

It’s a blessing to find this article on Google’s first page. Especially for those starting out with ems. I’m designing a wordpress theme and this article is a part of my research. I spent another half-an-hr reading the comments (and the article within the comment – the history of em). Very informative. Many thanks.
62. By Edde Beket on 6th Sep ’08 at 00:32am

Nice explanation, again. Personally I do use the "set 1em to 10px" trick. It makes life so much easier. After resetting to 10px/1em all you have to do to get a certain size, is divide by 10. 720px becomes 72em, 16px is 1.6em and so forth.

<code>

body {

font-size: 62.5%; /* Resets 1em to 10px */

}

</code>

BTW: would resetting to 62.5% also make IE behave? Or is it necessary to reset to 100% first?
63. By nickel22 on 17th Sep ’08 at 15:57pm

wow! this article is fantastic, very clean and simple explanation …for an argument that i have always seek to understand!

thanks, thanks a lot Jon (and thanks to Nicola for italian translation, perfect!)

bye nickel
64. By oyun on 26th Sep ’08 at 06:16am

It’s a blessing to find this article on Google’s first page. Especially for those starting out with ems. I’m designing a wordpress theme and this article is a part of my research. I spent another half-an-hr reading the comments (and the article within the comment – the history of em). Very informative. Many thanks.
65. By Andrew Powell on 6th Oct ’08 at 12:55pm

Great article. Just stumbled across this today. Very well written.
66. By estetik on 27th Oct ’08 at 17:15pm

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.
67. By ilmu komputer gratis on 19th Nov ’08 at 03:25am

Wow… how a great article! It really inspired me to build elastic layout. thanks.
68. By Ania on 19th Nov ’08 at 10:46am

It is realy great designs on this site…… this is very helpfull site for web designers…iam a web designer so i am very happy now !

This looks good! Really good tutorial include so many helpful informations!

Thanks
69. By VectorTherapy on 24th Nov ’08 at 20:42pm

Excellent Article ! Really opens your eyes.
70. By Jermaine Maree on 28th Nov ’08 at 21:31pm

This is a great tutorial. Only issue I find with Em & Elastic Layouts is the use of background images. Things tend to break pretty easily then. Only sugesstions I have seen is using nested div’s with z-index’s. Any suggestions? :D
71. By Stuart Anderton on 11th Dec ’08 at 01:18am

Thanks for the article Jon. I tried doing this earlier in the year, it’s a shame I didn’t find your article sooner. I wonder the value of this method as we move to more advanced browsers that actually zoom the pages rather than simply increase the font size. I think both IE and Firefox do this already.
72. By Gilda on 22nd Dec ’08 at 23:14pm

Been struggling with my design being totally destroyed by using ctrl+ in firefox (somehow IE not following the CSS just adjusted itself, which is why is took me so long to identify the problem) redefining all my sizes in ems just solved the problem. Thank you, Thank you, Thank you, this was a great tutorial.

Gilda
73. By oyunoyna on 28th Dec ’08 at 18:20pm

very clean and simple explanation …for an argument that i have always seek to understand!
74. By Jocelyn on 3rd Jan ’09 at 03:54am

Great write up! Very clear & organized
75. By Jawad Farooq on 4th Jan ’09 at 23:50pm

Thanks, Very easy and and complete explanation

Great, much appreciate
76. By oyunlar on 5th Jan ’09 at 17:15pm

It really inspired me to build elastic layout. thanks.
77. By flashoyun on 5th Jan ’09 at 17:17pm

thanks for nice stuff
78. By Leicester on 5th Jan ’09 at 21:22pm

Really well written and explained article, had always wondered what the uses of ems were.
79. By Antti on 11th Jan ’09 at 15:43pm

Stupid question, but isn’t zooming in newest browsers making elastic layouts automatically out from fixed layouts? So you can use pixels, but they behave like EM-layouts in older browsers (like IE6). Or am I missing something?
80. By Electricspace on 14th Feb ’09 at 23:26pm

For those who want to work with em’s: I’ve written a simple program in .NET to a pixel size to em. I use it in my day-to-day work:

You can download the program “Pixel 2 em calculator" from http://electricspace.blogspot.com/2009/02/pixel-2-em-calculator.html
81. By cv örneği on 21st Feb ’09 at 21:04pm

It is realy great designs on this site…… this is very helpfull site for web designers…iam a web designer so i am very happy now !

This looks good! Really good tutorial include so many helpful informations!
82. By ev arkadaşı on 21st Feb ’09 at 21:05pm

wow! this article is fantastic, very clean and simple explanation …for an argument that i have always seek to understand!

thanks, thanks a lot Jon (and thanks to Nicola for italian translation, perfect!)

İlhami ÇAKMAK
83. By Steve on 22nd Feb ’09 at 15:47pm

Hi this is a great article and very clear. I just thought i’d let you know that the equation you gave for working out pixels to ems can be simplified from:

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

to:

required pixel value / parent font size = em
84. By hans on 25th Feb ’09 at 07:39am

Good tutorial to illastrate em as unit of layout. To view the elastic effect, you have to use javascript to change the size of font (em) and the size of layout must be re-calculated.

The layout generator here could dynamically view the effect.
85. By Jon 陳 on 25th Feb ’09 at 08:55am

Thanks Steve. The simplified equation can also be found on the pixels conversion page.

Hi Hans. If I understand you, it might be worth noting that you don’t have to use JavaScript. When this tutorial was written only Opera did page zoom dynamically by default.

Em-based layouts still have a place in our arsenals, in the same way that liquid ones do. Newer browsers having zoom built-in doesn’t automatically make fixed width the best option — especially for true universal design.

Thanks for all your feedback and contributions, folks.

By çiçekçi in OSCON 2008, the Year of the Butterfly:

very nice article..thanks…
By seo services in The Paragraph in Web Typography & Design:

designers to create narrative spaces, consisting of text, images, video, etc. add context and readability of these…
By Annie Ha in Review: HTML and CSS Web Standards Solutions:

Hi Jon, As a graphic design student, I strive for a better structure and well design website. I was looking for a…
By Shane in Days like these:

Great post, makes me feel better that not only I have days like these! Thanks.
By Joey in Introducing Analog:

Long time reader - first time commenter! Good luck with the new company, hope it all works out for you :)
By Emcee Hao in Complex Type: CSS Fix, ClearType Miss:

dude, awesome type. rock on.