How it works
The CSS Unit Converter converts between CSS length units — px, rem, em, vh, vw, vmin, vmax, pt, pc, in, cm, mm — with configurable root font size and viewport dimensions for accurate context-aware conversions.
CSS has 10+ length units, each designed for different contexts. Understanding when to use which unit is fundamental to responsive, accessible CSS. This tool makes conversions instant and shows the result in all common units simultaneously.
Unit reference: - px: absolute pixels. Device-dependent (a 1px border is 1 physical pixel on 1× DPI, 2 physical pixels on 2× Retina). - rem: relative to the root (<html>) font size. Default = 16px, so 1rem = 16px. Scales with user's browser font preferences — essential for accessibility. - em: relative to the current element's font size. Compounds in nested elements — avoid for anything other than component-relative sizing. - vh/vw: percentage of viewport height/width. 100vh = full viewport height. Use for hero sections and full-screen layouts. - pt: points (1pt = 1/72 inch). Typography unit from print design — still used in some CSS properties and SVG.
How to use it: enter a value in any unit. All other unit conversions update simultaneously. Set the root font size (default 16px) and viewport dimensions (for vh/vw conversions) to match your target environment.
Accessibility note: using rem instead of px for font sizes and spacing respects users who change their browser default font size. A user who sets their browser to 20px base gets appropriately scaled layouts; px-based layouts remain fixed.
Frequently Asked Questions
- Use rem for font sizes, spacing, and layout dimensions that should respect the user's browser font size preference. Users can set a larger default font size for accessibility — rem-based layouts scale up automatically, px-based layouts do not. This is a significant accessibility consideration.
- By default, 1rem = 16px (the browser default root font size). If the user sets their browser font to 20px, then 1rem = 20px. This tool uses 16px as the default but you can change it to match your root font-size CSS declaration.
- vh (viewport height) is fixed at 100% of the initial viewport and does not account for mobile browser UI (address bar, keyboard). dvh (dynamic viewport height) updates when the browser UI changes — better for mobile full-screen layouts. dvh is supported in Chrome 108+, Firefox 101+, Safari 15.4+.
- Yes. 1pt = 1/72 inch = 1.333px at 96 DPI (standard screen resolution). The conversion tool handles pt ↔ px along with all other CSS units.