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
Scott Peake
17,052 PointsUse of "em."
What are the benefits of using relative font sizes in your CSS? Are they more useful for mobile browsing? Are there disadvantages?
2 Answers
2btrzt9ior
15,232 PointsHi Dorsett,
Your guess is more or less correct. Ems are a good unit of measurement to use for anything that should size dynamically. One obvious situation is for text: consider, for example, a small laptop with particularly high resolution. The text on websites that sized with px units would be unreadable, and the user would have to zoom in the on the web page to see anything. Similarly, ems should be used to keep websites accessible for users with poor eyesight, as using absolute units may break site layouts when zoomed in on.
Another situation where relative units are good choices are margins and padding. Often you will want to set aside a certain amount of space that is relative to the size of the unit, and using px means that the space might be too large for a small element and too small for a large element. using ems or % ensures the margin/padding scales with the element.
It also follows DRY (don't repeat yourself) philosophy. Suppose you spend time carefully tweaking the layout of a site, but then your client decides, for some reason, they want the text to be a different size. If you used relative units in your layout, then changing the font-size in the body{} element is all that will be necessary. If you used absolute units, then you'll have to go back in and tweak the layout some more to preserve the spatial relationships in your site.
Those are just a few examples off the top of my head. I know of no disadvantages to using relative units for web documents, but don't forget about absolute units entirely. Use px for any element whose size you want to remain constant!
Hope this helps.
Scott Peake
17,052 PointsMy guess, and a very uneducated one at that, is that the use of "em" is more flexible for the wide variety of mobile screen sizes. Help!?!
Scott Peake
17,052 PointsScott Peake
17,052 PointsThanks! That's very informative. I am still really new at this and have a LOT to learn.
It's interesting that you mentioned how the scalability (?) benefits people with visual impairments. I am deeply involved in the IDD (intellectually and developmentally disabled) community, and I am truly interested in seeing how my learned skills can be applied to benefit these good people.
Thanks again!
2btrzt9ior
15,232 Points2btrzt9ior
15,232 PointsYou're very welcome! Learning web design is like learning anything else - immerse yourself in it, work at it every day, and you'll be surprised how quickly you pick things up! Best of luck to you, and remember to never stop learning!