One vw is one per cent of the viewport width, so converting a pixel value to vw means dividing by the viewport it was designed against and multiplying by a hundred. The result is a dimension that scales continuously with the window rather than stepping at breakpoints.
A 400px element designed on a 1440px viewport is 27.778vw. On a 375px phone that same declaration renders at 104px, and on a 1920px monitor at 533px. Continuous scaling is powerful and, applied to type without limits, ruinous.
The practical rule is to use vw for layout dimensions and only ever for font sizes inside a clamp() with a floor and a ceiling. Text sized in raw vw becomes unreadable on narrow screens and absurd on wide ones, and it fails to respond to the reader's font size preference at all.
The formula
vw- Viewport width units, 1vw = 1% of the width
px- The pixel value at your reference width
viewport- The width you designed against
How to use this calculator
- Enter the pixel value from your design.
- Enter the viewport width that design was made for.
- The gauge shows the value in vw.
- Check the rendered sizes on other screens below.
Worked examples
A 400px card on a 1440px design
That is 27.778vw. It renders at 104px on a phone — narrower than most cards should be — and 533px on a large monitor. A min-width or a clamp() is usually needed at both ends.
Fluid type done safely
A heading at 4vw is 15px on a phone and 77px on a wide monitor. Wrapping it as clamp(1.5rem, 4vw, 3rem) holds it between 24px and 48px while keeping the fluid behaviour in the middle.
How to read your score
Frequently asked questions
Does vw include the scrollbar?
Yes, which is the classic gotcha. 100vw is the full viewport including a vertical scrollbar, so an element at 100vw can cause horizontal overflow on desktop browsers that reserve scrollbar space.
Should font sizes use vw?
Only inside clamp() or with min and max limits. Raw vw type ignores the reader's font size preference entirely and is an accessibility failure at the extremes.
What are vmin and vmax?
vmin is one per cent of whichever viewport dimension is smaller, vmax of whichever is larger. vmin is useful for elements that must fit on screen in both orientations.
How does vw behave on mobile with a collapsing address bar?
Viewport width is stable during that behaviour; it is vh that jumps. The newer svh, lvh and dvh units exist to address the height case specifically.
Rendered size of common vw values
| vw | 375px phone | 768px tablet | 1440px laptop | 1920px monitor |
|---|---|---|---|---|
| 1vw | 4px | 8px | 14px | 19px |
| 2vw | 8px | 15px | 29px | 38px |
| 5vw | 19px | 38px | 72px | 96px |
| 10vw | 38px | 77px | 144px | 192px |
| 25vw | 94px | 192px | 360px | 480px |
| 50vw | 188px | 384px | 720px | 960px |
| 75vw | 281px | 576px | 1080px | 1440px |
| 100vw | 375px | 768px | 1440px | 1920px |
Viewport width excludes nothing: 100vw includes any scrollbar gutter.