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

CSS CSS Basics (2014) The Box Model Display Values

Jesse Dispoto
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jesse Dispoto
Front End Web Development Techdegree Graduate 14,538 Points
Posted by Jesse Dispoto
.a{fill-rule:evenodd;}techdegree seal-36
Jesse Dispoto
Front 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?

3 Answers

Zack Jackson
Zack Jackson
30,220 Points
Zack Jackson
Zack Jackson
30,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.

Konrad Dziekonski
Konrad Dziekonski
7,798 Points
Konrad Dziekonski
Konrad Dziekonski
7,798 Points

Hi Zack,

How do you reset the base font from 16px to 10px?

Thanks

Zack Jackson
Zack Jackson
30,220 Points
Zack Jackson
Zack Jackson
30,220 Points

Konrad Dziekonski this comment was over a year ago. I use rem-calc now with the Browsers default base font.

Kirt Perez
Kirt Perez
7,374 Points

Another year later haha, is it still fine to use just rem seeing that you use rem-calc? Haven't learned rem-calc yet.

Zack Jackson
Zack Jackson
30,220 Points
Zack Jackson
Zack Jackson
30,220 Points

Kirt Perez rem is preferred for accessibility since it allows the browser to adjust with zoom for those that are hard of seeing. rem-calc is just a sass function that I stole from Foundation. I wouldn't recommend integrating the whole foundation framework just because of that, but you can take the function from line 26 here and add it to your code. https://github.com/foundation/foundation-sites/blob/develop/scss/util/_unit.scss

Of course you could just use rem as its the same thing as that rem-calc, you just have to do the math yourself without the function.

A lot of times you'll see people add font-size: 10px; on the body tag to make math easy. DO NOT do this.

Kirt Perez
Kirt Perez
7,374 Points

So you're debunking what you said in 2018?

Zack Jackson
Zack Jackson
30,220 Points
Zack Jackson
Zack Jackson
30,220 Points

Yes, rem is definitely the way to go for responsive, accessible projects. You will see quite a bit of base font resets to 10px, but I no longer do this. Professional situation that I ran into that caused my mindset shift was trying to use a shared components library. One site had a base font of 16px and one site had a base font of 10px. The component library used rem which resulted in one site looking different than the other.

Hope this helps.

Kirt Perez
Kirt Perez
7,374 Points

Thanks for sharing your insight!

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

HI Jesse,

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 em units, percentages, rem units, etc. Scaleable is always preferred over Absolute because of the many different sizes of viewports.

Hope that helps some. :) :dizzy:

reginabattle
reginabattle
16,646 Points
reginabattle
reginabattle
16,646 Points

Pixels are fixed values which isn't ideal for responsive development. Using em, rems, and percentages are best