Em and Ems

Recently I read an article on the web espousing the use of "em" in measurements for your web page. For those of you who don't know what "em" is, let me explain.

Most times, when you make a web page, you decide on how big things are going to be. This measurement is done in screen pixels, which are the little dots that light up on your monitor or LCD. You might want a certain image so many dots wide and so many dots tall. By telling the computer where everything goes in pixels, you control exactly where everything appears on the screen.

So you might have a box that you want to put stuff in. When you design this box, you might write something like "width: 200px; height: 500px" -- you tell the computer exactly how big to make the your box in screen pixels.

The author of this article was making some good points: the web is not just for browsers, but for mobile phones, for Origami machines, for all sorts of things. And what about blind people or people who need to see things in large size? Most browsers let you change the size of the text that appears on the web page but nobody ever uses it. For those of you with IE, go to View/Text Size and play around a bit. You can make the text various sizes to make it easier to read. For those of you with FireFox, it's Ctrl+ or Ctrl-.

The interesting thing to note is that most web sites do not want you to change your text size. Because they make all of their design measurements in pixels, when you change the text size very bad things happen. Try visiting some of your favorite sites and changing the text size on your browser. It is a very interesting experience.

The author was saying to use this type of measurement called "em" to make your pages work with all sorts of people, including people who need bigger characters.

Think of an "em" as a little box the size of the average character. In the old days, the letter "M" on a typeset was a perfect square, and that is where the name comes from. Printers (people who run printing machines, not little boxes in your office) measured things in ems because it was the box-size of a character. So no matter what your text size, an em will be bigger or littler. It means you are measuring your web page design by how big the characters are. It makes a lot of sense.

I'm thinking "Yep. I am all for this. I want my new batBack application to work anywhere. I will use em and life will be better for my readers."

Well. It doesn't work that way.

I went and made the batBack home page all in em. That wasn't too hard, so I tried doing some more pages. I quickly ran into a lot of problems.

First, whenever you put a graphic on the page, you're screwed. Graphics don't come in no freaking em measurements, they come in pixels. That makes sense because a graphic is just a set of dots that light up. For most cases, it is not a scalable thing. It's just a box of colored dots.

I puzzled over this one for a while. I really never came up with a good answer except to make the design such that really big and really little text sizes will still work with the graphic in there. But even then, you can make the text size so small it looks ugly or so big that it has all kinds of empty space. There is no easy answer. And that's just for one graphic.

It gets worse. Say you have text that may not always be the same size -- say you insert the month and day into each article you write. Well your design may say a box is 10em tall, but sometimes in the real world the text may be 7em or 15em. What do you do?

You can automatically make the box expand to fit the text, but then what about the boxes around it -- to the sides and below? Will the page still look right with one box twice the size you had planned on?

Add to this the idea that one graphic on a page almost never happens. Most web pages you visit have tons of graphics. Menus, advertisements, graphs -- most pages I visit have dozens of graphics.

You can make your boxes so they don't scale. That means that stuff simply gets hidden when the text size gets bigger. Maybe I'm off-base here, but what's the point of that? It makes no sense to use em if you are then going to have to hide the text from the reader.

The best answer I could come up with was a simple design that has a title bar at the top, a content section underneath it, and a side bar on the right. You can see it on the article detail page for batBack.

Be careful when you read somebody espousing some great change in technology or system of doing things. Most likely the story will be slanted towards acceptance of their idea. I'm happy with switching to em (as much as possible) in my web pages, but it's a lost cause for most commercial applications in my opinion. Maybe one day we will give up our gizmos, graphs, dancing chickens, and flashing iPods, but that day is going to be a long way off.