VW/VH/EM Units of measurements

Design help General
1

Hi,

So yesterday I discovered that by using VW/VH measurements instead of px, my design is translating a lot better between different screen sizes, however it seems that my height between two rows of the same paragraph is different on different size screens.

I have a few questions:

  1. I have my original design on Adobe XD, the measurements are all in pixels. I am using an online converter to convert these measurements to VW/VH respectively. Is there a more accurate/efficient way around this, is there something I am missing?

  2. For margin values, would you use VH/VW measurements.

  3. I have been using VH for font size, should I use EM and will this unit of measurement change the font in relation to the screen size.

  4. Would it be okay to use px for font but with a line height measurement.

  5. The last question, I was studying the free templates provided by webflow and testing to see the outcome of viewing them on different devices. They worked perfectly on a range of different screen sizes despite the measurements being in px. For example, the width of a div block containing text was set to 1140px with an 80%. How come this allows the design to look the same despite the screen size being different if the VH/VW units are not being used.

Any help would be greatly appreciated as I am spending hours on this here trying to understand it and getting absolutely nowhere in the process!

2

  1. No i dont think so. I mean i use no converter and just eyeball it. Dont use VH and VH for every item. Just use it for the main design und placement.

  2. You can but i would not recommend. Only if you need exactly for example 25 VW margin from right at every screen.

  3. If you are using VH and VW it should be VW so the font is responsive.

  4. Yeah it is definitely okay… Like 1.: Dont overuse VH and VW.

  5. With Percent and min-width, max-width you also can create a responsive container. VH and VW are often a good but not always a perfect solution.

1 Like
3

Thanks for the reply, I will go at it again with this information.