Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What defines character width in a web font?

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?

like image 361
Jaume Mal Avatar asked Apr 07 '19 20:04

Jaume Mal


People also ask

What is the width of a character?

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.

How do I determine the width of a font?

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.

What is the meaning of character size?

The size is the height of the character (not counting vertical spacing).

How many pixels wide is a character?

The space occupied by a character using the standard font is 6 pixels wide by 8 pixels high.


1 Answers

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))

Glyph metrics for i character

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

Glyph metrics for w character

(Images captured from TypeLight 3.2)

like image 50
Alohci Avatar answered Oct 02 '22 16:10

Alohci