▼
Streaming live at 10am (PST)

VH or VW ? What do you choose - why and where?

#1

hey there,

I guess this migth seem to be a basic questions, but Im still wondering:

When do u use what ? is there any design “rules” for using them the “right” way ?
Of course on widths it seems obvious that I use VW and on hights VH,
but I can actually use VH on widths too… so is there special cases, I just
dont see, where I do mix them up ? Is there kind of a reference I stick to ?

and which of both do u use for Fonts for example, or button sizes…

#2

My methods in general tend to be as follows:

  • Use VW and VH to define section dimensions if not defined by content
  • Use only VH for margin/padding of sections to keep those dims square
  • Use EM for font headings and paragraphs
  • Use EM for font margin/padding if exact dims aren’t needed
  • Use % and flexbox for laying out divs
  • Use PX wherever accuracy is needed

Not sure about “rules” but this is what I’ve found to work in my projects and what I’ve learned from others and articles.

#3

Hey @rico, @matthewpmunger answer is pretty complete, i ll just add that you shouldn’t use VH for width and VW for height, doesn’t seems like a good idea in my opinion :wink:

#4

thx for this basic overview ! Im still quite new working with html/css etc so this helps as a base.

though Im wondering for example EM for fonts doesnt really help if it comes to responsive design
as I have to work on mostly !? so I need get most of all my fonts used to get scaled with the viewport
(in whatever way this can be done…)

#5

Using VW for height or VH for width is an excellent way to ensure that your aspect ratios stay intact. If you’re good at math, using VW for both WxH or VH for both HxW is a very powerful option.

#6

@Cricitem Yeah i talked about it with @vincent he told me he was using vw for height and invert too sometimes.

#7

VW is good for headers or text where you don’t want the line to break on different devices.

#8

I especially use vw for the height or max-height of subsection of a fullscreen section, on mobile. Say I have a header block in a fullscreen section on mobile, I’ll make everything elastic in the header block, and control the height of the header with VW, so I have a consitant design from iPhone 4 to the largest smartphones.