Advertisement
CSS Tools

CSS Unit Converter

Convert between CSS units like px, em, rem, vw, vh, and percentages with configurable viewport.

Input Value

Context Settings

Conversion Results

Pixels
16px
Root EM
1rem
EM (parent)
1em
Viewport Width
0.8333vw
Viewport Height
1.4815vh
Percentage
0.8333%
Points
12pt
Centimeters
0.4233cm
Millimeters
4.2333mm
Inches
0.1667in

Quick Reference

1rem = 16px (root font-size)
1em = 16px (parent font-size)
1vw = 19.20px (1% of 1920px)
1vh = 10.80px (1% of 1080px)
1pt = 1.3333px (1/72 of an inch)
1in = 96px (at 96 DPI)
1cm = 37.7953px
1mm = 3.7795px
Advertisement

Related Tools

EM/REMNEW

Convert between px, em, and rem CSS units with configurable base font size. Includes conversion table and CSS output.

Aspect RatioNEW

Calculate aspect ratios for images and videos. Enter width or height with a ratio (16:9, 4:3, 1:1) to find the other dimension.

CSS Beautifier

Format and beautify messy CSS code. Minify or expand with proper indentation.

CSS Grid

Visual CSS Grid layout builder. Set rows, columns, and gaps with live preview.

Advertisement

Frequently Asked Questions

What is the difference between px and rem?
px (pixels) is an absolute unit that corresponds to a fixed size on screen. rem (root em) is a relative unit based on the root element's font size, which defaults to 16px in most browsers. 1rem = 16px by default. Using rem allows your layout to scale proportionally when users change their browser font size, making your site more accessible.
When should I use rem vs em?
Use rem for consistent sizing relative to the root font size — ideal for margins, padding, and font sizes where you want global consistency. Use em for sizing relative to the parent element's font size — useful for component-level scaling where a parent's font size should influence children. Be careful with em as it compounds: an em inside an em multiplies.
What are viewport units (vw, vh)?
vw (viewport width) and vh (viewport height) are relative to the browser viewport dimensions. 1vw = 1% of viewport width, 1vh = 1% of viewport height. They are useful for full-screen layouts, responsive typography, and elements that should scale with the browser window. Note that vh can be problematic on mobile due to the address bar affecting viewport height.
How do I convert px to rem?
Divide the pixel value by the root font size (default 16px). For example, 24px / 16 = 1.5rem. To convert back, multiply: 1.5rem * 16 = 24px. You can change the root font size with html { font-size: 62.5%; } to make 1rem = 10px, simplifying mental math (e.g., 2.4rem = 24px).
What is the difference between absolute and relative units?
Absolute units (px, pt, cm, mm, in) have fixed sizes regardless of context. Relative units (rem, em, vw, vh, %) depend on another value — the root font size, parent font size, viewport dimensions, or parent element size respectively. Relative units are preferred for responsive design because they adapt to different contexts.
Why should I use relative units for font sizes?
Using relative units (rem or em) for font sizes respects the user's browser font size preferences. Users with visual impairments may set their default font size to 20px or larger. If your font sizes use px, they ignore this preference. If they use rem, all text scales proportionally, making your site accessible to users who need larger text.

How to Use the CSS Unit Converter

CSS offers many different units for specifying sizes, and converting between them is a common task in web development. Our converter handles all major CSS units and provides a complete conversion table so you can see the equivalent value in every unit at once.

Step 1: Enter a value and select its unit. Type a numeric value and choose its current unit (px, rem, em, vw, vh, %, pt, cm, mm, or in). The converter immediately calculates the equivalent in all other units.

Step 2: Configure your context. Set the base font size (default 16px) and viewport dimensions (default 1920x1080). These settings affect the conversion of relative units like rem, em, vw, and vh. Match these to your actual project settings for accurate conversions.

Step 3: View the conversion table. The complete conversion table shows the entered value converted to every supported unit. Copy any value directly from the table for use in your CSS code.

Understanding CSS Units

CSS units fall into two categories: absolute units that have fixed sizes, and relative units that depend on context. Absolute units include px (pixels), pt (points, 1pt = 1/72 inch), cm (centimeters), mm (millimeters), and in (inches). These are useful when you need precise, fixed sizes regardless of the viewing context.

Relative units include rem (relative to root font size), em (relative to parent font size), vw and vh (relative to viewport dimensions), and % (relative to parent element size). Relative units are the foundation of responsive web design because they adapt to different screen sizes, user preferences, and context.

CSS Unit Best Practices

Font sizes: use rem. Setting font sizes in rem ensures they scale with the user's browser preferences and your global font size settings. A common pattern is to set html font-size to 62.5% (making 1rem = 10px) for easier calculations, then use rem values like 1.6rem for 16px, 2.4rem for 24px, and so on.

Spacing: use rem or em. Margins and padding should typically use rem for consistent spacing across the layout, or em for component-relative spacing. Using rem for spacing ensures that your layout scales proportionally when the base font size changes, maintaining visual harmony.

Borders and shadows: use px. Thin lines like borders and subtle shadows often look best at fixed pixel sizes. A 1px border should remain 1px regardless of font size. Using px for these decorative elements ensures they stay crisp and consistent.

Full-screen layouts: use viewport units. For hero sections, full-screen overlays, and viewport-relative layouts, use vw and vh. However, consider using dvh (dynamic viewport height) on mobile to account for the changing address bar height. Viewport units combined with min() and max() functions create robust responsive layouts.

Advertisement