Understanding CSS Length Units
CSS provides a variety of length units for sizing elements, spacing, typography, and layout. These units fall into two broad categories: absolute units that correspond to fixed physical or standard measurements, and relative units that scale based on other values like the root font size or the viewport dimensions. Choosing the right unit for each context is one of the most important decisions in responsive web design.
Absolute Units: px and pt
Pixels (px) are the most commonly used absolute unit in CSS. On a standard 96-DPI display, one CSS pixel corresponds to one physical device pixel. However, on high-DPI (Retina) displays, a single CSS pixel may map to two or more physical pixels. The browser handles this mapping automatically, which is why CSS pixels are sometimes called device-independent pixels or reference pixels.
Despite being called “absolute,” CSS pixels are not truly fixed in physical size. The CSS specification defines 1px as 1/96th of an inch at a viewing distance of 28 inches (arm’s length). Browsers and operating systems adjust this based on the device’s pixel density and the user’s zoom level.
Points (pt) originate from print typography, where 1pt equals 1/72 of an inch. In CSS, the relationship between pixels and points is fixed: 1pt = 96/72 px = 1.333px. Points are rarely used in web design but appear frequently in print stylesheets and PDF generation. If you are building a print stylesheet (@media print), points may be more appropriate than pixels.
Relative Units: rem and em
The rem (root em) unit is relative to the root element’s font size, which is typically the <html> element. Browsers default to a 16px root font size unless the user or the stylesheet overrides it. So 1rem = 16px by default, 1.5rem = 24px, and so on.
The great advantage of rem is scalability. By defining spacing, font sizes, and component dimensions in rem, your entire interface scales proportionally when the user changes their browser font size in accessibility settings. This is critical for meeting WCAG accessibility guidelines, which require that text can be resized up to 200% without loss of content or functionality.
The em unit is relative to the computed font size of the parent element. This makes em context-dependent: 1em inside a paragraph with font-size: 20px equals 20px, but the same 1em inside a heading with font-size: 32px equals 32px. This cascading behavior makes em powerful for creating components that scale relative to their own text size, but it can also lead to compounding issues if nested carelessly.
A common best practice is to use rem for global spacing and layout (margins, paddings, widths) and em for component-internal sizing (icon sizes relative to text, padding inside buttons). This combination gives you the consistency of rem with the flexibility of em.
Viewport Units: vw and vh
Viewport Width (vw) and Viewport Height (vh) are relative to the browser viewport dimensions. 1vw = 1% of the viewport width, and 1vh = 1% of the viewport height. So on a 1920px-wide viewport, 50vw = 960px.
Viewport units are especially useful for full-screen sections, hero banners, and fluid typography. A common pattern is to create a hero section with height: 100vh to fill the entire screen, or to use font-size: 5vw for a headline that scales with the browser width.
However, viewport units come with important caveats on mobile devices. On iOS Safari, 100vh includes the area behind the browser’s address bar, which means content may be partially hidden. Modern CSS addresses this with dvh (dynamic viewport height), svh (small viewport height), and lvh (large viewport height). These newer units account for the changing size of mobile browser chrome.
The px-to-rem Conversion: Why It Matters
The most common CSS unit conversion in daily development is px to rem. Design tools like Figma and Sketch export values in pixels, but best practice dictates implementing those values in rem for accessibility. The formula is straightforward:
rem = px / base-font-size
With the default base of 16px: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem. Memorizing this shortlist covers most typography and spacing needs.
Some developers set html { font-size: 62.5%; } to make 1rem = 10px, simplifying mental math (16px = 1.6rem, 24px = 2.4rem). While this approach has usability trade-offs, it illustrates how the base font size is the bridge between pixel values from design tools and rem values in code.
When to Use Each Unit
- px: Borders, box shadows, very small values (1px dividers), and situations where you explicitly do not want scaling.
- rem: Font sizes, margins, paddings, max-widths, and any value that should scale with the user’s font size preference.
- em: Component-internal sizing, padding relative to text size, icon dimensions that should match adjacent text.
- pt: Print stylesheets and PDF generation where physical dimensions matter.
- vw: Fluid typography (
clamp()with vw), full-width elements, and layouts that scale with browser width. - vh: Full-height sections, scroll-snap containers, and viewport-dependent layouts.
Modern CSS: clamp() and Fluid Typography
The CSS clamp() function combines viewport units with minimum and maximum bounds, enabling truly fluid typography without media queries. The syntax is clamp(min, preferred, max). For example:
font-size: clamp(1rem, 2.5vw, 2rem);
This sets the font size to 2.5% of the viewport width, but never smaller than 1rem (16px) and never larger than 2rem (32px). The text smoothly scales between these bounds as the viewport changes. This approach eliminates the need for breakpoint-specific font sizes and creates a genuinely responsive reading experience.
How This Tool Works
This CSS units converter runs entirely in your browser. Enter any numeric value, select a source unit, and see the equivalent in all other units instantly. The tool uses the configurable base font size (default 16px) for rem and em calculations, and the configurable viewport dimensions (default 1920×1080) for vw and vh calculations.
The conversion formulas are displayed alongside each result so you can verify the math. The quick reference table at the bottom provides instant lookups for the most common pixel values, making it easy to find the rem equivalent of any design spec value without manual calculation.
Frequently Asked Questions
What is the difference between rem and em?
rem is always relative to the root element’s font size (typically the <html> tag), making it consistent regardless of nesting. em is relative to the computed font size of the element’s parent, so its actual pixel value can change depending on context. Use rem for global consistency, em for context-aware sizing.
Why is 16px the default base font size?
All major browsers (Chrome, Firefox, Safari, Edge) set their default root font size to 16px. This value was chosen as a comfortable reading size for body text at typical viewing distances. Users can change this in their browser settings for accessibility, which is why using rem instead of px for font sizes is recommended.
Should I use px or rem for border-radius?
For small, decorative radii (4px-8px), px is typically fine since you rarely want border-radius to scale with font size. For larger component-level radii where proportionality matters, rem can be appropriate. There is no strict rule — consistency within your project is most important.
How do I convert viewport units without knowing the viewport size?
Viewport units are by definition relative to the browser window. When designing, you typically target a reference viewport (e.g., 1920×1080 for desktop, 375×812 for mobile). This tool lets you configure those dimensions. In practice, viewport-unit-based values will vary across devices, which is exactly the intended behavior for responsive design.
What about ch, ex, and other CSS units?
CSS defines additional units like ch (width of the “0” character), ex (x-height of the font), vmin and vmax (smaller/larger of vw and vh), and the newer dvh, svh, lvh units. These are useful in specific contexts but less commonly converted between. This tool focuses on the six most frequently converted units in everyday development.