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

Comments are closed