CSS Units Guide — px, rem, em, vw, vh, %
A practical guide to CSS units for web developers. Learn the difference between absolute and relative units, when to use each one, and how to convert between them. Use the converter above to test conversions with your project's settings.
CSS Unit Converter
Convert between px, rem, em, pt, vw, vh, and % with configurable base sizes.
1rem
Batch Converter
Paste CSS and replace all unit values at once.
px ↔ rem Reference Table
Base font size: 16px
| px | rem | em | pt |
|---|---|---|---|
| 4px | 0.25rem | 0.25em | 3pt |
| 8px | 0.5rem | 0.5em | 6pt |
| 10px | 0.625rem | 0.625em | 7.5pt |
| 12px | 0.75rem | 0.75em | 9pt |
| 14px | 0.875rem | 0.875em | 10.5pt |
| 16px | 1rem | 1em | 12pt |
| 18px | 1.125rem | 1.125em | 13.5pt |
| 20px | 1.25rem | 1.25em | 15pt |
| 24px | 1.5rem | 1.5em | 18pt |
| 28px | 1.75rem | 1.75em | 21pt |
| 32px | 2rem | 2em | 24pt |
| 36px | 2.25rem | 2.25em | 27pt |
| 40px | 2.5rem | 2.5em | 30pt |
| 48px | 3rem | 3em | 36pt |
| 56px | 3.5rem | 3.5em | 42pt |
| 64px | 4rem | 4em | 48pt |
| 72px | 4.5rem | 4.5em | 54pt |
| 80px | 5rem | 5em | 60pt |
| 96px | 6rem | 6em | 72pt |
| 128px | 8rem | 8em | 96pt |
Press Enter to copy result
Absolute vs relative CSS units
Absolute units (px, pt, cm, mm, in) have a fixed size regardless of context. Pixels (px) are the most common — 1px equals one device pixel at standard density (but CSS pixels scale on high-DPI screens). Relative units (rem, em, vw, vh, %) are calculated based on another value: rem uses the root font size, em uses the parent font size, vw/vh use the viewport dimensions, and % uses the parent element's size. Relative units create flexible, responsive layouts and improve accessibility.
Best practices for choosing CSS units
Font sizes: use rem for consistency and accessibility (users can scale text via browser settings). Spacing (margin, padding, gap): use rem to keep proportional to text size. Widths: use % or vw for responsive containers, max-width in px or rem for readable line lengths. Heights: avoid fixed heights; use min-height with vh for full-screen sections. Media queries: use rem (not px) so breakpoints respect user font size preferences. Borders and shadows: px is fine — these are decorative and don't need to scale. Line height: use unitless values (like 1.5) for best inheritance behavior.
Common pitfalls with CSS units
em compounding: nested em values multiply (a 1.2em inside a 1.2em parent renders as 1.44em of the grandparent) — use rem instead. vw overflow: 100vw includes the scrollbar width, causing horizontal scroll — use width: 100% on the body instead. % height: percentage heights only work if the parent has an explicit height — use vh or min-height instead. px in media queries: pixel-based breakpoints don't respond to user font size changes — use rem breakpoints (e.g., @media (min-width: 48rem) instead of 768px).
Frequently Asked Questions
What is the difference between rem and em in CSS?
rem is relative to the root element's (html) font size and is consistent throughout the page. em is relative to the parent element's font size and compounds with nesting. For example, 1.5em inside a parent with 1.5em font-size equals 2.25× the grandparent's size. rem avoids this compounding issue, making it safer for most use cases.
Should I use px or rem for responsive design?
Use rem for responsive design. rem units scale when users change their browser font size (an accessibility best practice), while px values stay fixed. Use rem for font-size, spacing, and media query breakpoints. Use px only for fine details like borders and box-shadows that shouldn't scale.
What do vw and vh mean in CSS?
vw (viewport width) and vh (viewport height) are relative to the browser viewport size. 1vw = 1% of the viewport width, 1vh = 1% of the viewport height. 100vw is the full viewport width. They're useful for full-screen sections (min-height: 100vh), fluid typography (font-size: 3vw), and responsive spacing. Note: 100vw includes the scrollbar, so use 100% for body/container widths.
Related Convert Tools
Case Converter
Convert text between camelCase, snake_case, kebab-case, and more
Number Base Converter
Convert numbers between binary, octal, decimal, and hex
CSV ↔ JSON Converter
Convert between CSV and JSON formats with custom delimiters
URL Encoder & Decoder
Encode and decode URLs with encodeURIComponent and encodeURI