Vh and vw: how and why to use them in Webflow

See how the vh and vw units empower you to make your typography and other site elements truly responsive.

Waldo Broodryk
February 16, 2016
Web design

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 pixels to set height and width nowadays and you’ll see a lot of shaking heads.

Modern devices have so much variability in screen size that it's crucial to design every web layout with maximum flexibility in mind. Similarly, a simple window resize should not leave your user bewildered by unreadable text. Users increasingly expect websites not just to function well but to provide a fully pleasing aesthetic experience regardless of device. Elegantly scaling typography is one way to provide your users with a seamless experience whenever they visit your site.

To achieve real responsiveness, you need to start thinking beyond absolute or fixed length units. Moving to relative units to express length and using vh and vw style settings lets you control the widths and heights of 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 units are ideal for responsive design because they are completely independent of the base font size.

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? Browser support for vh and vw units is generally good — all the newest major browser versions are compatible. Check can I use? for the latest!

vh and vw in action

You can achieve vh and vw based typography sizing in Webflow easily. To use vh and vw values, 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 100% for the width and 100vh for the height. To cover half of the viewport height, you’d set a height of 50vh. You may be asking, why not use 100vw for the width? The answer is because the vw style doesn't take into account the scroll bar width, it could cause side scrolling on browsers with wide scroll bars such as Internet Explorer.

Responsive typography with vh and vw

You can also use the vh and vw as font sizes to make text scale with the size of the browser window. This is a great way to keep your content sized just right no matter the window or 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.

6. Networking and word of mouth

The number-one way to find quality clients is to get out and meet people (figuratively and literally) at non-design events

Once up a time, I’d spend all day at home, applying for mechanical engineering jobs in isolation. I was unsuccessful for months.

I did, however, make serious headway on my Netflix backlog. Serious progress, people.

Eventually, I gave up and focussed on pursuing a career in web design and development (which I was much more passionate about), and started getting out and socializing. 

Within weeks, I had job offers coming in from my loose-knit network of new acquaintances. It’s not rocket science: People prefer to hire people they already know and like — not the faceless folks clogging their inbox with links.

Notice how I didn't specifically describe who the people I met were? That’s because you need to meet all kinds of people. You have no idea who your next client will be.

But they probably won’t be at a web design meetup — those are filled with jobless designers. 

All of this is worth repeating: Go to any and every meetup that matches your interests, and simply tell people you’re a web designer. Watch what happens. Everyone needs a website, or knows someone who does. That's what’s so great about freelancing in this industry.

people eating and talking
Get outside. Talk to the humans you meet there. Repeat.

Some places to start meeting people:

  • Meetups
  • Sports events and classes
  • Cafes
  • Abroad (for some reason, people are a lot more open to talking to strangers while traveling)
  • Parties
  • Twitter
  • Slack groups
  • Conferences and conventions

Just keep in mind that, no matter the event type or place, you have to actually talk to people you don’t already know. 

Tip: Don’t be the typical “business networker.” Don’t bounce from person to person shaking hands, fake-smiling, repeating first names every sentence, and handing out business cards. Be legitimate. Make real connections. 

The other side of the networking coin — word of mouth — comes from building up a client base, having lots of contacts, and building your personal brand (with your blog, portfolios, and templates). This takes time. Do great work, treat your clients with respect, keep in touch with past clients, and follow the rest of the advice in this article, and you'll absolutely be fine.

With networking and word of mouth, you can easily reach a state of having more work offers than you can sustain—without ever actually working for it. When this happens, you can increase your rates. Ka-ching.

Personally, I turn down contract offers on a weekly basis. And they’re all the result of word of mouth and networking I did months ago.

It honestly doesn't take long to get to this point if you produce quality work and put yourself out there.

7. Hustling

Hustling is the art of working extremely hard and extremely smart. In the context of freelancing, hustling involves going out and finding work directly. For example: finding websites or businesses that desperately need your services.

Does your favourite pub have a terrible site? Why not talk to the owners and convince them they need you to fix it?

If you have the right personality, and the drive, this can be an extremely effective way to whip up some initial work. It just isn’t particularly glamorous. It also requires your repeated, hands-on time and energy. (In contrast, writing blog posts or setting up a portfolio one time can attract customers for years to come.) The success rate of in-person contact, however, is much higher. The trade-off is lower volume.

Bonus: Freelance.tv

Fresh out of the studio (or maybe his cool van) Dann Petty released Freelance.tv. It’s a series of 10-minute interviews with freelancers that explores how they find, work with, and keep clients (and much more).

As you may have noticed from reading this post (or maybe not), hearing from other freelancers about their experiences can be extremely helpful. Check out his new episodes and also his upcoming documentary, Freelanced.

Now get out there and find your next gig

If you’re sitting at home, desperately hoping clients will come to you, I have news for you: They won’t.

You have to put yourself out there to start, and show prospective clients that you have tangible, valuable skills to offer.

Luckily, this is an industry where skill and contacts trump all — education is irrelevant. So take advantage of that.

So to summarize, here are your next steps for getting clients and building your freelancing business:

  1. Build your portfolio. Make it gorgeous. Share it everywhere. You can use Webflow to do it yourself without coding.
  2. Create profiles on Behance, Dribbble, and Webflow to connect with other designers and potential clients. Use their SEO advantage to drive more traffic to your website.
  3. Create a profile on Upwork and Design Inc, and bid on contracts. Be confident, and don’t be scared by inexpensive competitors. Also use AngelList to find contracts with promising or established startups.
  4. Start meeting people. Get out, meet, and befriend as many non-designers / developers as possible. Be legitimate.
  5. Start a blog to complement your portfolio. Write thoughtful, useful content to establish yourself as an expert in your discipline. Let your personality shine through.
  6. Convert your websites designs to templates, and release them on sites like Webflow, CreativeMarket, and ThemeForest to earn passive income and awareness.
  7. If it’s your style, start hustling. Find people who legitimately need your services and tell them why.

But most of all:

"Do something! Even if it's wrong."

– My friend's dad

When you’re starting out, it can be better to do the wrong thing than nothing at all. In the process, you’ll learn, and you might just stumble into something that works beautifully.

Just try to not to be so wrong nobody will ever work with you again. Ever.

Now, stop reading, and get out there and land some clients!

Oh — and If you’re a freelancer, how do you find clients? Is there anything I missed?

Waldo Broodryk

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

You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.