I know pixels aren't the best way to specify sizing in CSS, but I've always wondered specifically what it means to say.. this font should be 100px.

If you were to put a page together and set the font size as 100px, if you selected the text and measured its bounding box you would find the box isn't 100px, on windows at default dpi arials box is 12% bigger, and on os x at default dpi, arials box is 13% bigger.

There is probably a very simple explanation of what exactly IS 100px (a sub part of the box), but how exactly is this handled? would this size difference potentially change depending on the font?

Thanks in advance.


Edit: Yes this seems to depend entirely on the font used which probably means it hasn't anything specific to do with platforms, the difference between windows and os x was probably purely because they have slightly different variations on arial.

2 answers

George 68
1
point
This was chosen as the best answer

There is nothing wrong with using px to define font size. It is very widely accepted.

If a font is set to 100px the acutal measurement of the letter height is not going to be 100px. You can test this in photoshop by producing some text at 100px them using the rulers to measure the height of each letter.

So 100px font will conpletely fit in to a 100px height box as long as the line-height is set to either 1em or 100%.

The line height will directly affect the height of the bounding box as the box in wrapped around not just the font/text but also the space reserved for the text in the line height.

The text should fit nicely into the box without anything protruding.

The reason for difference in apperance between OS X and Windows is how each OS renders the font. Windows renders the font bound to the pixel grid giving preference to the pixel sizing/layout.

OS X does not bind fonts to the pixel grid. This gives a more true and accurate representation of the font style and how it will appear in print.

Answered about 10 years ago by George
  • Ah ha, ok so you noted as danwellman did that the box would be 100px if the line-height was 1em, I had previously checked this and found this not to be true, however my css wasn't setting the line-height to 1em where I set the font-size to 100px, I was instead setting the line-height to 1em on a sub element.. for example if I set the body font-size as 100px, and set the paragraph line-height to 1em, the bounding box would be bigger.. so apologies danwellman, you were correct and thanks George.. and yep I understand the differences with font aliasing.. everything is well again in the universe! :) meandmycode about 10 years ago
  • Scratch that, not sure if theres a difference between machines here, but still if I set a font as 100px, select it and measure the outline box (max character height- such as --> ?) then the height is not 100 pixels, it is 112.. so when I say a font should be 100 pixels it will be bigger.. different fonts are different sizes bigger.. meandmycode about 10 years ago
  • Not only this, but certain font characters will actually sit outside of the bounding (selected) box, it seems theres actually no way at all to specify font sizes accurately. meandmycode about 10 years ago
  • Do you have an example of a font that will sit outside of the bounding box? I haven't come across one before. George about 10 years ago
danwellman 5600
2
points

100px font-size makes the font 100px, but you also need to include the ascenders and descenders so the 100px goes from the very top of any captial letters or letters with an ascender (such as a lowercase d) to the very bottom of letters with a descender (such as a lowercase g)

The reason the bounding box is bigger is down to default line-height set by browsers. Set line-height to 1em and the bounding box will fit the font.

The same font, set to the same size, may look different accross platforms because of screen resolutuon

Answered about 10 years ago by danwellman
  • I don't think the bounding box is affected by the line-height, if you have a line-height larger than 1em and have multiple lines, the bounding boxes for each line will be split by a gap that is the line-height extra. Also I'm assuming default native resolution (no scaling).. what I'm really trying to determine is.. if I had a box that was 100pixels in height, setting a font size to 100pixels wouldn't result in a font that was 100pixels in height, it would appear the artist who builds the font can determine where the glyphs sit inside the character box. meandmycode about 10 years ago
  • (at least the bounding box isn't 100 pixels), so I'm wondering specifically what part of the font is trying to fit the 100px? it isn't the box for the character! meandmycode about 10 years ago