Why is 50vw font-size not 50% of the actual viewport?

Question

1vw should be 1% of the viewport width. This works great except on font-size. When I set 50vw on a font-size, the font is not 50% of the viewport.. unless I am not understanding how font sizing works.

.test {
    background-color: wheat;
    width:50vw;
}

.test span {
    display:inline-block;
    font-size:50vw;
    background-color: turquoise;
}

<div class="test">
   <span>T</span>
</div>

In this simple example, you can see how the width of the container is set to 50vw, and is exactly 50% of the viewport.

However, the text inside the span, which is only one letter, is not 50% of the viewport. Why?

If I add more text, it will exceed the 50%, so I only left 1 letter, because I thought font-size applies to letters, so I thought a single letter would be 50% of the viewport, but It's not.

What am I not understanding here?

font-size is a vertical dimension not an horizontal one and not all the letter take the same width. They do only when it's a monospace font and in that case there is the `ch` unit that gives the width — Temani Afif, Dec 14 '20 at 21:25
`font-size` controls the height of the font, not the width... — AKX, Dec 14 '20 at 21:26
you can find your answer here : https://stackoverflow.com/questions/39747452/text-using-vw-unit-not-working — NoaH, Dec 14 '20 at 21:27
@NoaH The best answer says, quote: "font-size: 40vw roughly means "render this text such that the width of a capital letter M would be 40% of the viewport width". Well, why isn't the width of the capital letter M 50% of the viewport width then? In my example, it's not 50% of the viewport. — happy_story, Dec 14 '20 at 22:21
@AKX okay.. so what does 50% width of the viewport mean then? Shouldn't a single letter have a width equal to 50% of the viewport? — happy_story, Dec 14 '20 at 22:23
@TemaniAfif I get that font-size is vertical dimension, but then what happens when you apply a unit relative to the width of the viewport? Shouldn't a capital letter be sized in a way that is 50% of the viewport width? Isn't that what VW mean? I don't understand the logic here. — happy_story, Dec 14 '20 at 22:25
read the duplicate to understand how font metric works and what font-size really mean. — Temani Afif, Dec 14 '20 at 22:26
@TemaniAfif I read it, but I still don't get it. So, there is some em-square box that contains the letters? So, increasing the font-size increases the entire em-square, but there is space between the letter inside and the right edge of the em-square, and that's why 50% of the viewport width applied to the font-size increases the em-square to be 50% of the width, but there is still space between the actual letter? Is that what it is in a nutshell, or am i completely misunderstanding it? — happy_story, Dec 14 '20 at 23:20
width is completely irrelevant here. Replace your `T` with an `i` and see the difference. There is 0 relation between font-size and width of a letter — Temani Afif, Dec 14 '20 at 23:26

Why is 50vw font-size not 50% of the actual viewport?

0 Answers0