CSS Unit Converter

Convert between CSS units: px, rem, em, pt, vw, vh, cm, mm, and inches.

px
16
rem
1
em
1
pt
12
vw
1.1111
vh
1.7778
cm
0.4233
mm
4.2333
in
0.1667

How to Use

1

Enter value and source unit

Input the numeric value and select the CSS unit you are converting from.

2

Configure base font size and viewport

Set the base font size (for rem/em) and viewport dimensions (for vw/vh) to match your design context.

3

View all equivalent values

See conversions to all other units simultaneously for easy comparison.

4

Copy the needed unit

Copy the CSS value in the target unit and paste directly into your stylesheet.

Why CSS Unit Conversion Matters

Modern responsive web design uses a mix of absolute (px, pt, cm) and relative (rem, em, vw, vh) units. Accurate conversion between them especially relative units like rem and vw which depend on base font size and viewport is critical for responsive layouts.

Real-World Examples & Use Cases

Responsive Typography with rem Units

Web designers implementing accessible typography need to use rem units (relative to the root font size) rather than px so text scales when users change their browser's default font size in accessibility settings. Converting a designer's pixel spec (e.g., 18px heading) to rem requires dividing by the root font size: 18 ÷ 16 = 1.125rem. A CSS unit converter automates this calculation for every text size in a design system, ensuring each element is correctly specified in rem.

Migrating Legacy CSS to Modern Units

Front-end developers updating legacy codebases built with pixel-based layouts need to convert px values to rem, em, or viewport units for responsive design. A CSS unit converter helps batch-convert values: checking that px values in an old design file correspond correctly to rem values in a modern design system, or converting pt values (common in print stylesheets) to px for digital use. This is essential when revamping a site for mobile responsiveness.

Print Stylesheet Development

Developers building print.css stylesheets for documents, invoices, and reports need to work in physical units: mm, cm, pt, and inches. A standard web designer thinks in px, but print requires knowing that A4 paper is 210mm × 297mm, that 1 inch = 72pt = 96px at 96dpi, and that 1cm = 37.8px. A CSS unit converter bridges the gap between screen-based development thinking and the physical measurements that print stylesheets require.

Design Token Calculation for Design Systems

Teams managing design tokens (standardized spacing, typography, and sizing values shared between design tools and code) frequently need to convert between units that Figma uses (px) and units that CSS best practices recommend (rem for text, em for component-relative sizing). A converter automates the space-4 = 16px = 1rem, space-6 = 24px = 1.5rem calculations needed to populate a design token library consistently.

How It Works

CSS Unit Conversion Formulas: Absolute units (fixed physical/screen sizes): 1in = 96px = 72pt = 2.54cm = 25.4mm 1cm = 10mm = 37.795px 1mm = 3.7795px 1pt = 1.333px = 1/72 inch Relative units (depend on context): 1rem = rootFontSize px (default: 16px) px to rem: rem = px ÷ rootFontSize rem to px: px = rem × rootFontSize 1em = parentFontSize px (varies by element) px to em: em = px ÷ parentFontSize 1vw = viewportWidth ÷ 100 px to vw: vw = (px ÷ viewportWidth) × 100 Example: 192px on 1920px viewport = 10vw 1vh = viewportHeight ÷ 100 px to vh: vh = (px ÷ viewportHeight) × 100 Important context dependencies: - rem conversions change if <html> font-size is set (e.g. 62.5% trick: rootFontSize=10px, 1rem=10px) - em conversions change per component (nested em elements compound: 1.2em × 1.2em = 1.44 effective em) - vw/vh values differ by viewport — always specify target viewport dimensions

Frequently Asked Questions

Should I use px or rem for font sizes?▼
Use rem for all font sizes in production code. rem is relative to the root (<html>) font size, which defaults to 16px in all browsers. When users increase their browser's base font size in accessibility settings, rem-based text scales accordingly, but px-based text stays fixed. This matters for users with low vision or reading difficulties. For example, a user who sets their browser to 20px base font will see rem-based text at the correct scaled size, but px-based text will remain at the original (potentially too-small) pixel size.
What is the 62.5% root font size trick?▼
Setting html { font-size: 62.5%; } in CSS changes the root font size to 10px (62.5% × 16px = 10px). This makes rem math easier: 10px = 1rem, 16px = 1.6rem, 24px = 2.4rem (instead of the default 1rem=16px: 16px=1rem, 24px=1.5rem). The trade-off is that any user who changed their browser's default font from 16px to something else will have their preference disrupted by the 62.5% override. Modern design systems often accept the 'harder math' of default 16px root and build tooling to handle rem conversion automatically.
When should I use vw vs rem vs px for spacing?▼
Use px for elements where size should be consistent regardless of text size: borders (border: 1px solid), shadows, icons, and fine detail. Use rem for spacing that should scale with typography: padding, margins, and gap values in text-heavy layouts. Use vw for fluid layout elements that should scale with viewport width: hero section heights, full-width containers, and large typographic displays that should fill different screen sizes proportionally. A common modern pattern: px for borders, rem for component spacing, vw for layout-level responsive sizing.
How do I convert px to rem programmatically in CSS?▼
Use CSS custom properties (variables) and calc(): :root { --rem-base: 16; } then --spacing-4: calc(16 / var(--rem-base) * 1rem). Better yet, use a CSS preprocessor like Sass with a px-to-rem function: @function rem($px) { @return ($px / 16px) * 1rem; } usage: font-size: rem(18px). PostCSS plugins like postcss-pxtorem can automatically convert all px values in a stylesheet to rem during the build process, letting developers write natural px values in source code that compile to accessible rem values.
What is the difference between em and rem?▼
Both em and rem are relative font size units. rem (root em) is always relative to the root element's (<html>) font size — it's consistent throughout the page. em is relative to the current element's font size (or its parent's font size for non-font properties). This makes em useful for components that should scale with their own text size (padding: 0.5em scales with the button's font size), but dangerous for deeply nested elements where em values compound: 1.2em inside 1.2em inside 1.2em = 1.728× the base size. rem avoids compounding entirely.

Related Tools

Explore other tools in this category.

JSON Formatter

Format, validate, prettify, and minify your JSON data quickly.

Password Strength Checker

Analyze how secure your password is and generate a strong one instantly.

Binary ? Text Converter

Convert plain text to binary code and decode binary back to readable text.

Text to Binary Converter

Convert letters and strings into computer binary format.

QR Code Generator

Create and download customized QR codes for URLs, text, and contacts.

Hex ? ASCII Converter

Convert text to hexadecimal and decode hex strings back to readable ASCII text.

Looking for something else?

More in this CategoryExplore All Tools