iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

CSS PX-EM Converter

By · Reviewed & last updated · Part of CSS Tutorial

Translating pixels to em/rem is one of the most-Googled CSS questions. Assuming the default root font-size: 16px, the maths is just division by 16.

The cheat sheet (16px base)

pxremTypical use
100.625Smallest captions
120.75Footnotes, table cells
140.875Secondary text
161Body text (default)
181.125Comfortable body on large screens
201.25Lead paragraph
241.5h4
281.75h3
322h2
402.5h1
563.5Hero heading

The formula

Quick conversion
rem = px / root-font-size      /* default root is 16px */
px  = rem * root-font-size

The 62.5% trick

Many design systems set html { font-size: 62.5%; } so 1rem = 10px, making mental maths trivial (24px = 2.4rem).

CSS
html { font-size: 62.5%; }   /* now 1rem == 10px */
body { font-size: 1.6rem; }  /* restore 16px body */
Tip: Don't mix em and rem randomly. Use rem for predictable, global sizing; em when you specifically want a value to scale with its element.

Example

Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>

<h1>CSS PX-EM Converter</h1>
<div class="box">Edit the CSS on the left, then click Run &raquo;</div>

</body>
</html>
Try it Yourself »

Exercise

24px equals how many rem at the default 16px root?

Answer: rem

Test yourself

Q1. 16px equals how many rem at default root?
Q2. The "62.5% trick" makes 1rem equal…
Q3. 24px in rem at default root is…

Discussion

Loading…