css vw meaning when used with font-size

user_543873 0
Viewed 666

My understanding is that the "vw" units in CSS refer to 1% increments of the viewport width.

However, when I create a mono-spaced font that is supposed to be 10% of the viewport width, it winds up closer to ~6% (1/16):

<div style="width: 100%; background: green; color: white; font-size: 10vw; font-family: monospace;">
123456789012345670
</div>

If I use a font that is not monospace it not quite as bad, but it is still off:

<div style="width: 100%; background: green; color: white; font-size: 10vw; font-family: serif;" id="test8">
MMMMMMMMMMMMMMMMMMMM
</div>

I am using "M" as this is the typical "widest character" in any font. In this case I see 11 characters, so each one is about 9% of the viewport width. This is still off by 10%.

So what gives? What does "vw" actually mean when used with font size, especially when each character has the same width?

css html
1 Answers

Specifying the font-size describes the size of the em-square. The font metrics include the advance width of each glyph which is proportional to the em-square. It is the total of the advance widths (and letter and word spacing) that determines how many characters fit on a line.

For example, if we take the monospaced Windows Courier New font, the glyphs all have the same advance width which is 1229/2048 of the font-size.

So, if we have a font-size of 10vw and 0 letter and word spacing, we should get 100 / (10 x 1229/2048) = 16.66 characters (or 16 characters once truncated) in a line box that's as wide as the viewport.

body {
margin:0;
font-size:10vw;
font-family:'Courier New';
word-break:break-all;
}
ABCDEFGHIJKLMNOPQRSTUVWXYZ

Alohci_425850
Related