CSS unit converter
Convert between CSS units: px, rem, em, vw, vh with configurable base font size and viewport
Input
Context settings (base font size, viewport)
used for rem, em, %
used for vw
used for vh
Conversions
TL;DR
What is CSS unit converter?
CSS length units fall into two categories: absolute units (px, pt, cm, mm, in) which have a fixed physical or pixel size, and relative units (rem, em, vw, vh, %) which scale relative to a reference value. Choosing the right unit affects responsive behavior, accessibility (font scaling), and layout consistency.
Common use cases
- ‣Responsive design: convert a fixed px value from a design file into rem for scalable typography
- ‣Accessibility: ensure spacing and font sizes use rem so users who change their browser base font size see proportional changes
- ‣Design token implementation: translate design system values (expressed in px) into the CSS unit appropriate for each context
Frequently asked questions
What is the difference between rem and em?
rem (root em) is relative to the root element font size (typically 16px in browsers). em is relative to the font size of the current element, which can compound in nested elements. rem is generally more predictable; em is useful when you want spacing to scale with the local font size.
What is the base font size used for conversion?
Browser default font size is 16px, making 1rem = 16px. If the user or site sets a different root font size, the rem equivalent changes accordingly. This tool lets you configure the base font size to match your project.