Em's or Px's when it comes to font-size?

Hi Mike,

it can be a little confusing and even I haven't quite fully found the best solution for responsive web design.

I don't want to confuse you too much as I'm guessing you're just starting out but I actually use REMS.

To learn more try this course out some time:

https://teamtreehouse.com/library/web-typography#basic-web-typography

Ok so we have px, ems and rems.

if we set our h1 to this:

h1 { font-size: 30px; }

This means that all our h1s will have a font-size of 30px. It will always remain at 30px.

The problem with using px is if you do this:

h1 { font-size: 30px; }

.featured-header {font-size: 26px;}

.home-header { font-size: 32px; }

And start sending loads of different elements to pixel values then when you view it on a mobile device then the font still has the same size as at a desktop screen. If you set 32px it applies to all screen sizes.

The reason this is a problem is because imagine some of your headers are too big at mobile devices, you have to go through each element changing the pixel sizes to lower values. It would be a nightmare.

Then there's ems:

If we do this now:

body { font-size: 1em; }

then change our h1s to this:

h1 { font-size: 2em; }

our h1 will now look at the body font-size which is 1em and say ok I want 2rem so I want twice that much.

1em is = 16px by default so 2em will be 32px. Our h1 is now 32px.

Now let's look at the previous example I wrote in the pixels explanation.

h1 { font-size: 2em; }

.featured-header {font-size: 1.5em;}

.home-header { font-size: 1.8em; }

Now if at mobile we think the headers are too big we can simply do this:

@media (max-width: 480px) {

body { font-size: .8em; }

}

And all our font-sizes will scale down relatively, because we set them as ems.

The problem with ems is that they are based off the parent.

So imagine we now have a list like this:

<ul class="list-container">
    <li>list 1</li>   
    <li>list 2</li>  
    <li>list 3</li>   
    <li>list 4</li>
</ul>

If we our ul .list-container is this:

.list-container { 
font-size: .8em;
}

Our .list-container is now .8em which means it looks at the body font-size of 1em and is .8em of that 1em.

This is fine.

But the problem is when we give a font-size to the list items of that .list-container like this:

.list-container li { 
font-size: .8em;
}

If you read above I said ems is based off the parent.

So if we give the list items a font-size of .8em then it is based off the PARENT. The parent for the list items in this example is .list-container which now means our font size .8em but not .8em of the body, but .8em of the .list-container which is .8em of the body.

All very confusing I know :)

This is where REMs becomes a better option of EMs.

REMS isn't based off the parent, but off the root element which is the HTML element.

so now if you did the same thing but used REMs instead of EMs then those list items wouldn't scale down based off the parent which was .list-container, but off the root which is the HTML element.

I won't go any further because you're probably confused by now haha.

My advice would be to check out the typography course.

Any other questions then let me know :)

joe