Back to Tools

PX to REM Converter

Convert between PX, REM, EM, %, and PT units. Adjustable base font size, CSS code snippets, and a reference table. Built for responsive design and accessibility work.

Absolute unit - fixed size regardless of other elements

Absolute unit - fixed size regardless of other elements

Relative to root (html) font size - scales consistently

Relative to root (html) font size - scales consistently

Relative to parent element font size - cascading scale

Relative to parent element font size - cascading scale

Percentage of parent element size

Percentage of parent element size

Print unit - 1/72 inch (primarily for print stylesheets)

Print unit - 1/72 inch (primarily for print stylesheets)

Base Font Size

Set your root font size to match your project configuration. All REM, EM, and % conversions are calculated based on this value.

px

Common: 10px (easy math), 16px (accessibility standard)

The browser default is 16px. This is the recommended size for accessibility (WCAG compliance).

CSS Code Snippets

Practical CSS examples showing how to use different units in your stylesheets. Copy and paste directly into your code.

Font Size

Set text size using different units

typography
/* Font size examples */
h1 {
  font-size: 16px;    /* Absolute - fixed size */
  font-size: 1rem;    /* Relative to root - scales consistently */
  font-size: 1em;    /* Relative to parent - cascading */
  font-size: 1%;  /* Percentage of parent */
}

Line Height

Control spacing between lines of text

typography
/* Line height examples */
.text {
  line-height: 16px;
  line-height: 1rem;
  line-height: 1em;
  line-height: 1%;
}

Margin

Space outside elements

spacing
/* Margin examples */
.card {
  margin: 16px;
  margin: 1rem;
  margin: 1em;
}

Padding

Space inside elements

spacing
/* Padding examples */
.button {
  padding: 16px;
  padding: 1rem;
  padding: 1em;
}

Gap (Flexbox/Grid)

Space between flex or grid items

spacing
/* Gap examples */
.container {
  display: flex;
  gap: 16px;
  gap: 1rem;
  gap: 1em;
}

Width

Element width

layout
/* Width examples */
.container {
  width: 16px;
  width: 1rem;
  width: 1%;
}

Max Width

Maximum element width for responsive design

layout
/* Max width examples */
.content {
  max-width: 16px;
  max-width: 1rem;
}

Border Radius

Rounded corners

advanced
/* Border radius examples */
.card {
  border-radius: 16px;
  border-radius: 1rem;
  border-radius: 1em;
}
These examples use 16px = 1rem as the base. Adjust values in the converter above.

Conversion Reference Table

Quick reference showing conversions from 1px to 50px across all units. Perfect for establishing design system scales.

Pixels(px)
Root EM(rem)
EM(em)
Percent(%)
Points(pt)
Actions
1px0.0625rem0.0625em6.25%0.75pt
2px0.125rem0.125em12.5%1.5pt
3px0.1875rem0.1875em18.75%2.25pt
4px0.25rem0.25em25%3pt
5px0.3125rem0.3125em31.25%3.75pt
6px0.375rem0.375em37.5%4.5pt
7px0.4375rem0.4375em43.75%5.25pt
8px0.5rem0.5em50%6pt
9px0.5625rem0.5625em56.25%6.75pt
10px0.625rem0.625em62.5%7.5pt
11px0.6875rem0.6875em68.75%8.25pt
12px0.75rem0.75em75%9pt
13px0.8125rem0.8125em81.25%9.75pt
14px0.875rem0.875em87.5%10.5pt
15px0.9375rem0.9375em93.75%11.25pt
16px1rem1em100%12pt
17px1.0625rem1.0625em106.25%12.75pt
18px1.125rem1.125em112.5%13.5pt
19px1.1875rem1.1875em118.75%14.25pt
20px1.25rem1.25em125%15pt
21px1.3125rem1.3125em131.25%15.75pt
22px1.375rem1.375em137.5%16.5pt
23px1.4375rem1.4375em143.75%17.25pt
24px1.5rem1.5em150%18pt
25px1.5625rem1.5625em156.25%18.75pt
26px1.625rem1.625em162.5%19.5pt
27px1.6875rem1.6875em168.75%20.25pt
28px1.75rem1.75em175%21pt
29px1.8125rem1.8125em181.25%21.75pt
30px1.875rem1.875em187.5%22.5pt
31px1.9375rem1.9375em193.75%23.25pt
32px2rem2em200%24pt
33px2.0625rem2.0625em206.25%24.75pt
34px2.125rem2.125em212.5%25.5pt
35px2.1875rem2.1875em218.75%26.25pt
36px2.25rem2.25em225%27pt
37px2.3125rem2.3125em231.25%27.75pt
38px2.375rem2.375em237.5%28.5pt
39px2.4375rem2.4375em243.75%29.25pt
40px2.5rem2.5em250%30pt
41px2.5625rem2.5625em256.25%30.75pt
42px2.625rem2.625em262.5%31.5pt
43px2.6875rem2.6875em268.75%32.25pt
44px2.75rem2.75em275%33pt
45px2.8125rem2.8125em281.25%33.75pt
46px2.875rem2.875em287.5%34.5pt
47px2.9375rem2.9375em293.75%35.25pt
48px3rem3em300%36pt
49px3.0625rem3.0625em306.25%36.75pt
50px3.125rem3.125em312.5%37.5pt

Table based on 16px base font size. Values are rounded to 4 decimal places.

How It Works

  1. 1

    Enter Any Value

    Type a value in any unit field (PX, REM, EM, %, or PT). All other units update instantly in real-time. No button to click, just immediate conversion as you type.

  2. 2

    Adjust Base Font Size

    Set your base font size (default 16px) to match your project. Choose from common presets (8, 10, 12, 14, 16, 18, 20, 24px) or enter a custom value. All conversions recalculate automatically.

  3. 3

    Copy Values & CSS

    Click the copy button next to any converted value to copy it to your clipboard. Get practical CSS code examples showing your converted values in context. Copy entire code snippets directly into your stylesheets.

  4. 4

    Reference Table

    Use the quick reference table showing conversions from 1px to 50px across all units. Perfect for establishing design system scales. Copy any row or export the entire table as CSV.

Use Cases

  • Responsive Typography

    Convert fixed pixel font sizes to scalable REM units. Build type scales that respect user preferences and scale consistently across breakpoints. Make your typography accessible and responsive.

  • Design System Migration

    Migrating from PX to REM in your design system? Convert spacing scales, typography, and layout values in seconds. Maintain mathematical consistency across your component library.

  • Accessibility Compliance

    REM units honor browser font size settings, which helps meet WCAG standards. Convert PX values so users can scale your site to their preferred reading size.

  • CSS Framework Configuration

    Configure Tailwind CSS, Bootstrap, or custom frameworks with REM-based spacing scales. Convert design tokens from PX to relative units. Create flexible, scalable design systems.

  • Figma to Code Workflow

    Designers work in PX, developers work in REM. Paste Figma pixel values and get production-ready REM code. Copy CSS directly into your components.

  • Print Stylesheet Creation

    Creating print stylesheets or PDFs? Convert web units to PT for proper print sizing. Ensure your content looks professional on paper with accurate physical measurements.

Frequently Asked Questions

PX (pixels) are absolute units with a fixed size. REM (root em) is relative to the root HTML element's font size and scales consistently. EM is relative to the parent element's font size and cascades through nested elements. % (percent) is a percentage of the parent element's size. PT (points) are print units where 1pt = 1/72 inch, primarily used in print stylesheets.
REM units respect user browser font size preferences, making your site more accessible. They make responsive design easier by allowing you to scale your entire layout by changing just the root font size. REM values reduce media query complexity and ensure consistent scaling across your design system. Users who need larger text for accessibility can adjust their browser settings, and your layout will scale proportionally.
16px is the browser default and most recommended base font size for accessibility. It's a comfortable reading size for most users. Some developers use 10px (set with html { font-size: 62.5%; }) for easier mental math where 1rem = 10px, but this requires explicitly overriding the browser default. For accessibility, stick with 16px unless you have a specific reason to change it.
Use REM for consistency: spacing, layout, and font sizes that should scale uniformly across your site. REM is predictable because it's always relative to the root. Use EM when you want component-level scaling: padding and margin that should be relative to the component's font size, or when you intentionally want inheritance from parent elements. EM is useful for creating components that scale proportionally with their text size.
Divide the PX value by your base font size. With a 16px base: 24px ÷ 16 = 1.5rem. With a 10px base: 24px ÷ 10 = 2.4rem. Our converter handles this calculation automatically for all units in real-time. You can also change the base font size to match your project's configuration.
PT (points) are primarily for print media, not web design. 1pt = 1/72 inch = 1.333px. While PT units work in browsers, they're rarely used in modern web development. Use REM or EM for screen displays. PT units are most useful when creating print stylesheets (@media print) or generating PDFs, where physical measurements matter.
REM units are ideal for responsive design because they scale proportionally. Instead of converting every PX value at each breakpoint, you can set your base font size in media queries and all REM-based sizes adjust automatically. Our converter helps you transition from fixed PX values to scalable REM values. Change the base font size to see how your values adapt at different breakpoints.

Need Full Responsive Design Testing?

Want to test responsive layouts beyond unit conversion? Bug0 runs AI-powered tests across breakpoints - typography scales, spacing, mobile layouts, all automated.

Ship fast. Break nothing. - Bug0 AI-powered QA automation