Difference Between Px, Em and Ex

What is the difference between px, em and ex?

1. Pixels (px) are browser dependent. It is the absolute size that you would see on your screen.
2. Em are sort of like percentages. Ems is referring to the base text size. The value of 1 em means the same thing as a value of 100 percent. But you can also say it in the opposite way: A percentage value is just an em multiplied by 100.
3. Points(pt) are what you would want to use in print media.

Why em instead of px?

The reason I asked this question was that I forgot how to use em's as it was a while I was hacking happily in CSS. People didn't notice that I kept the question general as I wasn't talking about sizing fonts per se. I was more interested in how to define styles on any given block element on the page.

As Henrik Paul and others pointed out em is proportional to the font-size used in the element. It's a common practice to define sizes on block elements in px, however, sizing up fonts in browsers usually breaks this design. Resizing fonts is commonly done with the shortcut keys Ctrl++ or Ctrl+-. So a good practice is to use em's instead.

Using px to define the width

Here is an illustrating example. Say we have a div-tag that we want to turn into a stylish date box, we may have HTML-code that looks like this:

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

A simple implementation would defining the width of the date-box class in px:

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

The problem

However, if we want to size the text up in our browser the design will break. The text will also bleed outside the box which is almost the same what happens with SO's design as flodin points out. This is because the box will remain the same size in width as it is locked to 50px.

Using em instead

A smarter way is to define the width in ems instead:

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

That way you have a fluid design on the date-box, i.e. the box will size up together with the text in proportion to the font-size defined for the date-box. In this example, the font-size is defined in * as 10pt and will size up 2.5 times to that font size. So when you're sizing the fonts in the browser, the box will have 2.5 times the size of that font-size.

What are the differences between these web units?

px stands for pixels. Exactly what it says on the tin: each dot on your screen is a pixel.

ex refers to the x-height of the given font, i.e. the height of the lowercase letter x for that font.

em refers to the maximum height required by a font. It is a commonly-used relative font size because it is calculated based on the computed font size of an element (or its parent if inherited).

pt stands for typographic point, which is 1/72 of an inch.

% is the percentage relative to a given property otherwise inherited from an element's parent.

Note that em and % work the same way. Ems are something like the decimal representation of percentages, i.e. 1 = 100%, 0.01 = 1%.

You can find more units at the CSS3 spec.

When to use %, px, em, etc...?

Using percentages to have a layout work in different size viewports is a very advanced technique, and is often done dynamically using javascript. Until you are more familiar with CSS, and can look at working percentage based layouts and understand enough to replicate it, you are better sticking to PX.

If you are going the javascript route it is really quite simple. For a start use jQuery as it makes resizing your layout a breeze compared to trying to do it with native javascript. Then $(window).height(); gives you the height of the viewport; $(window).width(); gives you the width. You set a default px width for your container, and then use percentages for all other block level elements (containers, within the container, sidebar, main etc) and do this:

function percentagize() {
var height = $(window).height()-100;
var width = $(window).width()-20;
$("div#container").css({
'height' : height+'px',
'width' : width+'px',
'margin': '0 auto'
});
}

$(document).ready(function() {
percentagize();
$(window).bind('resize','percentagize');
})

when to use % or em or ex with css font?

It's really up to you. For usability's sake, stick with em or % as px is a fixed value and won't scale (or shouldn't that is) on different devices. Set your base font-size first on the body (67% is a popular one) and then use em's to modify that size to your liking.

---

To pluck the answer from the web:

1. “Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, 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. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
2. Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
3. Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
4. Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

-- Source --

I'd highly recommend reading this article, it explains the whole thing in detail with diagrams :)

Font size in CSS - % or em?

There's a really good article on web typography on A List Apart.

Their conclusion:

Sizing text and line-height in ems,
with a percentage specified on the
body (and an optional caveat for
Safari 2), was shown to provide
accurate, resizable text across all
browsers in common use today. This is
a technique you can put in your kit
bag and use as a best practice for
sizing text in CSS that satisfies both
designers and readers.

Use of rem, em and px on image dimensions

• px renders the pixel value
• rem uses the root element (html) using its font-size as the base (16px by default) to calculate its size, so basically your rem value from img multiplied by the font-size on html
• em uses the first parent with a font-size to calculate the size it needs to render (calculated the same as rem above - parent computed px value multiplied by your em). If a that parent is using em in its font-size, the child will use the computed/calculated font-size of the parent.

Explanation can be tough to grasp (especially em), have a look here: https://jsfiddle.net/6ydf931w/

For the most part, I tend to avoid using em for almost everything because it can result in unexpected results if you are not permanently aware of where it is used.

I usually limit rem to text in the event it needs to be changed globally.

px is very predictable, if this works for you, there is no harm in using it.

---

Related Topics