Streaming live at 10am (PST)

Is there anything wrong with using VW for font sizes and basically anything?

Hi! I know using VW for the font sizes and everything is not typically done, so I was wondering if there was any reason it would be considered bad practice? Or if it would slow down the website at all? It worked really well for me as far as the responsiveness of the site goes, but I feel like there has to be a catch or a reason it’s not more common.

Some reasons:

  1. Less readable/semantic unit (5.9vw - is not like writing “32px” -or- “54px”) +
  2. Harder to convert from figma/XD/Photoshop design files to vw unit.
  3. Huge/Tiny text on very large/small screens (" too responsive to the changes of the screen’s width").
  4. Line height issues.
  5. Desktop: Zoom in/out of the browser not working :frowning:

This is not “bad practice” in all cases - but it may cause problems.

The calc function is usefull to get better control on vw font size (Not available yet on webflow designer).

h1 {
  font-size: calc(20px + 0.5vw);
}

vw for font-size not related to site speed performance.

2 Likes

Oh that is a super cool function. I used a unitless line height which seemed to work but I see what you mean about it being too responsive. I didn’t test to the extreme sizes. Thank you for your reply!