Using "vw" to get 100% width headings

Question

I have an h1 I want to fit the entire width of the viewport which consists of 13 characters in a monospaced font. After reading the CSS-Tricks article on viewport sized typography it seems like logically if I want to achieve this I simply have to set my h1's styles to:

h1 {
    font-size: 13vw;
    font-family: monospace;
}

This however is rendering with a bit of space left over (highlight the text to see the white space):

(There would be an image here but I don't have enough rep so click here for the JSFiddle)

I have tried other sizes, font-size: 14vw; is slightly too big, font-size: 13.99vw; seems just right, but strangely font-size: 13.999vw; is still too big?

Can someone explain what is going on here? Why would each character of a 13 character length string in a monospaced font require more than (100/13)% of the viewport width to fit the entire viewport width?

Answer 1

^{Before I begin I'm just going to say that I'm not going to give you a workaround due to issues I've raised in comments on Stoyan Dekov's answer. Instead I'm only going to answer your question of Can someone explain what is going on here?}

font-size != width

The problem here is that you're assuming font-size is the same thing as width. It isn't. The CSS Fonts Module defines font-size as:

...the desired height of glyphs from the font.

This means that font-size is more comparable to height than it is to width.

This isn't specific to the vw unit, either. If you specify a font-size in pixels you'll also notice that the computed width does not match the font-size.

But even then it all depends on which font-family you're using anyway, as the same paragraph continues to say:

For scalable fonts, the font-size is a scale factor applied to the EM unit of the font. (Note that certain glyphs may bleed outside their EM box.) For non-scalable fonts, the font-size is converted into absolute units and matched against the declared font-size of the font, using the same absolute coordinate space for both of the matched values.

The key words here being scalable and non-scalable.

Even if a non-scalable font was being used though, 13vw would not reflect each character's width. This would never work with vw, but it may work with vh but only if the aspect ratio of each individual character matched the screen's aspect ratio.

Answer 2

The problem is if a text is the exact same size as the parent container, it will span across a second line.

body {
    margin: 0;
    width:100px
}

h1 {
    font-family: monospace;
    width:100px;
}

That will cause the text to go onto a new line as they are both 100px. That's why 14vw is too big, but 13.99 is just enough: Fiddle DEMO

However, you can use text-align: justify; to achieve what you want.

Take a look at this Fiddle DEMO.