CSS Unit Converter
Free online CSS unit converter. Convert between px, rem, em, pt, %, vw, and vh with customizable base font size and viewport dimensions.
px16px
rem1rem
em1em
pt12pt
%100%
vw0.8333vw
vh1.4815vh
What Is a CSS Unit Converter?
A CSS unit converter translates values between different CSS measurement units such as pixels (px), root em (rem), em, points (pt), percentages (%), viewport width (vw), and viewport height (vh). Understanding how these units relate to each other is essential for building responsive web layouts that adapt to different screen sizes and user preferences.
How to Use the CSS Unit Converter
- Enter the numeric value you want to convert in the value field.
- Select the source unit from the dropdown menu.
- Optionally adjust the base font size, viewport width, and viewport height to match your project settings.
- View all converted values across the supported units displayed below.
- Click the copy button next to any converted value to copy it to your clipboard.
Use Cases
- Migrating from px to rem — Convert pixel-based designs to rem units for better accessibility and scalability, allowing text sizes to respect user browser preferences.
- Responsive Design Calculations — Calculate viewport-relative units (vw, vh) from pixel values to create fluid layouts that scale proportionally with the browser window.
- Design System Implementation — Translate design specs from tools like Figma (which use px) into your preferred CSS units for consistent implementation across components.
- Print Stylesheet Development — Convert between screen units (px, rem) and print units (pt) when creating CSS stylesheets for printed documents.
FAQ
What is the difference between rem and em?
rem (root em) is relative to the root element's (html) font size, making it consistent throughout the page. em is relative to the parent element's font size, which means it can compound when nested. For predictable sizing, rem is generally preferred.
Why is 16px the default base font size?
16px is the default font size set by most browsers for the root html element. When no custom font size is defined, 1rem equals 16px. This is the standard baseline used for rem and em calculations.
When should I use viewport units (vw/vh)?
Viewport units are ideal for elements that should scale with the browser window, such as hero sections, full-screen backgrounds, or fluid typography. 1vw equals 1% of the viewport width, and 1vh equals 1% of the viewport height.
How do percentage units work in CSS?
In this converter, percentage is calculated relative to the base font size (similar to em behavior for font-size). In actual CSS, percentages are relative to the parent element's corresponding property, which varies depending on the property being used.