REM stands for "Root EM". It is relative to the font-size of the root element (usually ). If root font-size is 16px, 1rem = 16px.

Pixel Converter | NovaCalculator

Formula

REM = Pixels / Base Size

Divide the pixel value by the root font size (usually 16px) to get the REM value.

Worked Examples

Example 1: Standard Text

Problem:16px base, want 24px heading

Solution:24 / 16 = 1.5

Result:1.5 rem

Example 2: Small Text

Problem:16px base, want 14px text

Solution:14 / 16 = 0.875

Result:0.875 rem

Frequently Asked Questions

What is a REM unit?

REM stands for "Root EM". It is relative to the font-size of the root element (usually <html>). If root font-size is 16px, 1rem = 16px.

What is the difference between EM and REM?

REM is relative to the root element. EM is relative to the font-size of its direct parent. REM is generally preferred for consistency in modern web design.

Why use REM instead of PX?

REM units allow users to control the scale of the site (accessibility). If a user increases their browser font size, REM layouts adjust automatically, while PX layouts remain fixed.

What is the standard base font size?

Most browsers have a default font size of 16px. This is why 16px is commonly used as the base for REM calculations.

How do I change the base font size?

You can change the base font size in CSS by setting `html { font-size: ... }`. For example, setting it to 62.5% makes 1rem equal to 10px (16px * 0.625), simplifying calculations.

What is a PT (point) unit used for?

Points (pt) are primarily used in print media. 1 pt is equal to 1/72 of an inch. In web CSS, 1pt is approximately 1.33px (assuming 96 DPI).

Is percentage (%) the same as EM?

In many contexts, yes. `font-size: 200%` and `font-size: 2em` usually have the same effect. However, EM is a unit of length, while percentage is a ratio relative to the parent.

How do I calculate EM for nested elements?

EMs compound. If a parent has `font-size: 2em` and a child has `font-size: 2em`, the child is 4 times the size of the grandparent (2 * 2 = 4).

Should I use REM for margins and padding?

Yes, using REM for spacing (margins, padding) ensures that the whitespace scales proportionally with the text size, maintaining the design's vertical rhythm.

What is the Viewport Width (vw) unit?

VW is relative to the width of the viewport (window). 1vw is 1% of the window width. It is useful for responsive typography that scales with the screen width.

Background & Theory

Every conversion this tool performs is a single division: rem equals the pixel value divided by the root font size, which browsers default to 16px. A 24px heading is therefore 1.5rem, and 14px body copy is 0.875rem. The em column shows the same number because em and rem differ only in what they measure against, not in how the arithmetic works: rem always resolves against the font-size on the html element, while em resolves against the computed font-size of the element's own parent, so nested em values compound and nested rem values do not. The percentage column is that same ratio expressed on a base of 100, which is why 1.5rem and 150% produce identical type sizes. The points column uses a different constant entirely: CSS defines 1in as 96px and 1pt as 1/72in, so 1px equals exactly 0.75pt regardless of the root size you choose. The reason this division matters is accessibility rather than convenience. A reader who raises the default text size in browser settings changes the value of the root font size, and every rem-based dimension on the page, including margins, padding and container widths, rescales with it. Pixel dimensions ignore that preference entirely and can leave enlarged text overflowing fixed boxes. The common 62.5% trick, setting html font-size to 62.5% so that 1rem equals 10px, makes mental arithmetic trivial but resets the reader's chosen base and is generally discouraged. A safer habit is to keep the root at its default and let this converter handle the division.

History

The measurement of type has a long history dating back to traditional typesetting. The "point" (pt) was the standard unit in printing, defined as 1/72 of an inch. When digital screens emerged, the "pixel" (px) became the logical unit, representing a single dot of light on the screen. However, as screens diversified in size and density (Retina/HiDPI), the physical size of a "pixel" ceased to be constant. CSS introduced the "em" unit, based on the width of the capital letter "M" in the current font, to allow for scalable designs. However, "em" had a flaw: compounding. Nested elements multiplied their sizes, leading to complex math and layout breakages. To solve this, CSS3 introduced the "rem" (Root EM) unit around 2011. REM is always relative to the root html element, providing the scalability of EM without the compounding headache. It quickly became the standard for responsive web design.

Pixel Converter