PDA

View Full Version : px, pt, em or %



cb2004
Dec 17th, 2008, 06:05 PM
I have always used % but what is the best way to go in peoples view?

drhowarddrfine
Dec 17th, 2008, 06:11 PM
Depends.

Apostropartheid
Dec 17th, 2008, 06:15 PM
Pixels (px) is an absolute measurement whose size varies depending on the screen resolution of the viewer. Its main weakness is that most flavours of IE cannot resize them, so are terrible for accessibility.

Points (pt) are strictly a print measurement and belong about as well in the screen world as inches and centimeters. You should only really use these in your print medium stylesheet.

Ems (em) are a relative measurement based off the default size of text set by the browser or user. The value is an expression of a multiplier of the em size of a font. Historically, an em is the size of a capital M letter which was typically the full width of the metal slab used in a printing press, but this is not always the case. It's untrue, but a fair enough lie. The user can set a higher default size and the page will scale with it. [see the tangerine (http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css) for more the more powerful implementations of this measurement]

Percentages (%) mimics the em measurement, except expressed as a percentage. This has one advantage over em values in the fact that some versions of IE show text at a smaller-than-appropriate size when the first declaration of a font size in the DOM tree is an em, but behaves properly with a percentage.

cb2004
Dec 17th, 2008, 06:18 PM
So I have heard the best thing to do is set the font size in the body to a % to set it to 10px and then use an em throughout? So 1.3em would be 13px? What is the % in the body 76%?

Apostropartheid
Dec 17th, 2008, 06:33 PM
There's nothing really wrong with doing that; the method is perfectly acceptable, especially if you're not particularly bothered about the maths.


html {
font-size: 62.5%;
}
body {
font: 1.3em/1.8 'lucida grande', 'lucida sans unicode', sans-serif;
}

BoldUlysses
Dec 17th, 2008, 07:22 PM
So I have heard the best thing to do is set the font size in the body to a % to set it to 10px and then use an em throughout?

Not necessarily. When using ems for everything, you run the risk of aiding accessibility in one area while compromising it in another. For example, on this page (http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css) (referenced above), which is laid out using ems exclusively, resizing the font does magnify the text and improve its readability, along with the layout; however, for those using smaller screen resolutions, the layout quickly resizes itself off the page, making the user have to scroll horizontally to access everything, a usability no-no.

I try to use a combination of ems and px, with % if really necessary. Pixels for the containers (sized to accommodate the broadest reasonable range of resolutions), ems for the text and other usability-sensitive elements, and percentages depending on the page's initial design intent.

gsnedders
Dec 17th, 2008, 11:47 PM
Pixels (px) is an absolute measurement whose size varies depending on the screen resolution of the viewer. Its main weakness is that most flavours of IE cannot resize them, so are terrible for accessibility.

Pixels according to CSS are a relative measurement, which may or may not be the same as a device pixel (e.g., on the iPhone they never are, as it would be totally unusable with such a high pixel density; an even more extreme example is printers which generally work at several hundred dots per inch — if you were to print out at that resolution the website would be tiny!). http://webkit.org/blog/57/css-units/ describes the case of px fairly well.

That said, 1 CSS px is the same as 1 CSS px anywhere else when rendering at the same zoom level.