What is the default base font size?

Most browsers default to 16px. Unless your project explicitly sets a different font-size on the html element, you can use 16px as the base for rem calculations.

When should I still use px?

Use px for values that should not scale with font size, such as borders, box-shadows, and media query breakpoints. For most other values, rem is preferred.

What is the difference between rem and em?

Rem is relative to the root (html) font size and is consistent throughout the document. Em is relative to the parent element's font size, which can cause compounding effects in nested elements.

How to Convert px to rem

3 min readDeveloper

Modern CSS favors rem units for scalable, accessible designs, but designers and browsers often work in pixels. This guide shows you how to convert between px, rem, em, and other CSS units using a free browser tool.

Quick Steps

1
Open CSS Unit Converter
Go to the CSS Unit Converter on Toolin.
2
Set base font size
Enter your project's root font size in px.
3
Enter px value
Type the pixel value to convert.
4
Copy rem value
Use the converted rem value in your CSS.

CSS Unit Converter

Convert between px, em, rem, and %

Open Tool

Step-by-Step: Convert px to rem

Open the CSS Unit Converter

Navigate to the CSS Unit Converter on Toolin.

Set your base font size

Enter the root font size of your project (default is 16px). This is the value set on the html element.

Enter a pixel value

Type the px value you want to convert. The tool shows the equivalent in rem and other units.

Copy the rem value

Copy the converted value and use it in your CSS.

Why Use rem Instead of px?

Rem units are relative to the root font size, making them scale proportionally when users change their browser font settings. This is important for accessibility since users with vision impairments often increase their default font size. Layouts built with rem units scale gracefully, while px-based layouts remain fixed. Most CSS frameworks and design systems now recommend rem for font sizes, spacing, and layout dimensions.

Common px to rem Conversions (base 16px)

12px = 0.75rem
14px = 0.875rem
16px = 1rem
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem

Try CSS Unit Converter Now — Free, No Sign-up

Frequently Asked Questions

What is the default base font size?: Most browsers default to 16px. Unless your project explicitly sets a different font-size on the html element, you can use 16px as the base for rem calculations.
When should I still use px?: Use px for values that should not scale with font size, such as borders, box-shadows, and media query breakpoints. For most other values, rem is preferred.
What is the difference between rem and em?: Rem is relative to the root (html) font size and is consistent throughout the document. Em is relative to the parent element's font size, which can cause compounding effects in nested elements.