• Skip to content
  • Skip to footer
Abbey Fitzgerald Web and UX Designer

Abbey Fitzgerald

UX Software Engineer and Digital Designer

Main navigation

  • About
  • Services
  • Work Examples
  • Blog
  • Contact
  • All Categories
    • Design Reflections
    • Digital Design
    • WordPress
    • UX

April 20, 2017 By Abbey Fitzgerald Filed Under: Digital Design

Control typography flow with vh and vw units

  • Facebook
  • Twitter
  • Pinterest

Precise typography design on the web has never been easier with specialized units of measure. When you want beautiful typography to display no matter what the screensize is, there are vh and vw style settings. This controls the width and height of an elements no matter the viewport size.

Some control was gained with percentage-based units, but these were based on the parent element. Vw and vh are length units representing 1% of the viewport size for viewport width (vw) and viewport height (vh), respectively. Vh and vw style units are based on the viewport so a shift of thinking will help because you’ll need to think in terms of the viewport rather than the parent element.

For example, if the browser’s height is 1,000px, 1vh would evaluate to 10px. Similarly, if the viewport width is 850px, 1vw would evaluate to 8.5px.

As you can see, when you make the browser window smaller, the type sizes along with it. In the example below, I styled the text container with a width of 100vw and then sized the text to be large.

Flexible type with viewport width

As always, there’s no better way to learn than by experimenting.

  • Facebook
  • Twitter
  • Pinterest

Filed Under: Digital Design

Abbey Fitzgerald

In addition to being a UX sofware engineer, I can be found writing, designing and developing all sorts of great content. When not in front of a backlit device, I dabble in charcoal and oil paint. I live in Minneapolis, MN and live up to the reputation of Minnesota Nice.

Recent Posts

  • How to break up with a design you love
  • Formatting code and pre text
  • New Parking Spot Technology Ramps Up at Mall of America
  • My Italy Adventure
  • Why do I paint?

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Footer

Contact

Want to discuss your next project? I'm here to help!

Contact Abbey

About Abbey Fitzgerald

Abbey Fitzgerald UX and Web Designer

I am Minnesota nice. Located in Minneapolis, MN, I'm a UX software engineer with a long history in the digital design space. My goal is to make people's lives easier by creating and improving their experience.

Life can't be all work and no play. I also like to dabble in charcoal and oil paint.

Let’s Connect

© 2023 Abbey J. Fitzgerald, LLC