Tim says “Skip to the End”

1 in 4 people have some sort of vision impairment that makes reading on the web more difficult.[1]

Elastic layouts and coding using em

With the default text size on most major browsers set at 16px many people like to make their text larger to make it easier to read and I believe the number is set to go up as monitors get larger. Plus I’m sure that many people don’t realise they can increase the text size of a web page by holding ctrl + or selecting zoom via a menu.

To cater for users increasing the text size in their browsers web designers and developers can set the size of the elements in their designs using values of em instead of % and px.

“An em is a unit of measurement in the field of typography, equal to the point size of the current font. This unit is not defined in terms of any specific typeface.”[2]

Em is said to equal the width of the character M in which ever type face you are using as this is usually the widest character. However with the ever varying typefaces entering the typography world this isn’t always the case.

Em vs px vs %

The problem with coding in px opposed to em is that elements width is fixed and so when a user increases the text size  the text will move out of the box. With %  the dimensions of the elements in the layout will only change as the user changes the size of the browser window or view port and again has no relation to the text size:

An element which has it’s size set in em’s has it’s height and width worked out depending on the size of the text. So if a user increases the text size the width and height of that element will increase in proportion to the text.

Coding using em

It helps if you think each character as being in a box. At browser default text size this box will be 16px wide and so 1em is equal to 16px. If you increase the text size to 18px then the box increases in size and 1em becomes 18px. So 2em will now equal 18px x 2 = 36px and so on.

There is a way to simplify creating layouts using ems which I first read about from Andy Budd’s book CSS Mastery.

You can make 1 em = 10px by setting the overall font size to:

body{font-size: 62.5%}

62.5% of 16px (the default browser size) is 10px. So now you can just divide the pixel size you want to use by 10. So a button 150px long will become 15em long and will now scale as the text size increases! Hoorah!

If you want to learn more about creating Elastic layouts I recommend Jon Tagerine’s - The Incredible Em & Elastic Layouts with CSS

Now you know a little bit about elastic layouts and coding in em I’m going to ruin your fun and tell you that many of the latest browsers have a feature called page zoom.

What’s Page Zoom?

It’s best to think of page zoom as magnification. The browser takes the whole of the site and scales everything on the page relative to each other just as if you were looking through a magnifying glass. This means even a fixed width site coded in pixels would scale up nicely and takes the process of scaling out of your hands.

For a good comparison into text zoom and page zoom check out this article by Jeff Atwood – The Two Types of Browser Zoom

So does this mean we can drop em and elastic layouts?

In the long term yes but at the moment there are still plenty of browsers out there which don’t support page zoom. Currently the only browsers
which have full page  zoom are:

Name [versions] – browser market share

Chrome 2 – 0.8%, IE 7 & 8 – 26.5%, Opera 6 to 10 2.2%, Safari 4 – no results yet and Firefox 3 – 44.3%.

So if you don’t mind 25% of the people viewing your site not being able to scale it up correctly then ditch em and elastic
layouts. Lets just hope it’s not the 25% of people who actually need to use it.

Can we can drop liquid layouts?

No, page zoom doesn’t have the same benefits as a liquid layout. Liquid layouts are coded using percentages which makes the layout  scale depending on the size of the browser window where as Elastic Layouts and page zoom are reliant on the user scaling the layout.

Liquid layouts are still useful to make sure your site scales down when the user resizes their window to have more than one application on their screen. Or if your users  access your website on a low resolution device like a net book.

So in summary here’s 10 tips on page zoom:

1. 1 in 4 people have some kind of visual impairment which make it hard to use a website.
2. The default text size is 16px but people can increase the size in most modern browsers.
3. To test how your site fairs with text size changes open it in firefox, select view – zoom and tick ‘zoom text only’.
4. You can cater for people changing the text size by coding your layouts in em.
5. To make it easier to do this you can make 1em equal 10px by making the overall font-size 62.5% then divide your widths by 10.
6. Page zoom in browser takes control of the scaling and will scale everything in relation to each other so no need for elastic layouts.
7. However 25% of users have browsers that don’t  support page zoom so lets not drop them just yet.
8. Liquid layouts and elastic layouts are often confused. Liquid layouts are coded using percentages rather than em.
9. Liquid layouts are useful as the browser window is scaled or to keep your site useable on low resolution devices.
10. So at the point we drop em layouts we should still code some liquiditiy into our designs

Refering documents:

[1]  Page Zoom In IE7 – IEblog
[2] Em and Typography – Wikipedia
Zoomfusion – JeremyKeith
Page zoom with images – Thomas Baekdal
Em calculator

Interact:
- Will you be dropping elastic layouts?
- Do you have any tips on coding elastic layouts for our readers?
- Have you seen any sites which cope with increases in text size well or badly?

If you enjoyed this article please follow me on twitter and RSS Thanks!

Tags: Accesibility, coding, design, elastic, em, layout, layouts, liquid, usability, web, zoom

This entry was posted on Sunday, June 14th, 2009 at 9:10 pm and is filed under Applied Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.