CSS Units Converter

LOCAL · Browser-Only

Convert between px, rem, em, vw, vh, %, pt, cm, mm, in and other CSS units

Quick Conversions

Value

Pixel Equivalent

16px

Source Unit

Screen

Relative

Viewport

All Conversions

pxPixels

Source

16px

remRoot em (relative to root font size)

1rem

emEm (relative to parent font size)

1em

%Percentage (relative to parent width)

0.833333%

vwViewport width (1vw = 1% of viewport width)

0.833333vw

vhViewport height (1vh = 1% of viewport height)

1.481481vh

ptPoints (1pt = 1/72 inch)

12pt

cmCentimeters

0.423333cm

mmMillimeters

4.233333mm

inInches (1in = 96px)

0.166667in

Conversion Formulas

1rem = 16px (root font size)

1em = 16px (parent font size)

1vw = 19.2px (viewport: 1920px)

1vh = 10.8px (viewport: 1080px)

1% = 19.2px (parent: 1920px)

1in = 96px

1pt = 1.333333px (1/72 inch)

1cm = 37.795276px

1mm = 3.779528px

Quick Reference (root: 16px, parent: 16px)

px	rem	em	pt	vw	vh	Note
1	0.0625	0.0625	0.75	0.052083	0.092593	Hairline
4	0.25	0.25	3	0.208333	0.37037	0.25rem
8	0.5	0.5	6	0.416667	0.740741	0.5rem
10	0.625	0.625	7.5	0.520833	0.925926	Small text
12	0.75	0.75	9	0.625	1.111111	0.75rem
14	0.875	0.875	10.5	0.729167	1.296296	Body small
16	1	1	12	0.833333	1.481481	1rem (base)
18	1.125	1.125	13.5	0.9375	1.666667	1.125rem
20	1.25	1.25	15	1.041667	1.851852	1.25rem
24	1.5	1.5	18	1.25	2.222222	1.5rem / heading
32	2	2	24	1.666667	2.962963	2rem
48	3	3	36	2.5	4.444444	3rem
64	4	4	48	3.333333	5.925926	4rem
96	6	6	72	5	8.888889	6rem / 1in

·Share recipe

Was this tool helpful?

What is CSS Units Converter?

Free online CSS units converter to convert CSS units between pixels, rem, em, viewport width (vw), viewport height (vh), and percentages.

The formula is simple, rem equals px divided by the base font size, so with the default 16px base, 1rem is 16px and 24px is 1.5rem. Set a custom base font size and viewport dimensions for accurate conversions, then read px to rem, rem to px, px to em, and vh/vw results side by side. Essential for responsive web design when you switch between absolute and relative units for typography, spacing, and media queries. See conversion results for all units at once. No signup required.

How to Use CSS Units Converter

1Enter a value in any CSS unit (px, rem, em, vw, vh)
2Set the base font size (default 16px) for accurate rem/em conversions
3Set viewport dimensions for vw/vh conversions
4See all equivalent values update in real time

Frequently Asked Questions

What is the difference between px, rem, and em?

px (pixels) are absolute units. rem is relative to the root element's font size (usually 16px). em is relative to the parent element's font size. rem is preferred for consistent sizing across the page, while em is useful for component-specific scaling.

Why should I use rem instead of px?

rem units respect the user's browser font size settings, making your site more accessible. If a user increases their default font size, rem-based layouts scale proportionally. px ignores user preferences and always renders at the exact pixel size.

What are vw and vh units?

vw (viewport width) and vh (viewport height) are relative to the browser window size. 1vw = 1% of the viewport width, and 1vh = 1% of the viewport height. They're useful for full-screen sections, responsive typography, and fluid layouts.

How do I convert 16px to rem?

Divide the pixel value by the base font size. With the standard 16px base, 16px equals 1rem, 24px equals 1.5rem, and 32px equals 2rem. Enter the pixel value and the converter returns the rem equivalent instantly. If your project uses a different root font size, change the base value first.

Should I use px or em in media queries?

em is often preferred for media query breakpoints because it scales with the user's browser font size, so the layout adapts when someone zooms or sets a larger default font. Enter your px breakpoint and the tool gives the em value to use in your @media rules.

Share this tool

Related Tools

Tailwind to CSS

Free online tailwind to CSS - convert Tailwind CSS classes to vanilla CSS properties

⇌

Convert units online

Free online unit converter - convert between units of length, weight, temperature, speed, and data storage

🎨

Color Converter

Free online color converter - convert colors between HEX, RGB, HSL formats with live preview

💱

Money converter

Free online currency converter - convert between currencies with current exchange rates

</>

Html to jsx

Free online HTML to JSX converter - convert HTML markup to valid React JSX with automatic attribute and style transformations

Hex converter

Free online number base converter - convert numbers between decimal, binary, octal, and hexadecimal

PDF

HTML to PDF Converter

Convert HTML to PDF online free - create downloadable PDF documents from HTML code in your browser

Timestamp to date

Free online timestamp converter - convert between Unix timestamps and human-readable dates instantly

Keep reading: CSS Units Cheat Sheet and file permissions reference. Doing this in code instead? See the encoding endpoints.

Quick Reference (root: 16px, parent: 16px)

px	rem	em	pt	vw	vh	Note
1	0.0625	0.0625	0.75	0.052083	0.092593	Hairline
4	0.25	0.25	3	0.208333	0.37037	0.25rem
8	0.5	0.5	6	0.416667	0.740741	0.5rem
10	0.625	0.625	7.5	0.520833	0.925926	Small text
12	0.75	0.75	9	0.625	1.111111	0.75rem
14	0.875	0.875	10.5	0.729167	1.296296	Body small
16	1	1	12	0.833333	1.481481	1rem (base)
18	1.125	1.125	13.5	0.9375	1.666667	1.125rem
20	1.25	1.25	15	1.041667	1.851852	1.25rem
24	1.5	1.5	18	1.25	2.222222	1.5rem / heading
32	2	2	24	1.666667	2.962963	2rem
48	3	3	36	2.5	4.444444	3rem
64	4	4	48	3.333333	5.925926	4rem
96	6	6	72	5	8.888889	6rem / 1in

What is CSS Units Converter?

Free online CSS units converter to convert CSS units between pixels, rem, em, viewport width (vw), viewport height (vh), and percentages.