CSS3 vw for font-size : what does it mean

Question

Definition says 1vw = 1% of viewport width. But I don't get it what does it mean when used with font-size? For instance what does it mean if I set:

h1 {
  font-size: 10vw;
}

I thought that if I have h1 with 10 characters it would take 100% of viewport, but it does not.

score 2 · Accepted Answer · edited Jun 15 '21 at 10:13

2

Font-size refers to the vertical size of the font not character width

See the demo below for how they react differently.

h1 {
  font-size: 10vw;
}
h1:nth-of-type(2) {
  font-size: 10vh;
}

<h1>MY HEADER</h1>

<h1>MY HEADER</h1>

JSfiddle Demo

edited Jun 15 '21 at 10:13

answered Jun 10 '15 at 10:57

Paulie_D

107,962
13
142
161

Thanks, so it there any way to compute vw so it is guaranteed that text is always displayed in one line (provided i know text length)? – dragonfly Jun 10 '15 at 10:58
Nope...not as far as I know. That requires Javascript...something like [**FitText.js**](http://fittextjs.com/) – Paulie_D Jun 10 '15 at 11:00
Also see this [**previous question**](http://stackoverflow.com/questions/3401136/resize-font-to-fit-in-a-div-on-one-line) – Paulie_D Jun 10 '15 at 11:04
@dragonfly - seems potentially possible, if you knew the text wouldn't change you could set the vw unit to fit it in more easily, or you could use media queries - or, you could use a monospaced font where the character width is in a fixed ratio with the height – Toni Leigh Jun 15 '15 at 12:38

score 2 · Answer 2 · answered Jun 10 '15 at 10:57

As Paulie_D stated:

Font-size refers to the vertical size of the font not character width.

If you're looking for the width of the character, you might want to look at font-weight (for the thickness of a character) or font-kerning (for the spacing between characters).

Toni Leigh · Answer 3 · 2015-06-10T12:08:09.037

the vw unit is based on the width of the viewport.

1vw is 1% of the browser viewport width. (vh is the corresponding value for height)

This means if the viewport is 600px wide then 10vw is 60px and that's how high your font will be

It also means that dimensions, including heights, can be set relative to the width of the screen, which is very useful for maintaining aspect ratios. This means your font size will respond to the size of the viewport, something which you can't do with a font any other way

It's not supported in all cases, so it's good to provide a pixel fallback, like this:

height: 100px; /* over-ridden if vw can be interpreted */
height: 10vw; /* ignored if not understood */

CSS3 vw for font-size : what does it mean

3 Answers3

Linked