Pixel to REM Converter
Convert Pixel to REM (px to rem) or REM to Pixel (rem to px)
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
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?
- 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.
- 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?
- 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?
- 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
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)
html{
font-size:48px;
}
h1{
font-size: 1.7rem;
}
h3{
font-size:60px;
}
p{
font-size: 0.65rem;
}
li{
font-size: 1rem;
}
.child-em{
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;">
<li>Size</li>
<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>
<li>Style</li>
<p>Also known as typeface and font</p>
<li>Leading</li>
<ol>
<li>
<p class="child-em">refers to the amount of added space in between lines of types</p>
</li>
<li>
<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>
</li>
</ol>
</ol>
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.
Summary:
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
| Pixel (px) | rem | em | % |
|---|---|---|---|
| 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
| 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
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.
