Link to home
Start Free TrialLog in
Avatar of metalaureate
metalaureateFlag for United States of America

asked on

What does 13px *mean*?

Dear Experts,

What does 13px mean when you set a font to 13px. No M or x or any other measure I can find is 13 pixels in size as a result defining its font-size: 13px. What gives?

Please, no lectures on typography for the web; I just need an answer to my specific question. If no-one knows, why does no-one know? And if it is a crap shoot, I would be grateful for an explanation of why it is a crap shoot.

Thanks.
Avatar of seanpowell
seanpowell
Flag of Canada image

13px just means 13 pixels. For a font, it's the size of the x-height of the letter (without the ascender and descender) and for a box (div, span, image, etc.) it's the height of the box, not including borders and padding (except for IE 5)

A font set in pixels is a relative dimension and will scale as the user changes their default text size. (except in IE, which incorrectly treats it as a fixed unit.)

Please let me know if you need more...

Thanks,
Sean
Avatar of metalaureate

ASKER

Now if were as easy as that! I thought as you did, but if you measure one, you'll see it is not true. On my Windows system, a Verdana "x" in 13px is only 7 pixels high. That was the data that prompted my question. (It's not an X either, or an M).
The W3C I believe also defines the px as the only *absolute* measure you can use for font size, not relative as you claim. It only changes as a result of the monitor pixel-size changing, which is a function of monitor size / monitor resolution. Is that not correct?
ASKER CERTIFIED SOLUTION
Avatar of seanpowell
seanpowell
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
For more:
http://www.w3.org/TR/REC-CSS2/syndata.html#length-units

Relative units are:

em: the 'font-size' of the relevant font
ex: the 'x-height' of the relevant font
px: pixels, relative to the viewing device
How fantastic to have this sorted out!

BTW, "hy" in Georgia at 13px is 14 pixels high, whereas at 20px it is 19 pixels high. Is that just a kind of rounding error do you suppose?
Sort of a rounding error. The problem is that both arial and georgia are not natively screen-based fonts, so they are setup to use points, not pixels. Since there are no exact "whole" number equivalients to point values, the browser has to fudge a bit.

Screen based fonts, Verdana for example, are different. They were designed to display in pixels, not points, and so they are almost always exact.

I threw this together to illustrate for you:

http://www.pdgmedia.com/ee/text.html
Thanks for the table—makes the point very clearly.
>>makes the point very clearly

Do you mean pixel :-)
Ho ho.