thenew.oddend.com

I’m in the process of converting most of my px values to em values. Since this site is not very heavy on images when it comes to its interface, I decided to explore the use of em values for more than just font sizes to allow the site to be enlarged in its entirety.

So far I’ve made most changes and Firefox users will be able to increase (ctrl +) and decrease (ctrl -) the text size in the browser which will affect the entire site, not just the text (use ctrl 0 to reset). This works because the body font size has been set to 13px and em values are used for all following font sizes but also for line height, border thickness, widths, margins and padding.

The Web Typography Sucks presentation of Richard Rutter and Mark Boulton at South by Southwest somewhat lead to this change and in the slides they put online you’ll find the way to calculate appropriate em values from your (previously) used px values. While your at it do take in the rest of the information in their slides, it’s good stuff.

In short pretty much any value including font sizes, widths, heights, padding and margins are related to the font size in pixels that you set for the body like so:

pixel value (18px) ÷ base font size in pixels (12px) = em value (1.5em)

However, when calculating line-height you divide through the direct font-size. When you are redefining a value that set earlier (ie when you override values of p in p.class) you divide through the value set in the parent element:

font size for p.class (11px) ÷ font size set for p (±1.08em × 12px = ±13px) = em value (±0.85em)

As you can see, that can quickly get complicated. If you want to have a lot of control you may want to build up your stylesheet using px values and then use those to calculate em values. When the em value you use is not displayed as expected, you’re probably dealing with that last situation.

By the way, don’t take that last calculation for granted just yet. I haven’t been able to test the effect of the changes in Safari or Internet Explorer 6, but I intend to do so tomorrow. If they react differently when you redefine a value of a CSS property, I’ll update this post.

Internet Explorer 7 had little trouble with the em switch. Although setting the text size in the browser will do nothing, it features a wonderful zoom function that also resizes the images. That’ll be something I’ll have to work on for Firefox. I know there are several solutions around, but I’ll have to read through them and see if they can be applied to the images of various sizes that I use in my posts.