Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 8 down vote favorite
1

I have been reading a few articles about why em's are better than px in typography. And the base has to be in %, best is even to have body{ font-size:62.5%; }.

One of the better articles I could find is located here: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Basically it is says that px does not scale well on websites and devices. I have always done typography in px, and have never found any issues. I have also been working with some CSS framework and some wordpress themes, and I always see that just the normal px is used.

Now I see that most of the articles are written em's are mostly from some years ago, around, I wanted to know if it is still true that px doesn't scale well, or is this not a point anymore for the modern browsers and devices.

On a side-note. I have even read and seen on some sites that people even go so far to do all of their styling in em's. For example the padding and the margins are done in em's.

Is this necessary if you want to have a good scaling website.

share|improve this question
2  
To make things even more confusing, most modern browsers support relative ems or rems snook.ca/archives/html_and_css/font-size-with-rem. – paulmorriss Oct 26 '11 at 16:23

1 Answer

up vote 3 down vote accepted

My answer, for the text itself is a definite "no". Good browsers cheat (as they should) when it comes to scaling fonts specified in pixel units. The web developer should be held agnostic to any differences in devices the content renders on.

Try this in w3Schools Tryit editor:

<html>
<body>
<p style="font-size:1em">This is a paragraph.</p>
<p style="font-size:12pt">This is a paragraph.</p>
<p style="font-size:16px">This is a paragraph.</p>
<p style="font-size:100%">This is a paragraph.</p>
</body>
</html>

Then hold Ctrl down and scroll with your mouse wheel, or press Ctrl-Numeric+. They should all scale evenly in a good browser.

It is not guaranteed that pixels are evenly wide as high, niter that the resolution always is 96DPI, and user preferences might apply for up- or downscaling all content. Bearing that in mind, most browsers take account for these resolution differences and scales the output according to the specific hardware / preferences. If a browser would strictly apply the actual pixel units, the browser (or hardware device it runs on) would be doomed to be perceived as failure by the end user.

Having said that, bare in mind that HTML is not optimized for scaling, but for re-flowing text to the widest range of resolution aspect ratio's possible (width divided by height). Browsers do differ in the scaling padding and margins when specified in different units. For truly scalable designs (for example, where the position on the background matters) one should consider using a scalable, non flowing format such as SVG. Doing padding and margins in percentages is always risky!

If you are using an image background or such, and you want the padding or margin to be a specific number of pixels inward, my advice is to be sure to specify those margins and padding in pixel units!

share|improve this answer
1  
Just a point of note - the "Text Size" feature in IE will not scale fonts that are explicitly fixed using pt or px. – Zhaph - Ben Duguid Jan 25 '12 at 11:47

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.