Menu
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?
361
The width of a character is the amount of horizontal space that it occupies. This width varies between characters, weights, and typefaces. In Lato, for example, the letter W is wider than the letter I. For most use cases, the varied width of characters isn't an issue.
First, we'll focus on the built-in browser method. Right click on the page you like the look of and select Inspect Element (Firefox), Inspect (Chrome), or F12 Developer Tools (Edge). Select Inspector (Firefox) or Computed (Chrome) in the new bottom windows and scroll down on the right until you reach Font or font-size.
The size is the height of the character (not counting vertical spacing).
The space occupied by a character using the standard font is 6 pixels wide by 8 pixels high.
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)
50
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
