What does the size of the font translate to exactly?

Question

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 size X (12, for instance), what does this physically mean?

Answer 1

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.

Answer 2

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.

Answer 3

The "font size" of a font refers to the font's "em height", which isn't necessarily the same as the height of particular characters in the font.

Usually the em height of a font adheres to the same basic idea - it'll be roughly set to the distance from the lowest descender (such as the bottom of the letter g) to the highest ascender (such as the top of the letter h):

As you can see, there are no common characters that cover that entire span.

With digital fonts, the "em height" of a font is a choice made by the font designer, and does not have to conform to this convention at all: a digital type designer can pick any foundation for their em size. However, fonts still tend to adhere, at least roughly, to the sort of convention described above. In old days when type consisted of metal blocks, the "em height" was the height of one of those blocks - naturally those blocks had to be big enough to fit all the ascenders, descenders, and accents.

Confusingly, many fonts now contain characters that do extend out of the em height. For example, it's common for modern typefaces to include capital letters with accents (such as Ć) - these accents extend outside the traditional typographical ascender and thus these (and possibly other special characters) fall outside the top of the "em". To maintain consistency with older type, we don't adjust the em size to allow these - we keep the em size and just have these extend out of it. Any typographer using such accents will need to ensure there is space for them to extend into, though usually the line gap is adequate in body text.

The line gap in body text is a space left between the descender of one line of text and the ascender of the line below it. The quoted "font size" of text does not include the line gap in its measurement. This is why, when you choose a 12 point size, the lines are not exactly 12 points (1/6 inch) apart.

The line gap for any text can be influenced by many factors, including the software that is displaying it. It can be influenced by the CSS field line-height, where 1.4 means that the line gap is 0.4 times the em height, and thus an entire line of body text will take up 1.4 times the em height including the line gap. In other applications, the line gap can be specified differently: word processors often specify a "line spacing" value as a multiple of some "single line spacing", but unlike in CSS, "single" spacing does not mean no line gap, but some "default" line gap, where the application tries to come up with a default based on metadata in the font file if it exists there. There are multiple standards for specifying metrics in the font (eg in Truetype, there are different Mac and Windows/OS2 standards) so the default line gap can vary between applications and operating systems.

Now, even if a designer does follow a predictable convention for their em height, this still doesn't tell you the size of capital letters (cap-height) or lower case letters like "x" (x-height or midline) as these can vary freely between typefaces in relation to the ascender height. Within a font family, these will usually be consistent. So for example, Times New Roman Bold and Times New Roman Regular have the same cap-height and x-height, and the ascenders, descenders and baseline will all match up between the bold and non-bold sections.

Answer 4

Try typing in the vertical bar character ('|') and measure that. If I duplicated your situation correctly and your antialiasing isn't blurring it too much, it should be 22px.

22px represents the height of the block of type. But each character fills the block differently. A 'g' or 'q' will occupy the lower region of that 22px, while capital letters and lowercase letters like 'b' or 'd' will occupy the upper portions. '|' is one of the only (if not the only) character that will entirely fill the 22px space.

I don't know about how to compare to your CSS settings, but that explains how Photoshop interprets text height.

Answer 5

Are you sure your font is measured in pixels? Most of the time fonts are measured in points. A point is 1/72 of an inch. So a 40 pt font is 40/72" or 5/9" tall. The kicker is that that is the dimension from the top of the ascenders on tall letters to the bottom of the descenders on letters that hang below the baseline. That's why the x-height is sometimes used, as mentioned above. That is the height of the lower-case letters that don't stick up or down.

Either way, the measurements are never exact anyway, unfortunately. You'll just have to some measuring and figuring (and/or trial-and-error) to accomplish what you're trying.