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) Understanding Values and Units Em Units

Posted by Brett Burky
Brett Burky
3,895 Points

The importance of em's and px's? Why and when would you use one over the other.

I would love to know this in detail. I get it that 1em is 16px ONLY because the body default is 16px. Is that the only thing that is always standard?

Also is there a real reasons to always use ems and just forget about px? Why would one use px if people use ems for scaling issues?

Any help would be great I know that is a weird question, just trying to wrap my head around it.

nik
nik
8,925 Points

The conversion of px to em is always standard. The base sizes (in px) are what's usually set in the main css. Normalize and other css frameworks usually have the base sizes set up. But if you are creating your own site from scratch without the use of framworks, you would want to set base sizes in px for your main elements and then use ems when creating your content.

It is always good to use ems to keep all you're fonts consistent sizes. That way if someone was viewing your site on a desktop, they wouldn't have issues trying to view from a tablet or mobile phone either.

It was confusing for me in the beginning also and I hope this helps.

2 Answers

jacobproffer
jacobproffer
24,604 Points

Hey Brett,

This is what I know.

The pixel is an absolute unit of measurement. It's typically used if you want something to be a specific size (Such as the width and height of an image). The downside to the pixel unit is that it will not scale according to the width of the browser. To put this in perspective, if you use pixels to size elements such as an H1 or a p element, the text will not adapt (scale) to changes in the browser size.

For a better understanding, I'd recommend Kyle Schaeffer's article on CSS font-sizes. The post explains in depth the differences between em, px, pt, and percentages.

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

Hope this helps somewhat,

Jacob

Olga Kireeva
Olga Kireeva
9,609 Points
Olga Kireeva
Olga Kireeva
9,609 Points

About standard. Most browsers have default values for headings. You can check it here http://www.w3schools.com/tags/tag_hn.asp . Ems & px. Pixels were used to size text in the early days of the web. It was reliable and consistent. Nowadays some web developers use a combination of % and pixels to overcome the compounding issues of em-based font-sizing (for example a list within a list). Additionally, the introduction of rems to css3 has become a great solution for the compounding em problem. I have also read that some mainstream web browsers include zooming, which increases the size of everything on the page. So, I think, even though ems are more suitable for present websites we shouldn't completely forget about pixels.