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
Daniel Hildreth
16,170 PointsWhich is better: font size in px or em? Does one have a better consistency and fluency than the other?
I did the course "How To Make A Website" with Nick Pettit, and I believe he used "em" for font-size attributes rather than px like Guil is doing in the CSS Basics course. Is there much of a difference between the two? Does one have better consistency than the other? Is one of them more versatile when it comes to different web browsers and screen sizes?
8 Answers
Ariel Aronica
6,646 PointsThe “em” is a relative unit. If the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. They are easily scalable and are responsive in nature, making for a better choice for mobile-first. Pixels are fixed-size units. One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). They are unchanging. <br>
Percentage is another measurement you can look into using. <br>
Ian Kersey
9,318 PointsHi Daniel, Pixels are absolute units while ems are relative units. Ems are based on the browser's default font size and will scale accordingly while pixels are absolute and will always be treated as such. If a user decides to zoom in or resizes the browser, a font size based in ems would scale, where a size based in pixels would not. The relative nature of the em helps consistency across browsers and different screen sizes. Long story short, go with ems when defining font sizes. Check out the MDN documentation for a better explination. https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
Ian Kersey
9,318 PointsHere's a good one: http://pxtoem.com/
Ariel Aronica
6,646 Pointslol, beat me to it. :)
Daniel Hildreth
16,170 PointsOk, thank you all for your help! I did have one last question concerning what Ariel wrote though. Is there a way to find out, like a chart or something, to help visualize the ems when it comes to font size rather than playing around with different font sizes all day? I was never that great at math, and sitting there trying to figure out what font size I need (whether in ems, px, or %'s) seems a tad tedious and a lot of time consumption. Is there a visual for these different font sizes, and to see how it would look like on different screen sizes/resolutions?
Daniel Hildreth
16,170 PointsIan that is a good site to use to help convert the sizes. Does it give a visual of what it would look like say on a desktop or mobile device?
Ariel Aronica
6,646 PointsYou should actually take the Typography course- it discusses this topic thoroughly. <br> http://teamtreehouse.com/library/web-typography
Font-size for a page is typically not random- you want to have consistency throughout the page. I don't have the references on hand or the time to look them up right now, but they give some good ones in the course, and below is a good-looking one I just found. <br>
Ariel Aronica
6,646 PointsHere's another one... <br> http://spencermortensen.com/articles/typographic-scale/
Daniel Hildreth
16,170 PointsOk thank you Ariel, I'll have to take that course as well!
Ian Kersey
9,318 PointsI'm not sure about that, but since most browsers use 16px as their default font size you can think of 1em as 16px. I usually just adjust the sizes in CSS, preview and see what looks good on the page.
Ian Kersey
9,318 PointsYou could check out http://www.viewlike.us/ This tool helps you see what your site looks like in different browsers and on some mobile devices. This is usually used for cross-browser testing but could help you out to get a feel for what things look like on different screen sizes.
Daniel Hildreth
16,170 PointsOk thank you!
Daniel Hildreth
16,170 PointsDaniel Hildreth
16,170 PointsOk thank you!