Convert px to vw Pixels ↔ Viewport width Free Online Secure
Type a value in px and read it in vw at once. The arithmetic happens in your browser, nothing is sent anywhere, and what the conversion depends on is written out below rather than assumed.
Nothing uploaded
Common sizes — Convert px to vw
| px | vw |
|---|---|
| 8 | 0.555556 |
| 10 | 0.694444 |
| 12 | 0.833333 |
| 14 | 0.972222 |
| 16 | 1.111111 |
| 18 | 1.25 |
| 20 | 1.388889 |
| 24 | 1.666667 |
| 32 | 2.222222 |
| 48 | 3.333333 |
| 64 | 4.444444 |
Where these units come from
The pixel in CSS is not the pixel in your screen. When displays stopped having a predictable density, a page measured in real pixels became a page that shrank as screens got sharper, so the CSS pixel was redefined as a reference length: about 1/96 of an inch seen at a comfortable reading distance. Everything else on this page is built on that. The em is older than the web — in metal type it was the width of a cast block, named after the capital M — and in CSS it means the font size in force, which is why it changes as you nest elements. The rem was added to escape exactly that: it is the em of the root element and never compounds. The vw arrived with responsive design: one hundredth of the viewport's width, whatever that turns out to be.
Where you meet them
These are the units of every stylesheet. Pixels size borders, shadows and anything that should not scale; rem sizes type, spacing and layout, so that one change at the root resizes a whole interface; em sizes things that should follow their own text, like the padding inside a button; vw sizes headings and hero sections that must fill the screen on any device. Converting between them is the daily arithmetic of turning a design handed over in pixels into a stylesheet that scales.
Questions people ask
Why is 16 px the usual starting point?
Because that is the default text size in every major browser, and a stylesheet that does not override it inherits it. One rem therefore equals 16 px on a default setting, which is where the familiar conversions come from: 0.5 rem is 8 px, 1.5 rem is 24 px. If a user has enlarged the default in their browser settings, those same rem values grow with it — which is precisely the point of using them.
Should I use rem or em?
Rem for anything that should follow the page as a whole — type scale, spacing, layout widths — because it is measured from the root and never accumulates. Em for anything that should follow the text it sits in: the padding of a button, the gap beside an icon, the indent of a quotation. The common mistake is nesting em-sized elements inside one another, where 1.2 em inside 1.2 em becomes 1.44, and then 1.73, until the text at the bottom of the page is twice the size intended.
Is the answer exact?
Where both units are defined in terms of one another by whole numbers, yes — the page says so above the figure, and the only rounding is in how many digits are shown. Where the ratio has no finite decimal, the page shows twelve significant digits and says the relation is approximate rather than pretending otherwise.
Does anything I type leave my device?
No. The arithmetic runs in your browser; nothing is uploaded and there is no server to upload it to. Load the page once and it keeps working with the network switched off.
Why you convert px to vw
A designer sends a mockup drawn at 1440 px wide, with a hero heading of 96 px and a section gap of 72 px. On the real web the page will be seen at 360 px on a phone, 820 px on a tablet and 2560 px on a large monitor, and the designer would like the heading to keep its proportion to the screen at each of them. The unit made for that is the viewport width, vw, and the way to get there from the mockup is to convert px to vw: you take the pixel value, divide it by the width the design was drawn at, and multiply by one hundred. A 96 px heading on a 1440 px canvas is 6.67 vw, and from then on it is always 6.67 percent of whatever the screen is.
That is the promise of the viewport unit, and also its risk. Rem and em start from a font size, which a browser sets to a sensible default. Vw has no default at all: the viewport width is simply however wide the reader's window is, and it changes when they rotate the phone or drag the window. So the converter does not hide the one number the answer depends on. The width of the design sits in a field, starting at 1440 px, and you can change it to match your mockup.
The arithmetic runs in your browser and nothing is uploaded. Below you will find the formula, what the conversion keeps and cannot keep, where viewport units help and where they hurt, the accessibility problem that pure vw text creates, the clamp technique that fixes it, and a method for turning a pixel mockup into a fluid stylesheet.
The formula and the width
vw equals px divided by the width, times one hundred
The formula is vw = px ÷ width × 100. With a design width of 1440 px, a size of 144 px becomes 10 vw, 72 px becomes 5 vw and 24 px becomes 1.667 vw. The page shows the width beside the result, as in 144 px = 10 vw (1440 px), so you can see what was assumed. One vw is one hundredth of the viewport width, so a window 1000 px wide has 1 vw equal to 10 px.
Where the 1440 comes from
The 1440 px here is a width designs are often drawn at, a habit and not a standard. Some teams draw at 1280, many at 1920, and mobile designs at 375 or 390. There is no right answer, only the width your design file uses. Type your own: the conversion is only as good as the width you give it.
Using the design's own width
If the mockup was drawn at 1920 px, type 1920, and the same 96 px heading becomes 5 vw. If you convert px to vw using the wrong width, the page will look right at one screen size and wrong at all the others, which is a puzzling bug when you do not know to look for it.
What the conversion keeps and what it cannot
It keeps the share of the screen
One vw is one hundredth of the viewport width, so a size written in vw grows and shrinks with the window instead of staying put. The result is the share of the screen that the pixel value occupied in your mockup, and in the browser the element keeps that share at every width.
It cannot give a default
Unlike rem, vw has no default. A browser gives the root font size 16 px when nobody says otherwise, so a rem page can start from a real number; the viewport width is simply however wide the reader's window is, and it changes when they turn the phone. The width in the field is the width of your design, and the answer is right for a screen of that width and in proportion everywhere else.
Rounding
Dividing by 1440 produces long decimals for most sizes. A value like 6.6667 vw is fine in a stylesheet, but you can round to 6.67 or 6.7 without any visible change. Keep two or three digits after the point; more is noise.
Where viewport units help
Hero headings and large display type
A heading that must fill a given share of the screen on every device is the classic use. At a phone's width a fixed 96 px heading would overflow; in vw it shrinks with the screen and stays on one line.
Full-bleed sections
Spacing between large sections of a landing page often looks best when it scales with the screen, so that the page keeps its rhythm on a small laptop and on a wide display. Gaps in vw do that.
Artwork that must keep its shape
Hero images, illustrations and decorative shapes sized in vw keep their proportions to the window, so the composition does not fall apart as the screen changes.
Fluid type with limits
Combined with clamp(), vw gives type that grows smoothly between a minimum and a maximum. This is the technique modern stylesheets use for headings, and it is covered below.
Where viewport units hurt
Body text in pure vw
Text sized only in vw does not respond when the reader zooms the page in the browser, because zooming changes the pixel size of the window but a vw size keeps its share of it. People who rely on zoom, often because of poor eyesight, are left with text they cannot enlarge. Accessibility guidelines ask that text can be resized, and a pure vw size fails that test.
Tiny and huge extremes
At 320 px wide a heading of 6.67 vw is 21 px, which may be too small. At 2560 px wide it is 171 px, which is enormous. Without limits, the proportion that looked right at 1440 can be absurd at the edges.
The scrollbar
On desktop browsers, the viewport width used for vw includes the width of the vertical scrollbar. A box set to 100vw will therefore be a little wider than the visible area when the page scrolls, and a horizontal scrollbar can appear. Know this before you build a full-width layout out of vw.
The clamp technique
Setting a floor and a ceiling
The CSS function clamp(min, preferred, max) takes a minimum, a preferred value and a maximum. For type, write the minimum and maximum in rem, and the preferred value in vw plus a rem term: font-size: clamp(2rem, 1rem + 4vw, 6rem). The size grows with the window between 32 and 96 px and never goes beyond either end. Because part of it is in rem, the text still respects the reader's settings.
How to build the middle term
Choose two screen widths and the sizes you want at each. For example 32 px at 360 px wide and 96 px at 1440 px wide. The slope is (96 − 32) ÷ (1440 − 360) = 0.0593 px per px of width, which is 5.93 vw, and the intercept is 32 − 0.0593 × 360 = 10.67 px, about 0.667 rem. The preferred term is therefore 0.667rem + 5.93vw. The converter helps with the vw part, and a minute of arithmetic does the rest.
Why this is the right balance
With clamp, you get the fluid behaviour designers want and the accessibility that readers need. It is the answer to the trouble described above, and the reason most modern stylesheets use vw only inside clamp.
How to convert px to vw here
Type the pixel value
Enter the size in pixels in the first field. Decimals are accepted.
Set the width of the design
Leave it at 1440 if that is the width of your mockup. Change it if it is not. The result updates as you type.
Copy the vw value
Use the figure in your CSS with its unit, as in font-size: 6.67vw. For text, put it inside clamp() together with limits in rem.
Where these units come from
The CSS pixel
When displays stopped having a predictable density, a page measured in real pixels became a page that shrank as screens got sharper. So the CSS pixel was redefined as a reference length: about 1/96 of an inch seen at a comfortable reading distance. It is the unit your mockup is drawn in.
The viewport units
The vw arrived with responsive design: one hundredth of the viewport's width, whatever that turns out to be. It sits alongside rem, which is relative to the root font size, and em, which is relative to the element. If you need sizes relative to text instead of the screen, convert px to rem.
Traps when you convert px to vw
Using the wrong design width
The most common error. If your mockup is 1920 wide and you convert with 1440, every size is off by a third. Confirm the width of the frame in your design tool.
Forgetting the mobile design
Many teams have two mockups, one for desktop and one for phone. A heading that is 96 px on the first and 40 px on the second is not one vw value. Use two widths, two conversions and a clamp to join them.
Putting the whole page in vw
A page where everything scales with the window loses its sense of reading: lines get too long on wide screens and text too small on narrow ones. Use vw for the few things that should scale, and fixed or rem sizes for the rest.
Ignoring the zoom problem
Test your page with the browser zoomed to 200 percent. If the text does not grow, the sizes need a rem term.
Questions people ask before converting
How many vw is 100 px?
At a design width of 1440 px, about 6.94 vw.
What is the best design width to use?
The one your mockup was drawn at. There is no universal default.
Is vw better than rem?
They do different jobs. Rem follows the reader's text size; vw follows the window. Use each for what it is good at.
Can I use vw for font size?
Yes, but put it inside clamp() with limits in rem, so that the text stays readable and can still be zoomed.
Is my number uploaded?
No. The arithmetic runs in your browser and nothing is sent anywhere.
How do I go back?
With vw to px, which multiplies by the width instead of dividing.
Choosing wisely when you convert px to vw
Decide what should scale with the screen
Hero type, big gaps and artwork: yes. Body text, borders, small controls: no. The shorter your list of vw values, the more robust the page.
Convert at the design stage
If you convert px to vw while you read the mockup, you can see at once which values come out odd and ask the designer for tidier ones. A heading that turns out to be 6.6667 vw invites a conversation about making it 6.5 or 7.
Keep a record of the width
Write the design width in a comment at the top of the stylesheet, so that anyone who converts later uses the same one. Mixed widths produce a page that is inconsistent in a way nobody can quite explain.
Working from a mockup to a fluid stylesheet
List the sizes that should scale
Open the design file and write down every size that you want to follow the screen: the hero title, the section gaps, perhaps a large illustration. For each one, convert px to vw against the width of the frame, and note the result. Most pages end up with fewer than ten such values, and everything else stays in rem or pixels.
Check the mobile frame separately
If there is a phone mockup, read the same elements at its width. A title of 96 px on a 1440 px frame and 40 px on a 375 px frame fits no single vw value, which is the signal to use clamp: the phone size becomes the floor, the desktop size the ceiling, and the vw term does the work in between. When you convert px to vw for each frame, the two numbers define the slope.
Review at three widths
Look at the finished page at roughly 360, 820 and 1440 pixels, and once at 2560. Fluid layouts are easy to get right at the width of the mockup and subtly wrong elsewhere, and a short pass through these widths finds most problems before a visitor does.
Keep the unit out of long text
Lines of reading text are best sized in rem, and given a maximum line length of around 60 to 75 characters. Use the viewport unit for display type and spacing, and let the reading text be steady.
Related converters
The same family of tools covers the neighbouring conversions. To go back to pixels, use vw to px. For sizes relative to the root, there are px to rem and rem to px, and for sizes relative to the element, px to em and em to px. For the colours of the same stylesheet, HEX to RGB and HEX to HSL handle the notations.
A worked example
Say a landing page is designed at 1440 px, with a hero title of 96 px and a gap of 72 px above it. You type 96 and read 6.667 vw, type 72 and read 5 vw. On a 1000 px window the title is 66.7 px and the gap 50 px, in proportion. But on a phone 360 px wide the title would be 24 px, which is smaller than you want, so you write the title as clamp(2.25rem, 1rem + 5vw, 6rem), giving a floor of 36 px and a ceiling of 96 px, and it stays readable and zoomable. The gap, which has no text, stays in plain vw.
A short checklist
Before converting
Find the width of the mockup. Decide which sizes should scale and which should not.
While converting
Type the pixel value and the design width, and copy the vw figure with its unit.
After converting
Resize the window from phone width to a wide monitor, and zoom the page to 200 percent. Add limits with clamp() wherever the extremes look wrong.
Common mistakes
Assuming 1440 is a standard
It is only a habit. Use your own width.
Sizing body text in vw alone
It cannot be zoomed. Add a rem term and limits.
Forgetting the scrollbar
100vw is wider than the visible area on desktop pages that scroll.
Your numbers stay on your device
The calculation happens locally. Your values are used by your own browser and nothing is sent anywhere. There is nothing to delete afterwards and no account to create. That is the plain way to convert px to vw.
Summary
To convert px to vw here, type the size in pixels and the width of your design, and read the result at once, using the formula vw = px ÷ width × 100. The width starts at 1440 px, a width designs are often drawn at, but it is a habit and not a standard, so type your own. The conversion keeps the share of the screen: one vw is one hundredth of the viewport width, so a size in vw grows and shrinks with the window. Unlike rem, vw has no default, since the viewport is however wide the reader's window is. For text, combine vw with rem inside clamp(), so that it stays readable and zoomable. Nothing is uploaded.