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

Better WordPress Content
About the author

Ben Hunt

Ben has over 20 years' experience in web design and marketing, and is one of the most influential figures on the subject of effective web design. He has written a bunch of books and spoken at multiple conferences internationally.In 2015, Ben created Open-Source Marketing, which promises to turn the practice of marketing upside down.. Find out more at http://opensourcemarketingproject.org

Dzianis - 4 years ago

thanks, will try to do the same way

I♥code - 3 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 - a couple of years ago

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 - a couple of years ago

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