vw, vh, and Percentage Units

Viewport units and percentages both look “relative,” but they answer different questions.

vw and vh

• 1vw = 1% of the viewport width
• 1vh = 1% of the viewport height

On a 1440px wide viewport:

.hero {
  padding-inline: 5vw; /* 72px */
}

Viewport units are useful for:

• Fluid horizontal padding and gaps
• Full-bleed sections that scale with screen width
• Hero typography when combined with clamp()

Watch out for:

• Mobile browser UI changing effective viewport height
• Very small viewports producing tiny or huge values if used alone
• Accessibility: text sized only with vw can become too small on narrow screens

Percentage units

50% is relative to the containing block, not always the viewport.

.sidebar {
  width: 30%;
}

.card-title {
  font-size: 120%; /* relative to parent font-size */
}

Percentages are useful for:

• Column layouts inside a known container
• Images and media that should fill parent width
• Nested typography scaling

The same % can mean width of parent box or font-size of parent text depending on the property.

vw vs %

Question	Better unit
Scale with screen width globally	vw
Fill a parent container	%
Typography with min/max bounds	clamp() with rem + vw
Grid column inside a card	% or fr units

Pair viewport units with bounds

A common responsive pattern:

.section-title {
  font-size: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
}

Raw vw alone is often too aggressive for body text. clamp() adds minimum and maximum guardrails.

Key takeaway

Use vw/vh when the viewport is the reference. Use % when the parent box or parent font-size is the reference. For typography, combine vw with rem through clamp().

Preview how px values map to vw at different viewport widths in the CSS Unit Converter / Clamp Generator.