Em vs Percents

Why use em and percents


If you have ever used or tried responsive web design (RWD) you probably already know the answer but for those of you that haven’t it is pretty simple. We use em and percents (%) because they are relative values unlike pixels, which are explicit. That means if you make your browser window smaller and you had set the width of a div to 50%, it will always have a width half of the screen size. Compared to if you set the same div to a width of 500px it will always be 500px. If you made the browser window smaller then 500px you will get a horizontal scroll bar in your browser. Which is one of the things you are trying to avoid in RWD.

How do decide which to use


Knowing which relative value to use or if you should use one at all in your css can be tricky and offen comes down to trial and error. I have found that some css properties should use one or the other. It is important to note that this may not be true in every circumstance as every website is different.

Em


Em are best for setting different font properties. These are line-height, font-size but are also used for top/bottom padding and margin.

What is an em?

An em is a typographic term that is derived from the width of the capital “M” in the given typeface. In a web browser, an em is first set by the browsers font size setting. After that if you change the value of the em, then that becomes the new default.

Example

The default font size is equal to 16px in your website. Therefore 1em = 16px, 2em = 32px, etc. However inside of your article you set the font size to 1.25em, now making 1em = 20px, 2em = 40px, etc. This is because when you change the value of the em it redefines what 1em is equal to inside of that element. In this example this applies to article tag and all it children. If you set the font size of another element inside of your article the font size is calculated the same way but instead you start with 1em = 20px instead of 1em = 16px. Though outside of the article 1em = 16px until you change the font size on that element.

Font

This should not be a surprise to most since em are a typographic term and the font property deals with text. You may be thinking I can just use a px value, why should I use an em instead. Why you should is since an em is a relative value, it will scale based on what the user has the browser set to. One of the main reason to use em over pixels there are so many different devices with varying pixel densities you can’t be sure what 16px really is. On a high pixel densities screen (such as an iPhone 5) 16px is much smaller then on a low pixel densities screen (such as an iPhone 4).

Top/Bottom Padding and Margin

This one may be more of a surprise to you as we set the left/right padding and margin values with percents, why not the top and bottom too. When you use percents for these, at a small viewport you will have less margin or padding but as you scale the window up there will be much more then at the smaller size. Which in most cases you do not want. You generally want the padding and margin to be the same on the top and bottom. Which is why you use em.

Percents


Percents work best when setting width, left/right padding and margin

Width

In RWD you will want as much control as posible over the widths of elements and not depended on the user default font size, so using percents is the best choice here.

Left/Right Padding and Margin

You want to use percentages here for the same reasons as for widths. You need to have as much control as possible over the size or it will break your layout.

Example using percents and em


div {
    width: 90%;
    padding: 1em 5%;
    font-size: 1em;
    line-height: 1.25em; 
}

Again more of a guide


Don’t forget that every situation is different and while one way might be best for one site it might not be for another.

Leave Your Feedback

Name is required.
Email is required.
URL is required.
Message is required.