Use ems when Designing a Stretchable Elastic Website

This is an addition to an article I recently wrote, titled CSS - Create a Stretchable Elastic Website with Absolute Positioning. And once again, as in the previous article, this is intended for the beginning designer.

After designing a number of elastic, or fluid websites, I have come to the conclusion that using ems for sizing text is the best way to go. If you change the size of the reference font, (the browser's default font size), the font changes proportionately. Often, viewers who are a little more savvy, will change the text size in the browser. When ems have been used to design the page, the text across the page keeps it's proper proportions.

For those who are yet unfamiliar with what ems are.

Ems are sized so that the font size is relative to the browser's default font size. Which is medium for Internet Explorer. and most modern browsers. However, some say that this can be a problem because not all browsers use the same size text for default text size. For instance, the standard is 16 pixels for IE, but Mac uses 12 pixels for their default font size. Personally, when comparing my pages between IE and Mac, I see little difference. Not enough to cause concern for me.

So based on this, 1em is 100% of the browser's default text size. Or, once again, in the case of IE, 1em is 16px. .5em is 8px, .75em is 12px, 1.5em is 24px, 2em is 32px and so on. The designer can also adjust all of the font sizes on a page by changing the font size in the body tag.

Example: BODY {font-size:75%}

This would now cause IE's default medium text to change from 16px to 12px. Because remember, in CSS, Cascading Style Sheets, the child container inherits from the parent element, which would be the body. So now, 1em is 12px, .75em is 9px, and so on.

Another important reason to use ems is the fact that IE6.0 and below will not allow you to resize text that was sized in pixels. So using ems will allow the user to resize the text and maintain relative proportions.

One last point.

Using ems allows the text within a container to grow along with the container to, once again, maintain consistency. And that point alone I feel is the most important reason for using ems!

Happy designing! It's always a work in progress!

About the Author

Curt Despres is the owner and designer for a website design company, Xcel Webworks , located in Oshkosh, Wisconsin.