Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Raihan Khan
2,168 PointsWhat is the difference between rem, em and pixel
I see everyone use pixel, even most of the website develop by pixel. What is the main purpose of using em or rem. Why not use pixel on font size instead of using em or rem. I don't see any difference.
2 Answers
A.J. Kandy
Courses Plus Student 12,422 PointsIn effect there's no difference for the end-user. However, it saves a lot of time for the developer, and also, future-proofs the design.
Designing in pixels was fine between 1995 to 2006. We only had to deal with desktop browsers, and there weren't that many sizes of screens out there to cope with. Pixel density was roughly 72-96ppi. When you designed a page using a 960px grid framework, you could be assured it'd look the same across most people's computers.
Now we live in a world of literally hundreds, if not thousands, of different physical screen dimensions, and pixel density ranges from traditional 96ppi all the way up to so-called "Extra Extra Extra High Density" - 480 to 640 dots per inch - and there are screens coming out with double, even quadruple that measure, in the near future.
If you design using pixels, your design may or may not scale appropriately on these devices. Some devices and browsers apply a built-in scaling algorithm to this, where "16px" on a 1x screen scales to 64 physical pixels on a 4x display. But some don't. If you've ever used a computer with a 4K display set to 1:1 scaling, your site will look very very tiny.
If you're trying to make a responsive site - where do you set the breakpoints to scale the text or columns, when a small phone might have the same physical pixel width as an iPad Pro? You start generating a lot of edge cases very quickly.
This is where designing with proportions, based on so-called "unitless" measures, makes it a lot easier. Unitless measures don't map to physical pixels, but are based on proportional sizes.
- Viewport units divide the viewport into 100; "50vw" is 50% of the viewport width. It's always in relation to the actual viewport, similar to how rems always relate to a 'root em' definition.
- Percentages also work, but are relative to the parent container.
- CSS Grid introduces the "fr" fractional unit. For creating complex mixed-width column grids, it makes it much, much easier than a framework with dozens of class names for column layouts.
- You can use unitless measures in Flexbox contexts as well.
Ems and rems are a solution for typographic scaling - I think responsive web design started using it as a stopgap solution until unitless measures and Grid were standardized in browsers. That said, they are still useful to support older browsers (IE8, Opera Mini) and some varieties of IE that don't support full specs just yet.
So to answer your question, if a site is done well you shouldn't notice any difference if it's ems, rems, or pixels. But if you want to make sure your designs adapt to all screen sizes, even ones we don't know about yet, using proportions and unitless measures will save you a lot of refactoring down the road.
Darrell Osborne
23,146 PointsDepending on the way you structure your css, the rem and em units can make it easier to adjust all font-sizes with only one property because they depend on a base unit. For example, let's say you set your body font-size to be 16px (which I believe is the default), and then your h1 to be 2em. Your h1 would be 32px. Now at a smaller break point, if you change your body font-size to be 10px, your h1 at that point would be 20px without you having to make a change to the h1.
Darrell Osborne
23,146 PointsDarrell Osborne
23,146 PointsGreat answer! Very informative and thorough! Curious what measure you use for typographic scaling?
A.J. Kandy
Courses Plus Student 12,422 PointsA.J. Kandy
Courses Plus Student 12,422 PointsDarrell Osborne It depends on the framework / context. Lately I've been working on projects using Google's Material components, and those are built using rems and they have a defined set of breakpoints for small, medium, large and extra-large devices. I believe they simply let the browser figure it out; most have a default value of 1em=16px (including any scaling for pixel density); they don't seem to use a global reset.
Raihan Khan
2,168 PointsRaihan Khan
2,168 PointsSo basically you're saying I should use em all the time since most of the people in this generation are using different size of a screen. I am still confused here not sure what should I use.
A.J. Kandy
Courses Plus Student 12,422 PointsA.J. Kandy
Courses Plus Student 12,422 PointsRaihan, I would say if you have to pick one measurement, ems are a safe bet. Moving forward, you will want to move away from ems for everything, and keep them strictly for typographic scaling. You may even want to scale your type in alternate ways.
Here are a bunch of useful articles from CSS-Tricks about CSS Grid, Flexbox and viewport units:
CSS Grid
Flexbox
Viewport units
This is a good article that talks about the trade-offs of ems, rems and pixels, particularly because rounding errors in different browsers' rendering engines may falsely cause a design to trigger the wrong breakpoint:
Engage Interactive: Em vs Rem vs Px
That article references this article: PX, EM or REM Media Queries?
And this is a good snippet from Mike Riethmuller on creating fluid typography using viewport units, not ems:
Smashing Magazine: Fluid Typography
Basically, it's a lot more complex than it seems at first glance, so get a good grounding in the various techniques, and what browsers support them. What you must decide is what is the appropriate technique to use for your project / end users.