PX to VW Converter

What Are Viewport Width Units?

The vw unit stands for "viewport width." One vw equals exactly 1% of the browser window's width. If someone's browser window is 1440 pixels wide, then 1vw equals 14.4 pixels. Resize that window to 768 pixels, and 1vw drops to 7.68 pixels. The value is always recalculated live as the window changes size.

This makes vw fundamentally different from rem or em, which are based on font sizes. Viewport units respond to the screen itself, not to any element in your HTML. That is why they are popular for creating layouts that truly fill the screen, or typography that scales with the window.

CSS offers four main viewport units: vw (width), vh (height), vmin (the smaller of vw or vh), and vmax (the larger of vw or vh). Newer browsers also support dvw, svw, and lvw for dynamic, small, and large viewport variations.

Common Viewport Sizes

When converting px to vw, the result depends entirely on what viewport width you are designing for. Here are the most common screen widths and what 1vw equals on each:

Fluid Typography with VW and Clamp

One of the most powerful uses of vw is creating text that smoothly scales between screen sizes without needing a dozen media queries. The modern way to do this is with CSS clamp(), which lets you set a minimum, a preferred (vw-based), and a maximum font size.

/* Fluid type scale using clamp() */
h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  /* Min: 32px, Max: 56px, scales fluidly between */
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
}

p {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  /* Body text: 16px to 20px, very subtle scaling */
}

/* This replaces all of these media queries: */
/* @media (min-width: 768px) { h1 { font-size: 2.5rem; } } */
/* @media (min-width: 1024px) { h1 { font-size: 3rem; } } */
/* @media (min-width: 1440px) { h1 { font-size: 3.5rem; } } */

/* Section padding that scales with screen */
.hero {
  padding: clamp(3rem, 2rem + 5vw, 8rem) clamp(1rem, 5vw, 4rem);
  /* Top/bottom: 48px to 128px */
  /* Left/right: 16px to 64px */
}

/* Container max-width with fluid margin */
.container {
  max-width: 75rem; /* 1200px */
  margin-inline: max(1rem, calc((100vw - 75rem) / 2));
}

/* Bad: text becomes unreadable on small screens */
h1 { font-size: 5vw; }
/* On 320px phone: 5vw = 16px (too small for heading) */
/* On 2560px monitor: 5vw = 128px (way too big) */

/* Good: clamp sets boundaries */
h1 { font-size: clamp(2rem, 5vw, 4rem); }
/* Never smaller than 32px, never bigger than 64px */

VW vs Percentage: Which One to Use