px vs. em
Posted by admin on July 6th, 2006px is absolute. If you tell the web browser, your H1 header is 16 pixels, you’ll see a 16px header on any and all browsers, no questions asked.
em is relative. 1em = 100%. So if you tell the browser, your H1 is 2em, it’ll show you a header that is 200% of what the default font size is for your web browser (on your browser’s tool bar, there’s a place, e.g. View -> Font Size for IE, where you can set the “default” size. For IE on a PC, “Medium” is 16px. Some claim that the default on a Mac might be 14px.) If you leave the default to “Medium”, your H1 header in IE on a PC would be 200% x 16px = 32px. Although, there’s no guarantee what the size would be on a Mac.
Now you know some background on px and em, what’s all the fuss about?
I was intrigued by the subject, and pretty much read what everyone had to say about it on the Web… turns out, it really is a battle between users and designers.
Some users may want the ability to increase the font size when they’re reading the content. It is an ability web browsers are willing to give to the users (although, as mentioned above, there may not be a standard between PCs and Macs). But when it comes to the designers, they are not as willing to give up the aesthetic, and they don’t necessarily like the users to have that much control, claiming that any font size other than what they specified would “break” the design or the allocated area the content is assigned.
Imagine you are the Judge when px and em fight it out in your Courtroom. What would you say?
I think it really is a matter of preference, and there isn’t a “right” or “wrong” way of doing it.
—Eric Hsu, Chief Style Officer
