MyKit.tools

Pixel to REM Converter

Convert pixels to REM units and back. Set your base font size, see a reference table of common values, and copy CSS with one click.

Usually set to the root font-size (default 16px in browsers)

Pixels

16.00px

REM

1.000rem

CSS Output

font-size: 1.000rem; /* 16.00px */

Common Values Reference

PixelsREMUsage
12px0.750remSmall text
14px0.875remBody text
16px1.000remBody text
18px1.125remSubheading
20px1.250remSubheading
24px1.500remHeading
32px2.000remHeading
48px3.000remLarge heading
64px4.000remLarge heading

Text Preview

Small (12px / 0.750rem)

The quick brown fox jumps over the lazy dog

Base (16px / 1.000rem)

The quick brown fox jumps over the lazy dog

Large (24px / 1.500rem)

The quick brown fox jumps over the lazy dog

XL (32px / 2.000rem)

The quick brown fox jumps over the lazy dog

Why use REM?

REM units are relative to the root element's font size, making them perfect for scalable, accessible designs. They respond to user font-size preferences and are easier to maintain than pixels. Use REM for fonts and spacing, PX for borders and precise measurements.

Related Tools

CSS Box Shadow Generator

💻 Developer Tools

Build CSS box shadows visually with live preview. Adjust offset, blur, spread, colour, and opacity. Stack multiple layers and copy the CSS.

CSS Gradient Generator

💻 Developer Tools

Create beautiful CSS gradients with a visual builder. Choose colours, positions, angles, and gradient type. Copy the CSS with vendor prefixes.

Colour Contrast Checker

🎨 Creative & Design

Check if your text and background colours meet WCAG accessibility standards (AA & AAA). Auto-fix suggestions included