When to Use em and ex in CSS

In CSS, em represents the width of a lower-case letter “m”, whereas ex represents the height of a lower-case letter “x”.

In typography, this is the height of the “mean line”.

So I use em whenever I’m working in width, especially for things like overall width of the layout, as it means the design will scale proportionally, keeping line lengths the same.

You can also safely use em to change the relative size of type. For example, to make text 30% larger, you can use font-size:130%; or font-size:1.3em;

I use ex whenever I’m working in height (and don’t want to use absolute pixels). I find ex particularly appropriate when setting line-height (which I prefer to make slightly bigger than browser defaults).

10 Comments Leave a comment

  1. Pingback: How to Author a Super Accessible Website

  2. Pingback: How to Author a Super Accessible Website | Free Web Design Tucson

  3. Pingback: How to Author a Super Accessible Website | WP Plates! | Wordpress Themes

  4. Dzianis says:

    thanks, will try to do the same way

  5. I♥code says:

    To avoid having to use JavaScript and to speed up load time, I often create collapsible menus using a hover effect.

    I’ll specify a height of, say, 1.3em for a div, then use :hover to change the div to a height of 100%.

    This article is great as a general rule of thumb, but occasionally exceptions can be made.

  6. Tim says:

    as soon as you work with Javascript or include elements into each other, em will create an absolute mess.
    Don’t use it for the layout. Use it for typography, headlines and paragraphes. But complex HTML structures with javascript for heave applications will get destroyed if you use em for width/height/padding/margin.

  7. GT Herangi says:

    I’ve always considered heights a free-for-all in terms of the type of measurements I use, mostly because the vertical scroll bar isn’t an issue like a vertical one is in the case that things happen to get pushed beyond 100%. Many people don’t see text as a measurement but something that flows to fit the page but as I analyse the way I work more and more specifically I find myself spiralling towards text as being of fundamental importance. Text is positive space measured in em and ex, IMHO measure the space around it in the same way.

  8. Saad says:

    Good article, I read several books referring to em as height of the font, whereas it’s the width of the letter m, and worst the wrong information is getting replicated, author to author and eventually to the readers.