Question

The CSS property font-size can define its "length" in pixels.

What does it describe exactly, is it the width (or the height) of a nominal character (eg, 'm'), is it some attribute in the font file description, is it something else?

I have been unable to locate this piece of information: what I have found, in some accepted answers (in stackoverflow), statements being the height of capital 'H' otherss of capital 'I' and lower 'p' plus some amount.

I would appreciate a link to an actual specification. BTW, http://www.w3.org/TR/CSS2/fonts.html#font-size-props seems to be silent on this aspect.

I am interested in that to know how this metrics relate to monospace typeface's character width.

Was it helpful?

Solution

The CSS 3 specification is clearer:

This property indicates the desired height of glyphs from the font. For scalable fonts, the font-size is a scale factor applied to the EM unit of the font. (Note that certain glyphs may bleed outside their EM box.) For non-scalable fonts, the font-size is converted into absolute units and matched against the declared font-size of the font, using the same absolute coordinate space for both of the matched values.

You asked:

what I have found, in some accepted answers (in stackoverflow), statements being the height of capital 'H' otherss of capital 'I' and lower 'p' plus some amount.

It depends on the font. The CSS can only describe the desired height of the em box, but the font author can draw the glyphs anywhere they like inside or outside it. See here for more details.

I am interested in that to know how this metrics relate to monospace typeface's character width.

Only indirectly. Different monospace fonts have different ratios between their height and width.

OTHER TIPS

I guess something like that ? http://static.splashnology.com/articles/Choosing-the-Best-Units/font-units-large.png ?

Monospace fonts are particular : the width of a character is allways the same (that's why we call it mono-space).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top