📏 CSS unit conversion

Interconvert CSS units such as px, rem, em, vw, vh, %, pt, etc. in real time.

Standard setting

Value to be converted

Conversion Result

Frequently used conversions (base: 16px)

px rem pt Use case
10px 0.625rem 7.5pt Caption / Annotation
12px 0.75rem 9pt Small text
14px 0.875rem 10.5pt Subtext
16px 1rem 12pt Body (Default)
18px 1.125rem 13.5pt Lead text
20px 1.25rem 15pt Subheading
24px 1.5rem 18pt h3 heading
32px 2rem 24pt h2 heading
48px 3rem 36pt h1 heading

Explanation of CSS units

  • px - Pixel. The smallest display unit on the screen.
  • rem - relative unit based on the font size of the root element (html)
  • em - relative unit with respect to the font size of the parent element (here calculated with respect to the root)
  • vw - 1% of viewport width
  • vh - 1% of viewport height
  • % - Percentage of parent element (here calculated based on viewport width)
  • pt - point. 1pt = 1/72 inch (1px = 0.75pt)

Usage and Application Examples

  • Convert px designation in design comps to rem for responsive support
  • Calculate reference values for batch conversion of existing CSS px values to rem/em
  • Relative (em/rem) vs. absolute (px/pt) specification of font size
  • Convert print CSS pt designations to web px
  • Calculate actual pixel values in vw/vh given viewport width and height
  • Review conversion formulas and understand the conversion logic of CSS units

What is CSS Unit Converter?

CSS Unit Converter is a free tool converting between CSS measurement units including px, rem, em, vw, vh, percent, pt, and more. Web developers constantly need unit conversions for responsive design, typography scaling, and layout adjustments. This tool eliminates manual calculations and confusion, ensuring consistent measurements across stylesheets and proper scaling across different screen sizes and devices.

How to Use

Enter a numerical value and select the source unit from the dropdown menu. Instantly select your target unit to see the conversion result. The tool provides multiple conversion results simultaneously for quick reference. For relative units like em and rem, specify a base font size (default 16px) to calculate accurate relative values. Copy converted values directly from output to paste into CSS code. Save frequently needed conversion pairs as bookmarks for instant access during development.

Use Cases

Convert pixel measurements from design mockups to responsive units (rem, em, vw) for modern CSS frameworks and libraries. Calculate viewport-relative sizing for elements that scale with screen width or height using vw and vh units. Adjust typography sizes across responsive breakpoints by converting between px, em, and rem for consistent scaling. Convert point measurements from print design systems to web-friendly pixel values for cross-medium projects. Build responsive layouts by converting fixed pixel dimensions to percentage-based widths and flexible grid units.

Tips & Insights

Understanding unit differences is crucial for responsive design: px is fixed and browser-controlled, em and rem scale relative to font sizes, while vw and vh scale relative to viewport dimensions. Modern design systems prefer rem for consistent spacing as it respects user font size preferences and accessibility settings. Viewport units excel for full-viewport hero sections and responsive image sizing without media queries. Memorize key conversions like 16px = 1rem and 10px = 0.625rem for faster development workflow. Always test converted values across multiple screen sizes and browsers to verify responsive behavior functions correctly.

Frequently Asked Questions

How to use CSS unit conversion?

Enter a numerical value, select the source and destination units, and the conversion result is automatically displayed. Root font size can also be set.

What units are supported?

It supports conversion between commonly used CSS units such as px, rem, em, vw, vh, etc.

What is the difference between px and rem?

px is a fixed size and rem is a relative size based on the font size of the root element. The use of rem is recommended for responsive design.

How many px is 1rem?

The default browser setting is 1rem = 16px. Changing the font-size of the root element will also change the px value corresponding to the rem value.

What is the difference between vw and vh?

The vw is a relative unit of 1% of the viewport (display area) width and the vh is 1% of the viewport height. For example, 1vw = 19.2px for a 1920px wide screen and 1vh = 10.8px for a 1080px high screen. This is useful for full-screen layouts and responsive design.

Can the base size of the viewport units be changed?

Yes, you can check the vw/vh conversion results for any screen size by changing the "Viewport Width" and "Viewport Height" values in the Criteria Settings column. The default is set to 1920x1080 (Full HD).

Can I see the conversion formulas?

Yes, the formulas used to convert to each unit are automatically displayed below the conversion results; you can also see the two-step conversion process via px, which can be used for learning and verification.

Why should I use rem units instead of px for responsive design?

rem units scale based on the root font-size, making your entire design more scalable and accessible. Users who increase their browser's default font size will see your design adjust accordingly, improving usability.

How do I convert percentage (%) units to absolute units?

Percentage units are relative to their parent element, so direct conversion to pixels requires knowing the parent's size. Use the converter with a known parent dimension to calculate the equivalent pixel value accurately.

Can I convert between em and rem units?

Yes, you can convert between em and rem, but remember that em is relative to the current element's font-size while rem is relative to the root. The conversion depends on the font-size context you're working in.

What's the difference between vmin and vmax units?

vmin uses the smaller viewport dimension while vmax uses the larger one. vmin is useful for sizing elements that should scale with the smallest screen dimension, while vmax is better for elements that adapt to available space.

How do I calculate the correct viewport unit base size for my design?

Viewport units (vw, vh, vmin, vmax) scale directly with the viewport size, so no base size adjustment is needed. Simply use the viewport percentage directly—for example, 50vw equals 50% of the viewport width.

Can I batch convert multiple unit values at once?

You can convert multiple values sequentially by entering them one at a time in the tool. For efficiency, use the tool's table preview to see multiple conversions together and compare results.