When to Use em and ex 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
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).