em What?

Do you know how many pixels there are to an em? How about an en? What is wrong with pixels? And the big question is, who should dictate the font and font size, the web page designer or the browser user? While there are different opinions regarding these questions, I am going argue for ems  and user control.

When you design a Web site, for whom are you designing it? If you design it for your self, then you have an audience of one. If you are designing it for others, then why exclude the visually impaired? Beyond myopia about the target audience, a Web designer can easily fall into the trap that all users have the same hardware, use the same browser, use the same operating system, and have the same fonts installed. While the default for browsers is to let the Web site control the font, the user can simply change this setting. Any one of these assumptions can lead to a Web site that does not scale to the needs and environment of a particular user.

I personally believe that we should design for the user environment. To meet the needs of the visually impaired, we must design for the user environment. More over, I believe it is possible to design a site that scales all measurement according to the font size selected by the user. To make this possible, the following must occur:

1. Except for sizing of some graphics, pixels are out for sizing all elements, including fonts. In fact, all fixed sizes for fonts are out.
2. Unless there is a justified exception that will not impact on the scaling of the page, all measurements shall be relative to the default font size specified by the user’s browser.
3. The units for relative sizing are em, en, or percent. I prefer em as a unit. The en unit is too small, and percentages work in some cases, but are too much trouble when sizing page elements, such as blocks, borders, margins, and padding.
4. Using “float” to position blocks is much easier than absolute or relative positioning. The biggest problem with absolute position using relative units is that some browsers, such as Microsoft IE, do not always calculate the position correctly.

The em is a typography unit that equals 16 points. A common mistake is to say that it is the width of a capital M. In many fonts, the capital M may be less than 1 em. In typography, an em is actually a measurement of height and not width. In CSS, the em unit is a measurement of width and height. In CSS, 1 em unit is the size of the parent font size. If there is no specification of the font size for the body tag, then the 1 em unit equals the default size set in the browser.

The default size for most browser is 16 pixels, so you may hear the statement that 1 em unit equals 16 pixels. This would make an em unit a fixed size, when it is actually a relative size. However, if you are converting from pixels to em units, then using 16 as a default value is a good starting point. When doing font conversion there are sites, such as http://pxtoem.com/ that do the math for you. Unfortunately, the assumption is that an em is a fixed unit and not a relative unit. By treating an em unit as a relative unit, the size of the em varies according to the default size in the browser. Change the default size from 16 to 32, and all your measurements automatically double. If you want to see the power of using em units, go to http://www.mtlegion.org, and change the default font size in your browser, and see what happens. If you change the font to some large number, you may have to use the horizontal scroll bar, but the font is readable and doesn’t run over any container borders. If you really want to see how many sites break, just change the browser setting so that the browser determines the font size, and set the size to 18. This is not a radical change, but you will understand the frustration of the visually impaired.

It is common to see a list of fonts in the font-family attribute, when styling for the body tag. Yes, there is a list that the browsers checks from left-to-right. The list has a few problems:

1. There is a hidden assumption that every machine has these fonts installed. Unless it is removed, the last item on the list is sans-serif. The last font is what keeps this assumption alive, as it now defaults to the browser setting.
2. The user has the ability to take control of their environment by setting their browser to ignore the list.

I style the body tag as:body {

margin: 0em;
padding: 0em;
font-family: sans-serif;
font-size: 100%;
text-align: justify;
color: #FFFFFF;
}

Setting the font-size to 100% is part of an experiment to deal with IE’s calculation problem. Supposedly, setting the font-size value to 101% cures the problem. In my experience, all it did was made layout calculations more difficult. I still had to fight with IE over very small differences. Styling with em is now without challenges:

• If you get it to work in IE, it will work in most other browsers.
• If you get it to look good in other browser,  after dealing with IE issues, you are way ahead of the game.
• A common trick for creating columns is to use a repeated graphic. This does not work when the site scales according to font size. The challenge is making equal length columns. I have read several articles on this, but have not found a solution which meets my criteria for scalability. More experimentation is needed.
• Using a header image with graphic navigation tabs doesn’t scale well. If your site depends on a fixed size font, you have boxed yourself into a corner. When solution is to have a text mode only option with no graphics. A little extreme, but it works. The ARRL uses this option on their Web site.

As I find solutions to problems of scaling, I will post additional articles on this topic.

Resources

• Making Text Legible: Designing for People with Partial Sight
• Sane CSS Sizes
• The amazing em unit and other best practices
• Simple Steps to More Readable Type Through Universal Graphic Design