Pixel to REM Converter
Convert Pixel to REM (px to rem) or REM to Pixel (rem to px)
Base font size :
Enter either Pixel or REM and get the equivalent value automatically
Pixel to Rem and Em, Em and Rem to Pixel
How much is 1 px to rem / em (px to rem)
1 px = 0.06 rem / em
1 rem = 16 px
How much is 1 rem to px (em to px)
1 px = 0.06 em / rem
1 em = 15.940226008217 px
Formula for Em to Rem and Rem to Em
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.
- An image or any display on a digital device such as Laptop Monitor, TV comprises 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
Comparison between Rem and Pixel
- Pixel values are more predictable. Rem values are relative to the root font size, which can be changed by the user or by media queries. This can make it difficult to predict the exact size of an element that is using rem values. Pixel values, on the other hand, are always the same size, regardless of the root
- Pixel values are more precise. Rem values are rounded to the nearest pixel, which can lead to slight inconsistencies in the size of elements. Pixel values, on the other hand, are precise to the subpixel level.
- Pixel values are more widely supported. Rem values are not supported by all browsers, especially older browsers.
- It is important to note that the advantages of pixel values over rem values are relatively minor . In most cases, rem values are a better choice for creating responsive and accessible layouts. However, there are some specific situations where pixel values may be preferable.
- Setting the size of images. It is important to set the size of images in pixels to ensure that they are displayed correctly on all devices.
- Setting the size of borders and margins. It is important to set the size of borders and margins in pixels to ensure that they are consistent across all browsers.
- Positioning elements on the page. It is important to position elements on the page in pixels to ensure that they are displayed correctly on all devices.
- Rem units are responsive to font size changes. This means that if you change the font size of the root element, all rem units will be updated accordingly. This makes rem units a good choice for elements that should scale with the user's font size, such as text and buttons.
- Rem units are more semantic than pixel units. Pixel units are absolute measurements, while rem units are relative to the root element. This makes rem units more semantic and easier to understand.
- Rem units can help to improve accessibility. By using rem units, you can make sure that your website or app is accessible to users with different screen sizes and font preferences.
- Here is an example of how you can use rem units to make your website more responsive:
html {
font-size: 16px;
}
h1 {
font-size: 2rem;
}
p {
font-size: 1rem;
}
Comparison between Rem and EM
- Em units are relative to the font size of the nearest parent element. This means that if an element has a font size of 16px and its parent element has a font size of 24px, the em unit will be equal to 24px. If the parent element has a font size of 12px, the em unit will be equal to 12px.
- Rem units are relative to the font size of the root element, which is the html element. This means that if an element has a font size of 16px and the root element has a font size of 16px, the rem unit will be equal to 16px. If the root element has a font size of 24px, the rem unit will also be equal to 24px.
- For global values, such as font sizes, margins, and padding, especially if you want to specify a font size for the entire document and have it scale uniformly rather than being influenced by the font sizes of parent elements.
- For values that should scale proportionally to the font size of the root element, such as font sizes of headings and body text.
- For values that should be consistent across different devices and browsers, regardless of the user's font size settings.
- For values that should scale proportionally to the font size of a specific element, such as the font size of a button or a list item.
- For values that should be inherited from the parent element, such as the line-height of a paragraph.
- For values that should be different for different elements, depending on their font size.
When to use rem:
When to use em:
Here are some examples of how to use rem and em units:
/* Use rem units for global values */
html {
font-size: 16px;
}
body {
font-size: 1rem;
margin: 0;
padding: 0;
}
/* Use em units for values that should scale proportionally to the font size of a specific element */
h1 {
font-size: 2em;
}
p {
line-height: 1.5em;
}
/* Use em units for values that should be inherited from the parent element */
li {
font-size: 1em;
}
/* Use em units for values that should be different for different elements, depending on their font size */
small {
font-size: 0.8em;
}
large {
font-size: 1.2em;
}
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 | 1920s px |
Rem Em Px Usage Examples
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;
}
}
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.
