Make sure you don't miss the latest insights and tips. Click here to sign up for my mailing list now! »

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).

About the author

Ben Hunt

Ben is the creator of Web Design From Scratch. He started writing articles about web design to kill time on a long train commute, and is now one of the most influential figures on the subject of effective web design. He has written three books and spoken at multiple conferences internationally.

Dzianis - 3 years ago

thanks, will try to do the same way

I♥code - a couple of years ago

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.

Tim - a couple of years ago

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.

GT Herangi - last year

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.

Saad - last year

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.

Comments are closed