Making the transition from px to em
Written June 7, 2009. 16 comments.
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 slightly smaller than expected.
But from an accessibility point of view this is still a more desirable outcome than being forced to a fixed pixel size which could make the page completely unusable.
using_ems.zip (1k)
Start of pageWho is That Web Guy?
Michael is a veteran web designer / developer / usability evangelist, practitioner of W3C guidelines, and currently head of the web dev unit at Stormbox, a branding and creative communications agency located in Perth, Western Australia.
Em’s take a little getting used to but aslong as you remember about the child element ‘issue’ you’ll be fine :-)
Nice look and feel you’ve got going on here web guy. Mind if I snoop around?
I’ll admit it sounds complicated but it’s really not once you start using it.
Another thing you could do is to remove the 62.5% from the CSS after you’ve finished designing, which would increase the size of everything (and that’s not a bad thing for people with VI) and it would also keep everything proportional still.
I have uploaded it on QDrive, however they do not accept .exe files, so when saving just add .exe to the filename. (btw. sorry it’s so big 392KB, but it’s written in Delphi, I do not know other desktop programming languages, if someone want’s the code to build it in C or something different let me know, or if you know how to take value inserted into textarea as is so entire code with tabs, spaces enters etc. and send it to php and then echo everything back as code without parsing, I will build it as an online tool. However for now it’s only that:
https://www.qdrive.net/download/sharelinkdownloader.php?id=15754&key=xzmX72qDsKp412nP4OX43AjP2Gx412nX46d
Just a small correction. The connection between “em” as a font-measurement and an uppercase letter “M” hasn’t been true for about 200 years, dating back to early letterpress printing!
A better definition from a web point of view would surely be “1 em means 100% of the previously-defined size”.
So “1.5em” means that the font-size is increased by 150%; “0.25em” means it becomes 25% (ie, one-quarter the size); in all cases in respect of its size previously in pixels or some other measurement.
So, if a “reset.css” or similar is in use it will be proportional to a specific size within that, or if has not been specifically set, it will be that browser/operating-system’s default value for that element.
All the best. Philip