Like it or not, there are times when your readers will want to resize the on-screen text for what ever reason. I find myself doing it often because I run a high resolution monitor and some web designers still believe in tiny fonts. But that's another story.
So what should you be using to display your fonts? Em or Px? That depends who you ask, but first a brief lesson on the differences.
Em, pronounced exactly as it's spelled, is equal to the default height of the upper-case letter M. When used in CSS an em will be the default font size, or if it's a child, the proportional size of the parent element. Em's are only really intended to be used for font sizing and line height, not padding or margins. Confused? A few examples soon - I promise.
Px, is the exact height of the font measured in pixels, regardless if it's the child of a parent or not. Px is a fixed value no questions asked. The other thing to consider is that pixel values only have meaning on a computer, so when you print then it will be up to the hardware to 'best guess' what physical size you really meant.
Using pixel values also comes with an accessibility issue, because if the user has increased their default font size in the browser (I'm talking about in the browser preferences, not the zoom feature), then the size will remain at the pixel value specified in the style sheet.
But at the end of the day, 12px for example if nowhere near the size of 12em (try it out and see for yourself :-), and you'll want an easy way to style your documents without having to figure out what em value to use to make text 12px high. There's an easy solution to that, and it's called the 62.5% trick. Here's how it works.
The trick involves making em's "act" like px. In your CSS file do this:
body {
font-size:62.5%
}This will make 1em be equal to 10px, because 16 (a browsers default font size) x 62.5% is equal to 10. With that in place, you can start using em values instead of px values. Some examples:
- .8em = 8px
- 1em = 10px
- 1.2em = 12px
- 2em = 20px
- 3.4em = 34px
...and so on.
That means you can also use them for line-height. Again the 62.5% trick works, so line-height: 1.6em is actually 16 pixels for example.
Things start to get tricky
When I first made the jump to using em's I was caught off guard by the parent/child relationship "issue". Using a specific example, if I had a parent div with a font size of 2em, and then a child element with a font size of 1.5em, it's reasonable to assume that the parent font size would be 20px and the child 15px. No such luck, and you'll understand why in a second.
At the beginning of this article I eluded to child em's inheriting the size of their parent. With this in mind, if the text of my parent element was 2em and the child was 1.5em, the child would in fact be displayed at 3 (30 pixels in height), because 2 x 1.5 equals 3. Get it? It's a multiplier, not addition or subtraction.
Another example with a 2em parent: If I wanted the child to be half the size of parent, then the child needs to be .5em (because 2 x .5 = 1). If I wanted the child to be double the size of the parent, then the child would need to be 2em (because 2 x 2 = 4).
That can be very advantageous. Let's say you have a parent at 2em with a bunch of child elements and you wanted to see what they would all look like 50% bigger. All you need to do is increase the parent value to 3 (2 x 50% = 1, so just add 1). Too easy.
After all is said and done it's really basic maths. I've provided an example file for download at the end of the article.
This not only solves the accessibility and printing issues, but you've also made it easier to make the permanent transition from px to em. Good luck!
Something to consider
While all this will allow the user to change their default font size in the browser preferences and actually see a change (where pixels won't), the change they see will be smaller than expected.
This is still a more desirable outcome than being forced to a fixed pixel size, but purely from an accessibility point of view it's not perfect. If that's an issue for you, then remove 62.5% from your CSS - and compensate for the sudden increased size of your text if you have to. Thanks to Emily for the reminder.
using_ems.zip (1k)
Katey
Nice trick. I've seen the 62.5% trick on some style sheets before but never understood why it was there. I'm going to stick with pixels for now though thanks!
Tuesday 9th June 2009 | 03:22 PM Reply Comment URL Back to top