Difference Between Pixels, Rems and Ems
What is the definition of pixels?
A minute area of illumination on a display screen, one of many from which an image is composed.
Pixels in the past have been the most common form of measurement used in design. The size of a pixel will vary on the physical screen size and the resolution of the screen.
What does resolution mean?
The degree of detail visible in a photographic, digital or printed image.
As you can see from the above we have 4 of the same graphic with the only difference being the resolution. In the final image we can barely make out the image and the reason is because the resolution is too low which affects the visible details as stated in the definition.
The pixel size under a low resolution will appear larger and less detailed.
The pixel size under a higher resolution will appear smaller with more detail.
What are Ems?
Ems are a relative measure of length. The size of an em is relative to the font-size of its parent element.
If you have a box on a webpage with the contents of the box set to a font size of 16px, and a box inside of that with a font-size set to 2em, the font-size of text of the inner box set to ems will be 32px; set it to 0.5px, and the font-size will be 8px.
As you might imagine, this is great for responsive design, where you can set breakpoints for device screen sizes with media queries, change the absolute px measure for elements at different break points, and have all the em-measured elements resize for you — it makes responsive CSS much easier to write and maintain.
What are Rems?
Rems, root ems, are always relative to the font-size of the <html> element. It doesn’t matter how deeply nested an element is, its rem lengths will always be a proportion of the font-size of <html>.
Ems has a bit of a problem. Because everything is sized relative to its parent element, the meaning of an em changes as elements are nested.
A box defined with a font-size of 22px containing another box nested inside of it (green) with an font-size of 0.5em will make text that is 11px. If we add another nested box inside of the green box and we also set that to ems, the size will be now half of a half or 5.5px which may not at all be what we want. That is where the newest measurement called the Rems come into play.
Since Rems are relative to the HTML element nesting elements inside of each of each other will not cause an inheritance from the prior element. So if I set my HTML element to 22px, regardless of how many nested items I have set to ems they will only be working with the 22px base set in the HTML element which removes concerns of trying to calculate how text will be affected with media query breakpoints.
What is my best practice?
A mixture of pixels, ems and rems.
When the Rem was released designers were quite pleased as they thought this would be the dream solution to easily fix all of their typology issues when rendering web pages on a variety of different sized devices with different resolutions. It was a little too good to be true because not long after the release designers realized that some of the text like headings were becoming far too large when being proportionately scaled with the Rem.
I like to apply the following practice in my work:
- Use pixels to define the HTML element font size.
- Use Rems to define the containers.
- Use Rems to define the heading tags <h1> etc.
- Use Ems inside the containers unless they nest.
Join the mailing list
