PX to EM & REM converter
Convert pixels into EM and REM at the same time. Use hotkeys and conversion tables for convenience.
What are EM and REM Units?
EM and REM are CSS relative length units. They depend on the font size of the parent element and the root element, respectively.
- EM unit is relative to the
font-sizeof its parent in case of typography, but in case of non-typographic CSS properties it is relative to its ownfont-size. For example, if <p> hasfont-size: 2em;it means that its font size is twice the size of its parent's font size. But if this <p> also hasmargin-top: .5em;, it means that it's top margin is half the size of its own font size. This can be confusing, so I suggest rephrasing a bit and saying that the EM value is actually relative to the current font size. It doesn't matter if it's inherited or set in the current element. - REM unit is relative to the
font-sizeof root element (usually the <html>), no matter whether or not it has a different parent than the root. By default, the root font size is 16px. It can be changed in browser settings.
What are the Benefits of Using EM and REM Units?
- Scalable Typography: EM and REM units allow typography to scale proportionally with changes in font size, making designs adaptable to different devices and user preferences. If the user changes the font size in the browser, all the values in EM and REM will also change.
- Consistency: By setting font sizes and other dimensions in EM or REM units, designers can maintain consistency across the entire document, ensuring a cohesive visual experience.
EM and REM units offer powerful tools for creating scalable and flexible typography in CSS. By leveraging EM and REM units effectively, designers can achieve consistent and adaptable typography across various devices and screen sizes, enhancing the readability and usability of their websites and applications.
Where can EM and REM Units be Applied?
- Typography: Use EM and REM units to set font sizes, line heights, and spacing, providing flexibility and consistency in typography.
- Layout: Apply EM and REM units for defining layout dimensions such as margins, padding, and widths, ensuring responsiveness and adaptability.
What are Best Practices for EM and REM Units?
- Use REM for Global Sizing: Set global sizes such as body text and layout dimensions using REM units, providing a consistent baseline for typography and layout.
- Use EM for Local Sizing: Use EM units for local adjustments within components or sections, allowing them to scale relative to their parent element.
- Avoid Nesting: Avoid excessive nesting of EM units, as it can lead to compounding effects and unintended consequences for typography and layout.
Do all Browsers Support EM and REM Units?
Yes, EM and REM units are widely available across major browsers, including Chrome, Edge, Safari and Firefox.
Which Browsers Don't Support EM and REM Units?
Only severely outdated versions of browsers may have limited or no support for these units, for example:
- Safari 3.1-4 (18.03.2008 – 08.06.2009): REM unit is not supported
- Safari and other browsers on iOS 3.2 (03.04.2010): REM unit is not supported
- Safari and other browsers on iOS 5-5.1 (07.03.2012): REM unit has partial support
- Firefox 2-3.5 (24.10.2006 – 30.06.2009): REM unit is not supported
- Opera 10-11.5 (01.09.2009 – 28.06.2011): REM unit is not supported
- IE 6-8 (27.08.2001 – 19.03.2009): REM unit is not supported
- IE 9-10 (27.08.2001 – 19.03.2009): REM unit has partial support
While the vast majority of users are using modern browsers that support EM and REM units without issues, it's always a good idea to test your website or application across different browsers and versions, especially if you anticipate a significant portion of your audience using older or less common browsers. Additionally, providing fallbacks or alternative styling techniques for browsers with limited support can help ensure a consistent user experience across different environments.
Read more about EM and REM CSS units below:
