pixel-rem icon

Pixel to REM Converter

Convert Pixel to REM (px to rem) or REM to Pixel (rem to px)

Home Converter

Pixel - Rem Converter

Enter either Pixel or REM or EM for different base font size values and get the equivalent value automatically

Base font size :


Formula to convert Pixel to Rem and Em

Conversion Icon

How much is 1 px to rem?

1 px = 0.06 rem = 0.06 em

1 rem = 16 px

How much is 1 rem to px

1 px = 0.06 rem

1 rem = 15.940226008217 px

Formula for Em to Rem

1 em = 0.99626412551359 rem

1 rem = 1.0037498835808 em

What is a Pixel?

faq icon
Pixel stands for 'Picture Element'.
Device Pixel
  • A 'Device Pixel' or hardware pixel is the smallest unit that represents a dot of light in a digital display.
  • Any digital device such as Laptop Monitor or TV have dispay containing millions of pixels.
  • A resolution is the number of pixels displayed in an inch or cm.
CSS Pixel
  • The Pixel we refer to on this page is the 'CSS Pixel'.
  • This is an absolute unit that is used in css for specifying length such as in width, height, margin, padding, font-size and represented as 'px'.
  • A css pixel is equal to 1/96th of an inch
  • How the css pixel renders on a device pixel is determined by the device dpi (pixel per inch).
  • For eg, If the DPI is 96 for the display device, then the CSS Pixel to Device Pixel is 96/96 = 1.
  • If the Device DPI is 360, then device to css pixel ratio is 360/96 = 3.75

What is REM and EM?

faq icon
REM and EM are css units of measurement
  • REM stands for Root Element. it is a relative unit and scales according to the root element font size.
  • if base html font size is 12 px , then 1 rem is 12, 1.5 rem is 18 px, 2 rem is 24 px and so on..
  • Changing the base font size will change all the elements font size accordingly
  • EM stands for Element . It is also a relative css unit of measurement.
  • It takes the font size of the immediate parent element.
  • If base html font size is 12 px and parent element is 18 px, then 1 em is 18 px, 1.5 em is 24 px and 2 em is 36 px which is a multiple of immediate parent element's font size

When to use Px vs REM vs Em?

faq icon
  • In general, use REM as the default option so all UI elements change in proportion to root element. REM helps to create responsive and accessible web pages. As next step, use px or em based on the specific use case.
  • Use px for image height and width or when you want a fixed dimension for an element irrespective of device resolution like in root base font size, borders, margins. Use pixel for any absolute positioning of elements.
  • EM is very useful in few specific cases where child elements have to change with respect to parent. Padding, line height, margins in carousels, menu, side bars, stacked cards which have to scale up or down based on the immediate parent.

Usage of Px, REM and EM

Pixel-rem Usage Icon

We are going to see the usage and effect of px, rem and em in this example.

1. Set Base Root Element font size to 48px.
2. If nothing is set, it will take the browser's font size (16 px by default)





font-size: 1.7rem;






font-size: 0.65rem;



font-size: 1rem;



font-size:1.2 em;

padding:0.1 em;

text-indent:0.5 em;


<h1>Discover the importance of Font sizes and Styles.</h1>

<h3>Factors affecting legibility of text</h3>

<ol style="text-align:left;">


<p>size is an important factor of readability.while too small letters are not legible, too big make the eye lose the over view of the text and do not let us read in chunks </p>

<li>Background and foreground color</li>

<p>The color in which the text is written in / on.</p>


<p>Also known as typeface and font</p>




<p class="child-em">refers to the amount of added space in between lines of types</p>



<p class="child-em">usage of em here and how it takes 1.2 times the font size of parent which is li in this case</p>




3. Refer example html snippet with h1, p and ol tags are configured as rem which is rendered with respect to the base html font size.
4. h1 = 1.7 * 48 = 81.6px,
p= 0.65 * 48 = 31.2px,
li = 1.0 * 48 = 48px
5. h1, p, ol, li will change relative to the root element html font size. If the base font size is changed based on the device resolution, they will change accordingly
6. h3 is in absolute units of px and so its font size will remain same irrespective of the device or resolution
7. the p tag under li is using 'em' here. It will change relative to the font size of the parent element which is the li. Important to note that li itself is relative to base font size.
8. Use em for text-indent, margins and padding to be set with respect to parent. It is useful in cases where you need margins, padding to adjust itself as per parent's font size and making sure view is not cramped
9. Use absolute unit 'px' if you want the sizing to remain same across resolutions .
10.Use rem if you want to control the rendering based on resolution and by changing at base level.

@media only screen and (min-width:768px) and (max-width:999px) {
		html {
			font-size: 24px;

@media only screen and (min-width:320px) and (max-width:767px) {
		html {
			font-size: 10px;

Pixel to REM Conversion Table

Conversion Table Icon
Pixel (px)remem%
6 px 0.375 rem 0.375 em 37.5 %
7 px 0.438 rem 0.438 em 43.8 %
8 px 0.500 rem 0.500 em 50.0 %
9 px 0.563 rem 0.563 em 56.3 %
10 px 0.625 rem 0.625 em 62.5 %
11 px 0.688 rem 0.688 em 68.8 %
12 px 0.750 rem 0.750 em 75.0 %
13 px 0.813 rem 0.813 em 81.3 %
14 px 0.875 rem 0.875 em 87.5 %
15 px 0.938 rem 0.938 em 93.8 %
16 px 1.000 rem 1.000 em 100.0 %
17 px 1.063 rem 1.063 em 106.3 %
18 px 1.125 rem 1.125 em 112.5 %
19 px 1.188 rem 1.188 em 118.8 %
20 px 1.250 rem 1.250 em 125.0 %
21 px 1.313 rem 1.313 em 131.3 %
22 px 1.375 rem 1.375 em 137.5 %
23 px 1.438 rem 1.438 em 143.8 %
24 px 1.500 rem 1.500 em 150.0 %
25 px 1.5625 rem 1.5625 em 156.25 %
26 px 1.625 rem 1.625 em 162.5 %
28 px 1.75 rem 1.75 em 175 %
30 px 1.875 rem 1.875 em 187.5 %
32 px 2 rem 2 em 200 %
34 px 2.125 rem 2.125 em 212.5 %
36 px 2.25 rem 2.25 em 225 %
38 px 2.375 rem 2.375 em 237.5 %
39 px 2.4375 rem 2.4375 em 243.75 %
40 px 2.5 rem 2.5 em 250 %

Rem to Pixels Conversion Table

Conversion Table Icon
Rem (rem) Pixels (px)
0.1 rem 1.6 px
0.2 rem 3.2 px
0.25 rem 4 px
0.5 rem 8 px
1 rem 16 px
2 rem 32 px
3 rem 48 px
4 rem 64 px
5 rem 80 px
6 rem 96 px
8 rem 128 px
10 rem 160 px
12 rem 192 px
16 rem 256 px
20 rem 320 px
24 rem 384 px
40 rem 640 px
48 rem 768 px
80 rem 1280 px
84 rem 1344 px
100 rem 1600 px
120 rem 1920 px

Frequently Asked Questions on Px em rem

FAQ Icon

  • Pixel (px) is an absolute unit representing a css length / font size.
    It is equal to 1/96th of 1 inch or we can say 96px = 1 inch.
    Rem and Em are relative units and they scale relative to the font size of root element (for rem) or the font size of parent element (em).

  • rem stands for Root Element's font size.
    If html root element font size is 16 px, then 2 rem means it is 32 px (16 * 2).
    em stands for parent elements font size and affects the element where it's used on.
    If parent element is 24px, then 0.5 em is 12 px (24 * 0.5) .
    The parent element if it does not have a direct setting takes it from its parent.

  • It is the root html / body font size.
    The browser usually defaults it to 16 px if none specified.
    User can change these settings in their respective devices.
    However if font-size is set on the root html, that overrides the browser settings.

  • Use px (pixel) for consistent sizing.
    If you want the sizing to appear same consistently across devices, then go with pixel.
    If you want the font size to be scalable and responsive depending on the device, then use rem or em.
    Use rem over em.
    In most cases rem will be sufficient for scalable font sizing.
    Rem is more predictable as it is with respect to root element.
    Use em within sections of the page to achieve scalable padding, margins, line height with respect to the parent and ancestors.
    For eg, within carousels, menu, side bars, stacked cards etc...

  • A css pixel is a reference unit and always maps to 1/96th of an inch.
    It is not actual device pixel.
    DPPI is Device Pixel Per inch.
    It represents no of pixels contained within 1 inch of an image.
    DPI is Dots per Inch.
    It represents no of printed dots contained within 1 inch on a printed paper.
    In a 110 dpi device, a 96 px long css unit will translate to 96/110 (0.87) physical inch.