If you’ve ever built a website, you know the drill. You set a beautifully crisp font size to 24px, pad your margins nicely, and on your laptop, it looks like an absolute masterpiece. But then you pull it up on your phone, and suddenly the text is so massive it’s taking up half the screen. Or worse, you view it on an ultrawide monitor, and your hero section looks like a tiny postage stamp in the corner.
That’s the problem with pixels. They are stubborn.
If you want your designs to naturally flow and scale with the size of the screen, you need to be using viewport units (vw for width, and vh for height). But how do you actually translate a rigid pixel value from your Figma or Photoshop file into a fluid viewport unit?
Let’s break it down—no advanced calculus required, I promise.
The Ruler vs. The Rubber Band
To understand the conversion, it helps to understand what we’re actually doing.
Think of a pixel (px) as a physical, wooden ruler. If you measure out two inches, it’s going to be two inches whether you hold it up against a pocket notepad or a billboard. It doesn’t care about the canvas.
A viewport unit, on the other hand, is like a rubber band. 1vw simply means “1% of the width of the screen.” If the screen gets wider, the rubber band stretches. If the screen gets narrower, it shrinks. 1vh works the exact same way, just for the height of the screen.
Our goal is to figure out: At my current screen size, what percentage of the screen does this pixel value take up?
The Magic Formula
Turning that wooden ruler into a rubber band requires one simple math formula. Whether you’re dealing with width or height, the math is exactly the same:
The Formula:
(Target Pixel Value ÷ Viewport Dimension in Pixels) × 100 = Your Viewport Unit
Let’s run through a real-world example.
Imagine you’re designing a website on a standard desktop monitor that is 1920px wide. You have a headline that you want to be exactly 48px large on this specific screen.
- Identify your target pixels: 48
- Identify your viewport width: 1920
- Divide target by viewport: 48 ÷ 1920 = 0.025
- Multiply by 100 (to get the percentage): 0.025 × 100 = 2.5
Result: 2.5vw
Now, instead of telling the browser “make this exactly 48 pixels,” you’re saying “make this exactly 2.5% of whatever the screen width is.” On a 1920px screen, it’ll be 48px. On a smaller screen, it’ll smoothly scale down.
What about Height (vh)?
It works exactly the same way, but you swap out the width for the height.
Say you want a hero section to be 600px tall on a laptop screen that is 1080px high.
- (600 ÷ 1080) × 100 = 55.55…
Result: 55.55vh (Or basically, 55.5% of the screen’s height).
A Quick Warning: The “Microscopic Text” Trap
Viewport units are incredible, but they have a dark side. If you set your paragraph text to something like 1.5vw, it might look great on a desktop. But when someone views it on a 400px wide smartphone? That text shrinks down to 6 pixels tall, and your reader will need a magnifying glass.
The Fix: Use CSS clamp(). It lets you use fluid viewport units while setting a minimum and maximum size.
For example: font-size: clamp(16px, 2vw, 24px);
This translates to: “I want the font to grow and shrink dynamically with 2vw, but never let it get smaller than 16px or larger than 24px.”
Your Conversion Cheat Sheet
Don’t want to read through the whole guide every time you need to do the math? I don’t blame you. Bookmark this section or write it on a sticky note.
The Golden Rules:
- 1vw = 1% of the viewport width.
- 1vh = 1% of the viewport height.
The Width Formula (vw):
[Pixel size] ÷ [Screen Width in px] × 100
Example: 32px font on a 1440px screen = (32 / 1440) * 100 = 2.22vw
The Height Formula (vh):
[Pixel size] ÷ [Screen Height in px] × 100
Example: 400px image on a 900px screen = (400 / 900) * 100 = 44.44vh
Pro-Tip: If you hate doing the math manually every time, skip the calculator app. You can use a dedicated px to vw converter or a px to vh converter to do the heavy lifting for you instantly!