What does the size of the font translate to exactly?
I have a 40 pixel font that I'm trying to translate into custom images. I'm trying to match the size of the image exactly, but I'm having some problems getting exactly the right size. Basically, what it comes down to is this. When a font says it is X pixels, what does this physically mean?
This is an excellent question, which has a rather unsatisfactory answer.
The size of type, whether specified in pixels, points (1/72") or millimetres, is the height of an em-square, an invisible box which is typically a bit larger than the distance from the tallest ascender to the lowest descender.
Given this is a somewhat arbitrary measure which
- is dependent on the exact technical design of the font
- can't be precisely measured from a printed or rasterized sample
it's not very meaningful or useful, other than as an approximation.
In your case, work out what size you need to specify in Photoshop to match the browser's rendering by experimentation. You should find this to be a constant ratio for any font, but I wouldn't expect this to be the case if you change browser or OS.
ASCII Time! Pretend the two boxes below are pieces of lead type from 1900 or so. Back then, typefaces were cast in lead (or routed in wood). For the type to be set into a printing lock-up, they had to be connected to solid blocks. This is where the dimension of the type (in points) comes from:
+--------------+ +-------------+ <----+ | | | | | | XX | | | | | X X | | | | | XX XX | | | | | XX XX | | X | | XXXXXX | | X X | Point size of the type | XX XX | | XXX | | XX XX | | X X | | | XX XX | | X X | | | XX XX | | | | | | | | | +--------------+ +-------------+ <----+
Note the two letters above are different sizes, but their bounding box is the same. As such, in terms of points, both of those fonts are the same size.
Nowadays, we don't make much type in lead and wood and most of it is digital. However, the concept of the point sizing still exists in that there is a virtual box that is the same height for every letter that the type is placed on. Again, it's this virtual box that defines the point size rather than the physical measurements of the letterforms themselves. The actual size of the letterforms are often smaller than the point size (but can also be larger as well).
Measuring type in pixels doesn't work because of that, however, you can 'set' type in pixels in CSS and the like. The browser does a translation as best it can between the px size declared. But it's always a fuzzy estimation.
Ultimately, there's no accurate way to get two typefaces letterforms exactly the same size short of looking at them visually and changing the size of each until you see them as being the same size.