Settings
CSS Unit Converter
CSSConvert between px, rem, em, %, pt, vw, and vh. Change one value and all others update instantly.
Understanding CSS units
CSS offers absolute units like pixels (px) and points (pt) that map to fixed physical sizes, and relative units like rem, em, %, vw, and vh that scale based on context. Choosing the right unit affects accessibility, responsiveness, and maintainability. Rem units scale with the root font size, making your entire layout respond to user font preferences. Viewport units (vw, vh) are perfect for full-screen hero sections and fluid typography.
When to use relative units
Use rem for font sizes, spacing, and component dimensions — this ensures your UI scales when users change their browser default font size (an important accessibility consideration). Use em for component-scoped sizing where children should scale relative to their parent. Use vw/vh for layouts that need to fill the viewport, and percentages for fluid grid columns and flex item widths.
The px to rem conversion
The most common conversion is px to rem. With a default browser root font size of 16px, 1rem equals 16px. So 14px is 0.875rem, 18px is 1.125rem, and 24px is 1.5rem. This converter handles these calculations instantly so you can define your design tokens in rem while referencing pixel values from Figma mockups. It also adjusts if your project uses a custom root font size.
Frequently Asked Questions
What is the default root font size?
Browsers default to 16px root font size. This means 1rem = 16px unless you override it in your CSS with html { font-size: ... }. You can change the root font size in this tool's settings to match your project.
When should I use rem instead of px?
Use rem for font sizes, padding, margins, and component dimensions. Rem units respect the user's browser font size preference, which is critical for accessibility. Use px only for borders, shadows, and other values that should not scale.
How do viewport units (vw, vh) work?
1vw equals 1% of the viewport width, and 1vh equals 1% of the viewport height. They are useful for full-screen sections, fluid typography, and responsive layouts that need to adapt to the screen size rather than the font size.
Part of 23+ free developer tools from BigDevSoon
Want to create your own tool?
Try our free Demo editor or start a 7-day trial with all features included.
No signup needed for demo editor
More Developer Tools
Color Converter
Convert colors between HEX, RGB, and HSL formats. Preview colors in real-time.
CSS Gradient Generator
Create beautiful CSS gradients with a visual editor. Linear, radial, and conic gradients with preset gallery.
Box Shadow Generator
Design CSS box shadows visually with live preview. Adjust offset, blur, spread, color, and inset.