What Does Font-Size Really Correspond To

div {  border: 1px solid black;  font-size: 50px;  height: 50px;  width: 50px;  line-height: 50px;  box-sizing: content-box;  text-align: center;  float: left;}
.a {  font-family: "Times New Roman", Times, serif;}
.b {  font-family: "Times New Roman", Times, serif;  font-weight: bold;}
.c {  font-family: Arial, Helvetica, sans-serif;}
.d {  font-family: Georgia, serif;}
.e {  font-family: Courier, Monaco, monospace;}
.f {  font-family: "Comic Sans MS", cursive, sans-serif;}

<div class="a">A</div><div class="b">A</div><div class="c">A</div><div class="d">A</div><div class="e">A</div><div class="f">A</div>

CSS Font Size Specifics

font-size is the baseline height of the font (the height of a capital H character) plus a little room above it (the ascender) and larger amount of room below it (the descender).

For a particular font at a particular font-size, the baseline height will always be the same size. Below are some examples, based on measurements of the Arial font:

font-size    baseline height
   10           7
   11           8
   12           9
   14           10

In theory, for CSS, pt is a rough approximation of the baseline height in px. For instance, a font-size:9pt has a baseline height of 9px, which corresponds to font-size:12px. In practice, I've sometimes found that pt is larger than the baseline height by 0.5 to 1.0 px.

Here's a jsfiddle showing a side-by-side comparison of capital H's in px and pt.

In most PSDs I've seen, a font specified as 12pt is in fact 12px. But this may vary. When in doubt, measure the baseline height of the text and convert backwards from that to a font-size in px. For instance, if a capital H has a height of 9px, then the font-size is 12px. Sometimes antialiasing in a PSD makes it difficult to accurately measure the baseline height.

What does font size really mean in ios?

From the Wiki page for point (typography):

When a point size of a font is specified, the font is scaled so that its em square has a side length of that particular length in points. Although the letters of a font usually fit within the font's em square, there is not necessarily any size relationship between the two, so the point size does not necessarily correspond to any measurement of the size of the letters[.]

So in all digital fonts, the font-size doesn't really correlate with anything except an imaginary square the font designer chose to design their glyphs on top of. So sometimes this will correlate with the width of the capital M, but not always. And Zapfino, the font you mentioned, is one of the more audacious examples of totally overshooting its boundary boxes. Here it is next to Helvetica, at the same point size:

Although they have a similar X-height, Zapfino's cap-height, ascenders, and descenders are so large that each letter's cell height in most rendering engines, including CoreText, will be more than twice that of Helvetica. It's simply how the font was designed. You'll either need to manually fit your font-size depending on which typeface you use, or try a programmatic approach like this one.

Good luck!

When setting CSS font-size in pixels, does the value refer to the width or height of a letter?

The height - specifically from the top of the ascenders (e.g., 'h' or 'l' (el)) to the bottom of the descenders (e.g., 'g' or 'y'). See the interesting article on Type Anatomy at http://en.wikipedia.org/wiki/Typeface_anatomy.

Clarification what exactly CSS font-size measures

"em" is available as a relative unit of measure in both vertical or horizontal measurements.

So if the current font-size is set to 12px, then setting margin:1em on a child element would create a 12px margin around it. If you were then to change the font-size of the parent element to 16px, the margin would also increase to 16px.

When setting a font-size in CSS, what is the real height of the letters?

Some background on the subject

Back when letters were created on metal, the em referred to the size of each block that the letter would be engraved on, and that size was determined by the capital M because it usually takes up the most space.

Now a days, font developers create their fonts on a computer without the limitations of a physical piece of metal so while the em still exists, its nothing more than an imaginary boundary in the software; thus prone to being manipulated or disregarded altogether.

Standards

In an OpenType font, the em size is supposed to be set to 1000 units. And in TrueType fonts, the em size is usually either 1024 or 2048.

The most accurate way to define a font style is to use EM that way when you define a font-size for use, the dimension does not refer to the pixel height of the font, but to the fonts x height which is determined by the distance between the baseline and the mean line of the font.

For the record 1 PT is about 0.35136mm. And PX is 1 "dot" on your screen which is defined by the dots per square inch or resolution of your screen and thus different from screen to screen and is the worst way to define a font size.

Unit conversion

This is a pretty good read if you enjoy literature that makes your eyes bleed like me.. International unification of typopgrahic measurements

1 point (Truchet)                    |  0.188 mm
1 point (Didot)                      |  0.376 mm or 1/72 of a French royal inch
1 point (ATA)                        |  0.3514598 mm or 0.013837 inch
1 point (TeX)                        |  0.3514598035 mm or 1/72.27 inch
1 point (Postscript)                 |  0.3527777778 mm or 1/72 inch
1 point (l’Imprimerie nationale, IN) |  0.4 mm
1 pica (ATA)                         |  4.2175176 mm = 12 points (ATA)
1 pica (TeX)                         |  4.217517642 mm = 12 points (TeX)
1 pica (Postscript)                  |  4.233333333 mm = 12 points (Postscript)
1 cicero                             |  4.531 mm = 12 points (Didot)

Resolutions

µm  :  10.0    20.0    21.2    40.0    42.3    80.0    84.7    100.0    250.0    254.0
dpi :  2540    1270    1200    635     600     317     300     254      102      100

Standards are only worth so much..

The actual size of one fonts glyphs vs another font are always going vary dependent on:

1. how the developer designed the font glyphs when creating the font,
2. and how the browser renders those characters. No two browsers are going to be exactly the same.
3. the resolution and ppi of the screen viewing the font.

Example

As an example of how common it is for font developers to manipulate the geometry.. Back when Apple created the Zapfino script font, they sized it relative to the largest capitals in the font as would be expected but then they decided that the lowercase letters looked too small so a few years later they revised it so that any given point size was about 4x larger than other fonts.

If you don't have a headache, read some more..

There's some good information on Wikipedia about modern typography and origins; and other relevant subjects.

• Point (typography)
• Pixels per inch
• Font metrics
• Typographic units

And some first-hand experience

If you want to get more first-hand understanding you can download the free font development tool FontForge which is comparable to the non-free FontLab Studio (either of these two being the popular choice among font developers in my experience). Both also have active communities so you can find plenty of support when learning how to use them.

• Fontlab Studio
• Fontlab Fontographer
• FontForge
• Fontlab Wikibook
• FontForge Documentation

What exactly does px represent in web font size

For example, if I have 20px, will 20 pixels represent the height of a
capital A, a small e, a lowercase g or the difference between the
bottom of the g and the top of the A?

None of them. It represent an abstract object called the "em-square". The height of capitals, the width of the glyphs, and various other measures of the glyphs are then defined in each font as proportional to the em-square. But often, none of the measures you see is exactly equal to 1 em-square size, or in your case, equal to 20px.

---

Related Topics