What defines character width in a web font?

Question

Font-size seems to apply to the height of a font's 'box' which, as far as I understand, is defined in the font file itself. And so for the same font-size, any character, no matter its visual height, should be inside a box of equal height.

Then, where is a character's width defined ?

A character width needs to be also related to font-size, but each character seems to have a different width (via this test, or this test). It is not regular as it seems to be the case for the height. So it is no the width of the box defined in the font what defines the width of each character.

Then, where/how is it defined?

Chain

Answer 1

The definition of each glyph (character) in the font has a width value that's proportional to the font-size. So typically for a true type font, the font size is broken down into 2048 units. Then each glyph has a width defined as so many of the same units.

So, for example, using the Arial typeface, the character i has a width of 180 units (AW - (LSB + RSB) = 455 - (136 + 139))

while the w has a width of 1457 units (AW - (LSB + RSB) = 1479 - (6 + 16))

_{(Images captured from TypeLight 3.2)}

Thus

That is a great answer, thank you. I would also like to know how is this information kept in the font file, and if it can be directly obtained by any means client or server. Do you perhaps know this, before I start a new question? thank you – Chain

@JaumeMal - I'm pretty sure there's no way to obtain the information programmatically in a browser. It may be possible to obtain it server side but I don't know of any means of doing so. If you ask a new question, be careful not to violate the on/off-topic rules by asking the community to find you a library. – Thus

Answer 2

as far as I understand there's a width-height ratio which is more or less of a standard. it doesn't usually change. the font size property is a way to scale both of them. the ratio stays the same for the font given. here is a link giving more details about the ratio chart:

https://www.lifewire.com/aspect-ratio-table-common-fonts-3467385

so, if the font-size in pixels defines the height, the width is defined by the font-family's width-height ratio, which you can change by: style.fontSizeAdjust according to the article.

Cerebro

But, as far as I understand your answer, that should result in equal width per all characters of the same font. But that is not the case, isn't it? – Chain