Creating scalable sites using em, rather than px
The Problem:
Modern websites are no longer visited by pale pasty individuals with bulky desktop computers and pitifully slow 14.4kb modems. These days even the most basic mobile phones contain faster processors and (in a lot of cases) higher resolution screens than full-size computers from 18 years ago (think Amiga 500+).
Being able to access information from anywhere in the world and on different devices has two major obstacles:
- Bandwidth
- Presentation
If you create a site that has fixed sized elements (using px to specify sizes) and/or heavily laden with images, flash etc then their is a good chance it will load incorrectly or take considerably longer to load on slower connections. There are a number of things we can do to correct this, but in this article I will look specifically at font sizing.
In traditional typed printed media, fonts have been specified using pixels. With the first itteration of webstandards font-sizes were specified using the built in browser presets (think IE and smaller, small, large, larger) or specifying a font height in pixels, such as 12px. Using px to specify font-sizes is perfect if you can guarantee that every screen will have the same resolution and screen size (say 15″ at 1024×768). However as computer displays have evolved and become larger or they become mobile and therefore smaller, these dimensions have changed drastically; and measuring the font in pixels, simply will not work..
Example 1:
Text at 12px, on a 19″ 800×600, will appear half the size on the same screen if we increase the resolution to 1600×1200 (because we now have twice as many pixels)
Example 2:
12px text on a 19″ 800×600, is going to become miniscual (and most probably unreadable) on an iPhones 480×320 3.5″ screen.
The Solution:
Anyway… enough of the reasons why px shouldn’t be used…. what we need to know is what is a more viable solution, something that will work on a variety of equipment. The closest thing that exists at the moment is the em measurement. em represents a relative size. So, a font-size of 1em is the same size of its parent element, a font-size of 0.8em is 20% smaller than its parent element… and I can hear you thinking… “But where does the parents font-size come from!?”.
Generally speaking browsers set their default font-size to 16px, so if I gave a <p> block a font-size of 0.8em, the font would be rendered with a font size of approx 12.8px, the biggest disadvantage to this (besides em measurements not working in older browsers) is that if the user changes their browsers default font-size, our font-sizes will change accordingly.
This ‘relative’ font size allows us to correct for different rendering of fonts because if for example, I visit a site on my iPhone, its browsers default font-size should be something that is readable by someone using the device, and my stylesheet modifications, should increase or decrease that font-size proportionally.
Equally, with em sizes you have to be careful if you find yourself nesting different font sizes.
Example:
<div style=”font-size: 0.8em”>
<div style=”font-size: 0.8em”>
Some text
</div>
</div>
This will cause the font to be reduced twice. The default font size of 16px will be reduced to 12.8px and then again to 10.24px. Ughhh.
Useful Links:
The information in the article, while I wish it was original research came from several sources on the net, but most noticeably from the two below.