Geek Answers Handbook

Using "vw" to get 100% width headers

I have h1. I want to fit the entire width of the viewport, consisting of 13 characters in a monospace font. After reading a CSS-Tricks article in typography the size of a viewport seems logical, if I want to achieve this, I just need to set the h1 styles to:

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

This, however, is rendering with a little space left (select the text to see the space):

(There will be an image here, but I miss the replica, so click here for JSFiddle)

I tried other sizes, a font-size: 14vw;little too big, font-size: 13.99vw;it seems right, but is it weird font-size: 13.999vw;still too big?

Can someone explain what is going on here? Why does each character string 13 characters long in a monospace font require more (100/13)% of the width of the viewport to fit the entire width of the viewport?

+4
source share
2 answers

Before I start, I’ll just say that I’m not going to give you a workaround because of the problems that I raised in the comments . to the answer of Stoyan Dekov. Instead, I'm going to answer your question: can anyone explain what is going on here?

font-size! = width

The problem here is that you assume that font-sizeit is the same as width. This is not true. The CSS Fonts Module defines font-sizehow:

... .

, font-size height, width.

vw. font-size , , width font-size.

, font-family , :

, EM . ( , EM-.) , .

.

, 13vw . vw, vh, .

+3

, , , .

body {
    margin: 0;
    width:100px
}

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

, , 100px. , 14vw , 13,99 : Fiddle DEMO

text-align: justify; .

Fiddle DEMO.

+2

More articles:


All Articles