CSS Unit Converter
Convert between CSS units: px, rem, em, %, vh, and vw. Set your base font size and viewport dimensions.
How it works: Enter a value and pick a unit → see all conversions instantly. Click any result to copy it. Adjust settings below if your project uses a different base font size or viewport.
These affect how rem, em, %, vh, and vw are calculated. Most projects use 16px as default.
CSS Units Explained
CSS supports a wide range of units for expressing lengths, sizes, and positions. Choosing the right unit is critical for building accessible, responsive layouts. Units fall into two main categories: absolute units (like px) that always represent a fixed size, and relative units (like rem, em, %, vh, vw) that scale based on a reference value.
Absolute vs Relative Units
Absolute units like px (pixels) are fixed regardless of screen size or user settings. They are predictable and easy to reason about but can cause accessibility issues when users change their browser font size. Relative units scale proportionally — rem scales with the root font size, em with the parent element's font size, % with the parent's dimensions, and viewport units (vh, vw) with the screen size.
When to Use rem
rem (root em) is relative to the root <html> element's font size, which defaults to 16px in most browsers. Using rem for font sizes and spacing ensures your layout respects the user's system font size preferences, which is important for accessibility. A common pattern is to set html { font-size: 62.5% } so that 1rem = 10px, making the math easier.
When to Use em
em is relative to the current element's font size (or its closest parent's font size for non-font properties). It is useful for component-level scaling — for example, setting padding in em means the spacing scales automatically if you change the component's font size. However, em values can compound in nested elements, making them harder to manage than rem at scale.
Viewport Units
vw (viewport width) and vh (viewport height) are percentages of the browser viewport size. 100vw = full width, 50vh = half the screen height. They are excellent for full-screen sections, hero images, and layouts that need to fill the screen. Modern CSS also introduces svh, lvh, and dvh to handle the dynamic viewport height on mobile browsers more accurately.