CSS Unit Converter
Convert 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.
More Developer Tools
Color Converter
Convert colors between HEX, RGB, and HSL formats. Preview colors in real-time.
DataJSON Formatter
Format, validate, and minify JSON data. Paste your JSON and get clean, readable output.
EncodingBase64 Encoder/Decoder
Encode text to Base64 or decode Base64 back to text. Useful for data URIs, API tokens, and more.