How is font size calculated?

Question

I have a complex js function with an equation in which I actually need to understand how much space in pixels font sizes take up.

I have noticed that some font\'s si

Answer 1

You should use .getClientRects() if you need to know how much space a run of text is/will take to display on the screen.

The actual interaction between what you set and what size you'll get is somewhat complicated. The CSS3 spec puts it more clearly than the CSS2 spec quoted in other answers:

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.

Basically, you can control the size of the "em square". The font shapes are defined relative to this, but certainly can stray outside/within this box (sometimes significantly).

And that's just for starters! Even if you assume a font that is matched very closely to this em-square — are you just going to multiply the string length by this size? Unless it's monospaced and your text is ASCII-only, you have a lot to worry about: varying character widths, kerning and ligatures, wrapping behaviour, and of course other even simpler "string length" caveats like tabs, Unicode combining characters and control codes.