Question 298979 in Html Question posted in
Some basic documentation can be found here.

Html – How does viewport width work with font-size in css?

Can someone help me understand how the viewport-width unit works with font size? In the documentation it says that 1vw = 1% of the viewport width (so 1% of the window width I guess?) but if I give my h1 a font size of 5vw it almost covers half of my page?enter image description here

My question is basically how do u use this unit for font size? It works perfectly like you would imagine if you set the width of something but when you use it for font size it becomes gigantic?

Tags:

2

Answers


  1. 0

    Viewport width unit (vw) in CSS is actually a bit more complicated than font size. As you correctly mentioned, 1vw is equal to 1% of viewport width (visible area of ​​your website). So if your display area is 1000 pixels wide, 1vw would be 10 pixels.

    For ex. this code ensures that font size of h1 starts at a base of 16px and grows proportionally to viewport width, but not as aggressively as using vw alone.

    h1 {
    font-size: calc(16px + 2vw);
}
    Login or Signup to reply.
  2. 0

    If the screen is 1920 wide and you set font-size: 5vw; then the actual font size will be 5 * 1920 / 100 => 96px

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search