27

Does the pixel value of a font-size refer to the height of the font or the width of the font?

CSS:

.sixteen {
  font-size: 16px;
}

HTML:

<span class='sixteen'>a</span>

Will the "a" be 16 pixels tall or 16 pixels wide, or is that like a max-width/height on both so that the entire character fits in a 16px box?

All the documentation I have seen for this has been ambiguous on the matter.

Stephen Sorensen
  • 9,969
  • 11
  • 29
  • 42

3 Answers3

29

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.

D Mac
  • 3,419
  • 1
  • 20
  • 31
2

The font-size property specifies the size of the font, no matter what unit is used. The size of a font can be characterized as the height of the font, but even this is just a loose and pragmatic description; characters may extend above and below the levels defined by the size of the font. The size is a more or less abstract property, and it should not be expected to correspond to the height (still less the width) of any character.

In particular, it would be all wrong to design a font where the letter “a” occupies the full height of the font. The height of “a” is typically about half of the font size, but this surely varies by font (try testing with “a” in Times New Roman and in Verdana, using the same font size).

Jukka K. Korpela
  • 178,198
  • 33
  • 241
  • 350
  • 2
    I don't think this is at all correct. The ascenders and descenders are included in the font size - it is misleading to say that characters extend above and below the size of the font. Are you perhaps thinking of x-height? x-height is the height from the baseline to the top of non-round characters like 'x'. Ascenders and descenders extend beyond the x-height of a font, but few people would call x-height the same as the font size. Also, font size is not loosely defined in most circles (including HTML rendering). – D Mac Apr 27 '12 at 19:41
  • 2
    I was not confusing font size with x-height. Distance from top of ascenders to bottom of descenders is just a rough characterization, not a specification. Quite often, fonts use a little less of the height, and sometimes they use more. Demo code: `

    QÅgjþÊ

    `. The CSS 2.1 spec says: “The font size corresponds to the em square, a concept used in typography. Note that certain glyphs may bleed outside their em squares.” http://www.w3.org/TR/CSS2/fonts.html#font-size-props     – Jukka K. Korpela Apr 27 '12 at 20:20
1

According to this article by Vincent De Oliveira, the font-size actually has nothing to do with the actual height of characters. It's not even the height of the inline element that contains text.

Of course, a larger value of the font-size property results in a larger text. But the pixel value does not directly translate into the actual size of text.

However, the pixel value of font-size sets the size of 1em to be used for setting margin, padding, etc.

Masa Kudamatsu
  • 11
  • 4