A viewport unit sizes a CSS value from the browser viewport rather than from a parent element. The width unit, vw, is one hundredth of the viewport width: 100vw spans the full width, so a 1,600px viewport makes 1vw equal 16px. Unlike percentage widths, which resolve against a parent, vw stays tied to the viewport and is recalculated whenever the window resizes. section 6.4 section 6.4.1 section 3.1.4
h1 {
font-size: 10vw;
}
This heading occupies 10% of the viewport width. At 1,200px wide, its computed font size is 120px; resizing the window changes that value automatically. section 3.1.4
Choose viewport units by the dimension or writing direction that should control the value:
- Use vw for viewport width and vh for viewport height. A full-viewport hero can use width: 100vw and height: 100vh. section 6.4.1 section 1.4.9
- Use vmin or vmax when the smaller or larger viewport dimension should determine the size. section 3.1.4
- Use vi and vb when sizing should follow inline and block directions, including vertical writing modes. section 6.4.2
Viewport dimensions can make a layout fluid without media queries, but a raw vw value has no built-in limit. For typography, font-size: 2vw is 20px on a 1,000px screen but only 7.5px on a 375px screen. Pair vw with min(), max(), calc(), or clamp() when readable minimums and sensible maximums matter. section 8.2.1 section 8.2.2
Bounded hero typography
To scale a landing-page heading from 4rem at a 320px viewport to 8rem at a 1,600px viewport, calculate a 5vw scaling factor and constrain it: font-size: clamp(4rem, 2rem + 5vw, 8rem). The middle value grows with viewport width, while clamp() prevents it from falling below or exceeding the chosen bounds. section 8.2.4
Height-based viewport sizing needs extra care on mobile. Traditional 100vh can include browser chrome and make a full-screen element extend below the visible area. Use svh when initial-load overflow must be avoided, or dvh when an element should follow the changing visible viewport during scrolling; default vh remains acceptable where slight overflow is not critical. section 6.4.3 section 6.4.5
