CODEWITHSUNDEEP
css
dragonfly
dragonfly

Reputation: 17773

CSS3 vw for font-size : what does it mean

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.

Upvotes: 2

Views: 4013

Answers (3)

Paulie_D
Paulie_D

Reputation: 115010

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

Upvotes: 2

Toni Leigh
Toni Leigh

Reputation: 4971

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 */

Upvotes: 2

Nebula
Nebula

Reputation: 7151

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).

Upvotes: 2

Related Questions