REM to PX Converter - Convert REM Units to Pixels
Convert REM to pixels instantly online. Use the default root font-size of 16 pixels or set your own default.
REM to PX Conversion Table
| EM | REM | Pixel | Percent |
|---|---|---|---|
| 0.5em | 0.5rem | 8px | 50% |
| 0.5625em | 0.5625rem | 9px | 56.25% |
| 0.625em | 0.625rem | 10px | 62.5% |
| 0.6875em | 0.6875rem | 11px | 68.75% |
| 0.75em | 0.75rem | 12px | 75% |
| 0.8125em | 0.8125rem | 13px | 81.25% |
| 0.875em | 0.875rem | 14px | 87.5% |
| 0.9375em | 0.9375rem | 15px | 93.75% |
| 1em | 1rem | 16px | 100% |
| 1.0625em | 1.0625rem | 17px | 106.25% |
| 1.125em | 1.125rem | 18px | 112.5% |
| 1.1875em | 1.1875rem | 19px | 118.75% |
| 1.25em | 1.25rem | 20px | 125% |
| 1.3125em | 1.3125rem | 21px | 131.25% |
| 1.375em | 1.375rem | 22px | 137.5% |
| 1.4375em | 1.4375rem | 23px | 143.75% |
| 1.5em | 1.5rem | 24px | 150% |
| 1.5625em | 1.5625rem | 25px | 156.25% |
| 1.625em | 1.625rem | 26px | 162.5% |
| 1.6875em | 1.6875rem | 27px | 168.75% |
| 1.75em | 1.75rem | 28px | 175% |
| 1.8125em | 1.8125rem | 29px | 181.25% |
| 1.875em | 1.875rem | 30px | 187.5% |
| 1.9375em | 1.9375rem | 31px | 193.75% |
| 2em | 2rem | 32px | 200% |
| 2.0625em | 2.0625rem | 33px | 206.25% |
| 2.125em | 2.125rem | 34px | 212.5% |
| 2.1875em | 2.1875rem | 35px | 218.75% |
| 2.25em | 2.25rem | 36px | 225% |
| 2.3125em | 2.3125rem | 37px | 231.25% |
| 2.375em | 2.375rem | 38px | 237.5% |
| 2.4375em | 2.4375rem | 39px | 243.75% |
| 2.5em | 2.5rem | 40px | 250% |
| 2.5625em | 2.5625rem | 41px | 256.25% |
| 2.625em | 2.625rem | 42px | 262.5% |
| 2.6875em | 2.6875rem | 43px | 268.75% |
| 2.75em | 2.75rem | 44px | 275% |
| 2.8125em | 2.8125rem | 45px | 281.25% |
| 2.875em | 2.875rem | 46px | 287.5% |
| 2.9375em | 2.9375rem | 47px | 293.75% |
| 3em | 3rem | 48px | 300% |
By default, the REM to Pixel converter employs a root font-size of 16 pixels. However, users have the flexibility to define their own root font-size according to the specific requirements of their project. This customization ensures that the conversions are aligned with the project's styling guidelines.
The converter consists of four input fields representing different measurement units: EM, REM, pixels, and percent. As users input values into any of these fields, the converter instantaneously recalculates the corresponding values in the other fields.
Below the pixel input field, the converter incorporates two buttons with distinct functions:
- Set Root: This button allows users to manually set the root font size in pixels.
- Reset: The "Reset" button restores the root font size to the default of 16 pixels.
What is REM?
REM stands for "root em," and it's a unit of measurement used in web design and development. REM is a relative unit similar to the more commonly known "em" unit, which is based on the font-size of an element. However, the key difference is that REM is calculated based on the font-size of the root element (typically the <html> element), rather than the font-size of the element itself.
In other words, when you use the REM unit to define a property like font-size or margin, it's relative to the font-size of the root element. This is particularly useful for creating responsive designs that adapt to different screen sizes and devices.
Here's how REM works:
- Root Font-Size: The REM unit's value is determined by the font-size of the root element of the HTML document. This root font-size is typically defined in pixels (px) or other absolute units. In the absence of specific styling, the default font-size for most browsers is often around 16 pixels.
- Calculation: When you use REM units in your CSS, the value you set is multiplied by the font-size of the root element. For instance, if the root font-size is 16px and you set an element's font-size to 2rem, it will result in 32 pixels (2 * 16px).
- Scalability: The beauty of REM units lies in their scalability. As long as you maintain a consistent ratio with the root font-size, your design will adapt proportionally when the root font-size is adjusted. This makes it easier to create designs that respond well to changes in screen sizes and user preferences.
- Accessibility: REM units are also helpful for ensuring better accessibility. Users who increase or decrease the default font-size in their browsers will see a consistent scaling of your design elements when using REM units.
In summary, REM (root em) units provide a responsive and scalable way to size and space elements in web design. By basing their calculations on the root font-size, they offer a practical solution for achieving consistent and adaptable designs across various devices and viewport sizes.
What is PX?
PX (Pixels) is a unit of measurement commonly used in digital design and web development to define the size, spacing, and layout of elements on a screen. Pixels are the smallest individual units that make up a digital display, such as a computer monitor, smartphone screen, or tablet display. Each pixel represents a single point of light on the screen and is the basic building block of digital images and text.
Here's how pixels work:
- Basic Unit: A pixel is a square element that can emit light of different colors to form images and text on a screen. The resolution of a screen is often described in terms of the number of pixels it can display horizontally and vertically (e.g., 1920x1080 pixels).
- Absolute Size: Unlike relative units like "em" or "rem," which depend on the font-size of elements, pixels are an absolute unit of measurement. This means that 1 pixel always represents the same physical size, regardless of the context or the device being used.
- Fixed vs. Responsive Design: Using pixels allows designers to create fixed layouts where elements maintain their exact positions and sizes regardless of the user's screen size or device. However, this approach might not always be ideal for responsive design, which aims to adapt layouts to different screen sizes. For responsive designs, relative units like "em" or "rem" or percentage-based measurements are often preferred.
- Pixel Density: It's important to note that pixel density varies across different devices. High-resolution screens (such as Retina displays) can pack more pixels into a smaller physical area, resulting in crisper and more detailed visuals.