CSS Unit Converter
Convert between px, rem, em, pt, %, vw, vh, cm, mm, in, and pc. Results update as you type.
Advanced — Base 16px · 1920×1080 viewport
| px | rem | em | pt | pc | % | vw | vh | cm | mm | in |
|---|---|---|---|---|---|---|---|---|---|---|
| — | — | — | — | — | — | — | — | — | — | — |
| px | rem | px | rem |
|---|---|---|---|
| 10 | — | 28 | — |
| 12 | — | 30 | — |
| 14 | — | 32 | — |
| 16 | — | 36 | — |
| 18 | — | 40 | — |
| 20 | — | 44 | — |
| 24 | — | 48 | — |
What is CSS Unit Converter?
A CSS unit converter translates values between CSS length units: px (pixels), rem and em (relative to font size), pt and pc (print units), %, vw and vh (viewport units), and absolute units like cm, mm, and in. Pixels are fixed; rem and em scale with user preferences, which is important for responsive design and accessibility. This tool shows all equivalent values at once so you can pick the right unit for your project.
Use it when migrating designs from px to rem, matching design specs (often in pt or px), building responsive layouts with vw/vh, or setting up design systems with consistent spacing. The conversion table updates instantly as you type—no button to click. Customize the base font size (default 16px) in Advanced to match your html { font-size: … }.
How to Use CSS Unit Converter
- Enter a numeric value in the Value field and select the Unit of your input (e.g. 16 and px).
- The All Units table updates automatically—you'll see the same length expressed in px, rem, em, pt, pc, %, vw, vh, cm, mm, and in.
- Use the preset chips (12px, 14px, 16px, 20px, 24px, 32px, 48px) for quick common values.
- Open Advanced to change the base font size (affects rem and em) or viewport dimensions (affects vw and vh).
- Check the px → rem Reference table for a quick lookup of common pixel sizes. Copy any value with the copy button. Press Esc to clear.
Tips & Best Practices
Prefer rem for font sizes, spacing, and margins when you want layouts to respect user zoom and accessibility settings. Use px for borders, box-shadows, or when pixel-perfect alignment is required. The default browser font size is 16px—if your project uses a different base (e.g. 10px for easier math), set it in Advanced. vw and vh are useful for full-viewport elements; the tool uses 1920×1080 by default but you can adjust. For print stylesheets, pt and pc are traditional choices.
When to Use This Tool
Use the CSS Unit Converter when building responsive CSS, migrating a design system from px to rem, matching Figma or Sketch specs (often in px or pt), or implementing accessibility-friendly spacing. It's ideal for front-end developers, designers, and anyone working with design tokens. For related tools: try the number base converter for hex/decimal, the color picker converter for color values, or the aspect ratio calculator for responsive layouts.
Frequently Asked Questions
What is the difference between px and rem?
px (pixels) are fixed units; rem is relative to the root font size (usually 16px). Users who increase their default font size will see rem values scale, while px stays fixed. rem is preferred for accessibility.
What is the default browser base font size?
Most browsers use 16px as the default root font size. Users can change this. Use the Advanced section to set your project's base size for accurate rem conversions.
When should I use rem instead of px?
Use rem for font sizes, spacing, and layout when you want the design to respect user preferences. Use px for borders, shadows, or when pixel-perfect control is needed.
How do em units differ from rem?
em is relative to the parent element's font size and compounds. rem is always relative to the root and stays consistent. In this tool, em is calculated like rem using the base size.
What is a point (pt) in CSS?
A point (pt) is a print unit: 1pt = 1/72 inch. In CSS at 96 DPI, 1pt ≈ 1.333px. Commonly used in print stylesheets.
How do I convert px to rem in my project?
Divide px by your base font size (usually 16). Example: 24px ÷ 16 = 1.5rem. Enter your px value in this tool, select px, and read the rem from the table.