: Is the debate about em VS px VS % in typography still valid 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
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: 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.
More posts by @Welton855
1 Comments
Sorted by latest first Latest Oldest Best
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!
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.