When to Use em and ex in CSS

by

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

5 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:
    August 25, 2011

    thanks, will try to do the same way

    Reply
  5. I♥code says:
    February 14, 2012

    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.

    Reply

Leave a comment

Notify me of followup comments via e-mail. You can also subscribe without commenting.