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
mrx3
8,742 Pointsquestion about using em with font.
I was reading a website about fonts such as px,pt,and em. While reading they stated that all font should have em applied to it instead of px. I'm going to be starting the font section of ccs deep dive soon. I was wondering if it's true about using only em for fonts in css?
5 Answers
Daniel Schmid
15,466 PointsIt depends on how you want your fonts to act. using em's means that it is relative to the parent element and so is more flexible. where as px etc are a set size no matter what any other values are set as on the page. I would say it is personal choice.
Hope that helps
Jason Massey
16,635 PointsEm units are a relative font size where 1em is equivalent to the document's default font size. So for example if the document's default font size is 12pt, then 12pt = 1em, 1.5em = 18pt, etc.
You can use other font measurements, but ems are becoming more favored due the fact that it is scalable and mobile friendly.
Adrian Melendez
5,555 PointsPixels and Points are fixed values. 12px is always going to be the same number of pixels.
Ems are relative values that change based on the font being used and what size that font already is.
By by default, fonts are set to 1em but that size could be different depending on the font. If a font size is normally 16px, setting the size to 2em will make it 32px. If a font is normally 12px, setting the size to 2em will make it 24px. Setting the px size just makes the font that size.
Ems are good when you need to change the size of boxes and other elements. For example, if you have a box that you want to be the same height as three lines of text, you'd set the height to be 3em and it would always be three lines of text tall regardless of how big the font on this inside is. If you set the size by pixels instead of ems, you might end up making the box too big or small.
James Barnett
39,199 PointsIt's not terribly complicated.
There are 2 kinds of units in CSS, absolute and relative:
-
pt&pxare absolute -
%andemare relative
In the beginning there was fixed width design, we used px for that, then came responsive design we use % sizing boxes and em for sizing fonts.
You won't really be using pt much as that's traditionally been used for things that will be printed out.
The various units are covered in the values and units badge of the CSS Foundations course and the using ems for responsive typography is covered specifically in the Responsive Text and Vertical Rhythm video.
mrx3
8,742 PointsThanks for the help everyone I really appreciate. I'm kind of nervous I hope I can remember all this :)
mrx3
8,742 Pointsmrx3
8,742 PointsThanks Daniel I do understand that em is more flexible then a pxs. I recently made my first web-page and right now it's in pixels. I'm going to wait on doing anymore until I learn more about ems because, I want to make sure the site is done right. Gil talked very briefly about ems in the last couple of vids I watched. I notice that the next section of my track is all about fonts so, hopefully Gil will go into more detail about ems