Popular Conversions
On a 1440 px design: 16px = 1.111vw, 24px = 1.667vw, 100px = 6.944vw. On a 1920 px design: 16px = 0.833vw and 100px = 5.208vw. The converter above fills in your own screen width automatically.
Convert pixels to viewport-width units. 1vw = 1% of the viewport width, so on a 1440 px screen 1vw = 14.4 px.
On a 1440 px design: 16px = 1.111vw, 24px = 1.667vw, 100px = 6.944vw. On a 1920 px design: 16px = 0.833vw and 100px = 5.208vw. The converter above fills in your own screen width automatically.
VW values for common pixel sizes at four typical viewport widths.
| Pixels (px) | Mobile (375px) | Tablet (768px) | Laptop (1440px) | Desktop (1920px) |
|---|---|---|---|---|
| 8px | 2.133vw | 1.042vw | 0.556vw | 0.417vw |
| 10px | 2.667vw | 1.302vw | 0.694vw | 0.521vw |
| 12px | 3.2vw | 1.563vw | 0.833vw | 0.625vw |
| 14px | 3.733vw | 1.823vw | 0.972vw | 0.729vw |
| 16px | 4.267vw | 2.083vw | 1.111vw | 0.833vw |
| 18px | 4.8vw | 2.344vw | 1.25vw | 0.938vw |
| 20px | 5.333vw | 2.604vw | 1.389vw | 1.042vw |
| 24px | 6.4vw | 3.125vw | 1.667vw | 1.25vw |
| 32px | 8.533vw | 4.167vw | 2.222vw | 1.667vw |
| 40px | 10.667vw | 5.208vw | 2.778vw | 2.083vw |
| 48px | 12.8vw | 6.25vw | 3.333vw | 2.5vw |
| 64px | 17.067vw | 8.333vw | 4.444vw | 3.333vw |
| 80px | 21.333vw | 10.417vw | 5.556vw | 4.167vw |
| 100px | 26.667vw | 13.021vw | 6.944vw | 5.208vw |
| 120px | 32vw | 15.625vw | 8.333vw | 6.25vw |
| 160px | 42.667vw | 20.833vw | 11.111vw | 8.333vw |
| 200px | 53.333vw | 26.042vw | 13.889vw | 10.417vw |
| 240px | 64vw | 31.25vw | 16.667vw | 12.5vw |
| 300px | 80vw | 39.063vw | 20.833vw | 15.625vw |
| 400px | 106.667vw | 52.083vw | 27.778vw | 20.833vw |
| 500px | 133.333vw | 65.104vw | 34.722vw | 26.042vw |
| 600px | 160vw | 78.125vw | 41.667vw | 31.25vw |
| 800px | 213.333vw | 104.167vw | 55.556vw | 41.667vw |
| 1000px | 266.667vw | 130.208vw | 69.444vw | 52.083vw |
vw alone makes text tiny on phones and huge on big monitors. Combine it with clamp() to grow smoothly between two sizes. For text that is 16 px at 375 px wide and 24 px at 1440 px wide:
font-size: clamp(16px, 13.183px + 0.751vw, 24px);
The vw part is (24 − 16) ÷ (1440 − 375) × 100 = 0.751vw, and the px part makes the line pass through 16 px at 375 px.
vw = px ÷ viewport width × 100
Example: 48 px on a 1440 px wide design is 48 ÷ 1440 × 100 = 3.333vw.
Divide the pixel value by the viewport width and multiply by 100. On a 1440 px design, 100 px = 6.944vw.
16 px = 4.267vw at 375 px wide, 1.111vw at 1440 px and 0.833vw at 1920 px.
Not on its own: text becomes too small on phones. Use clamp() with a minimum and maximum, as shown above.
Use the width of the design you are converting from, such as 1440 px or 1920 px for desktop mockups and 375 px for mobile.
No. All conversions happen entirely in your browser. The values you enter are never sent to our server or saved.