Web design
|
Feb 16, 2016

How—and why—to use vh and vw in Webflow

See how the vh and vw units empower you to make your typography and other site elements truly responsive.
In your wanderings across the web, you may have seen some sites with typography that scales beautifully as you resize your browser window. Or full-screen sections that remain that way no matter how big the viewport gets.

Here’s a few examples from CodePen:

 
 
 

Here's a simple example I built in Webflow: http://vh-and-vw.webflow.io/

Now the “old-school” way of setting element and font sizes was with pixel-based widths and heights. Try using those units nowadays and you’ll see a lot of shaking heads.

To achieve real responsiveness, you need to start thinking in relative units and using vh and vw style settings to control the widths and heights of our elements no matter the viewport size.

You can also use percentage-based units, but keep in mind that they’re based on the parent element, while vh and vw style units are based on the viewport.

vh and vw defined

vw and vh are length units representing 1% of the viewport size for viewport width (vw) and height (vh), respectively.

Wondering what browsers support vh and vw? Check can I use? for the latest!

vh and vw in action

To use vh and vw units in Webflow, just type “Nvh” or “Nvw” (where “N” represents the percentage of the viewport you’d like to cover) into any width or height field.

So to cover 100% of the viewport, you’d set 100vw for the width and 100vh for the height. To cover half of the viewport height, you’d set a height of 50vh.  

Responsive typography with vh and vw

You can also use the vh and vw as font sizes to make text scale with the browser window. This is great way to keep your content sized just right no matter the viewport dimensions.

Are you using vh and/or vw yet?

If so, we’d love to see what you’ve done with them! Share your links below, on Twitter, or on Facebook.

Get our top web design content in your inbox
Just like over 500,000 other designers.

Thanks! Check your inbox to confirm your subscription.

Oops! Something went wrong while submitting the form

We hate spam just as much as you do.
Waldo Broodryk

I'm a web designer and Webflow evangelist. Follow me @waldobroodryk

What's Webflow?

It’s a web design tool, CMS, and hosting platform in one.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

Related Articles
Design process
Apr 18, 2017
Everyone’s a designer: how to collaborate smarter
Colleagues, collaborators, clients, and stakeholders can all have valuable design input. Here’s how to encourage and manage non-designer feedback.
Freelancing
Apr 13, 2017
3 ways to design a safer, more productive home office
Creativity needs a safe, organized space to flourish. Check out three simple but effective ways to improve your at-home workspace.
Design process
Apr 6, 2017
What you need to build a restaurant website
Want the perfect recipe for building a beautiful, performant restaurant website? The secret ingredient is process.
Get our top web design content in your inbox
Just like over 500,000 other designers.

Thanks! Check your inbox to confirm your subscription.

Oops! Something went wrong while submitting the form

We hate spam just as much as you do.