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!
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
Jesse DispotoFront End Web Development Techdegree Graduate 14,538 Points
When should we use em vs. pixels? I am so used to using pixels in the past, it's confusing when to use em.
When should one using em vs pixels? Are there certain elements that a web designer should typically use em for instead of pixels when defining size?
Zack Jackson30,220 Points
I use rem and percentages for my projects. I reset the base font from 16px to 10px first and foremost so that all rem calculations are base 10. Just makes the math easier. The only time I would use px is with raster images or with very small features such as a 1px border or a 3px border-radius for example. Those two examples are so small that they won't break the content on different sized screens and it really isn't necessary to calculate rem for stuff that small.
Do yourself a favor and use rem with a base 10 for your projects going forward and if you ever want to make them responsive down the road, it will be much, much easier to do so.
Another reason is because 1px on an old CRT monitor does not equal 1px on an modern monitor which does not equal 1px on an Apple retina display. It's a finite value but the actual size of a pixel varies by manufacturer. If you use pixels, your website/web app will not look the same across different devices.
Jason AndersTreehouse Moderator 145,855 Points
I don't do much front-end design, but the biggest difference is scaleability. Pixels are absolute values and will not change with the size of a viewport.
em units are scaleable and will adjust based on the viewport.
To answer your question fully goes a bit beyond the scope of the Community, and as you progress through your track, your will see more clear reasonings and examples. Over time, you will see that much of the design is done using
rem units, etc. Scaleable is always preferred over Absolute because of the many different sizes of viewports.
Hope that helps some. :)
Pixels are fixed values which isn't ideal for responsive development. Using em, rems, and percentages are best