What does the pixel size of a font actually measure?
Asked by
ETpro (
34605
)
August 28th, 2011
With all due respect to people who insist on using Internet Exploder, I design sites in pixel font size instead of em’s or other scalable units because I want to know the site isn’t going to blow up with ugly word wrapping or content flowing beyond the containing element when a user agent resizes the text. But what does font size in pixels actually correspond to? Logic would suggest that it would be the distance from the top of the tallest ascender (say the top of the letter t) to the base of the lowest descender (say the tail of a y or g). But these seem to fall a bit short of the font size specified in CSS. Is there some arbitrary line just above and below those points which measurements include?
Observing members:
0
Composing members:
0
7 Answers
I believe it’s baseline to the top of a typical ascender.
So in “Toy”, it would be from the top of the “T” to the bottom of the “o”.
They’re still scalable even with pixels, but that should be the default as I understand it. Fonts actually vary quite a bit in their rendered size, but the typical “web safe” fonts seem to stay pretty close together. Outside of that, you’ll see a lot of variance.
This may help. 1 pixel = .75 point
@funkdaddy That was what I thought, but a graphic artist whose comp I am rendering into a site is complaining about what she used in Photoshop not being the right size on screen on the Web. I measured, and it appears that the pixel size of very pedestrian Web font such as Arial actually extends from an imaginary line just above the highest ascender to another imaginary line just below the lowest descender. If you specify 18px. What you get is 16 pixels outside to outside.
@Kayak8 Thanks. I had seen that conversion factor but forgotten it. Thanks for the link that shows the side-by-side comparison. Very helpful. That 4px. font is insanely small.
I don’t know much about measurements here, but you mentioned lowercase t representing the tallest ascender. I think in some fonts t is supposed to be shorter than other letters with ascenders, such as lowercase b, d, f, etc.
@gasman Yes, that’s just another part of what makes it so confusing. In some serif fonts, the lover case t actually has an upward slanting serif that reaches above the tops of the capital letters. In onther it is only even with their tops, and in some decorative fonts, it’s lower.
From looking at this some more it looks like the pixels defined in your stylesheet define the total area the font can take up.
So if for instance there was a glyph in the font that was just a solid black square, filling the whole space, that would be x pixels high. It looks like most fonts leave a blank row up top and another at the bottom for most of their letters as kind of a buffer around the glyphs, which might account for the difference in what’s expected and what we’re seeing.
Thinking it through, I guess it makes sense from the perspective of the browser makers, even if not so much from the perspective of a designer.
@funkdaddy Hey, GA! Thanks for making sense of it for me.
Answer this question 
Composing members:
0
