1. Web Design
  2. UX/UI
  3. Web Typography

Taking the “Erm..” Out of Ems

Scroll to top
Read Time: 8 min
This post is part of a series called A-Z of Web Typography.
Understanding Typographic Hierarchy
Getting the Hang of Hanging Punctuation

Ems are still the best units for sizing text on the web. There’s only one reason you’re relying on pixels, and that’s because you haven’t yet gotten the hang of ems. Let’s change that!

Decorative M courtesy of Frances Mcleod - winner of TypeFight #34Decorative M courtesy of Frances Mcleod - winner of TypeFight #34Decorative M courtesy of Frances Mcleod - winner of TypeFight #34

Decorative M courtesy of Frances Mcleod - winner of TypeFight #34

Size is Everything

When we build websites, we need to tell the browser how “big” stuff is: “this heading is so big”, “this container is yay high”, “this form is wider than that”, it’s how we layout a page. Pixels have always made perfect sense as the chosen unit of measurement; we’re outputting to a screen, so what else would we use?!

However, pixels aren’t particularly flexible. And it turns out that being inflexible isn’t great for the web.

Problems with Pixels

Oliver Reichenstein stated a long time ago: “The Web is 95% Typography”, but it’s an idea designers still brush over. Content and users; they are our priorities as web designers, and typographic design helps us meet those priorities.

Thanks to simple page zooming, users can view any website at whatever size they like, perfectly scaling the content up and down proportionately. But this scales everything, layout and UI elements included.

“A lesser known feature of most browsers, though, is the option to adjust your preferred font size. This feature operates independently from the page zoom feature.” — Kathleen McMahon

Browsers display body copy at a default size. On desktops this is generally 16px, mobile browsers vary. And as Kathleen says, users can change this default, depending on what they prefer. In doing so, they change the size of the text, and only the text.

chrome font setting screenchrome font setting screenchrome font setting screen

But when web designers use CSS to cast the base font size in stone..

setting a default font size with csssetting a default font size with csssetting a default font size with css

..they prevent the user from tailoring their own reading experience, ultimately making the content less accessible. If your font-size is set in pixels, browser settings won’t change a thing.

Set a Flexible Default Font Size

Lesson one is in handing power back to the user. Don’t prevent users from setting their own type size, but make sure you begin on a level playing field. Set your base font to 100% of the browser default:

a base font size set in percentagea base font size set in percentagea base font size set in percentage

then we can work from there.

Our Typographic Scale

We still need to define how large our various typographic elements appear, especially if we’ve used a CSS reset technique to remove all default sizing. A fairly typical modular scale would look something like this:

a modular typographic scalea modular typographic scalea modular typographic scale

These figures have been used for centuries, calculated in order to optimize proportions, without having to physically manufacture too many of the blocks used in printing. There’s all kind of clever mathematics which justify scales like this and I’m sure you can appreciate that this range is pleasing to the eye too.

We would translate this scale to our own typography by applying CSS a bit like this:

scale in cssscale in cssscale in css

However (as we’ve said already) using fixed pixel values is inflexible, so let’s rectify that..

What is an Em?

An em is a unit of measurement. Just like pixels, ems can determine the size of elements on a web page. Unlike pixels, which are absolute, ems are relative to their parent’s font size, which is where a lot of confusion lies.

1em is equal to the inherited font size. If the font size of a <section> is set to 16px, 1em within that <section> is equivalent to 16px. If the font size of that <section> changes to 20px, 1em within that <section> is equivalent to 20px.

Ems get their name from printing. Precisely when the term was first used is unclear, but as the uppercase M (pronounced emm) most closely represents the square printing block on which printing letters were placed, it came to lend its name to the measurement. Whatever the point size of the font in question, the block of the uppercase M would define the Em.

An em is usually a touch larger than the letterform, but you get the idea.

the origins of 1emthe origins of 1emthe origins of 1em
An uppercase M in Calendas Plus - the surrounding square is 1em high, 1em wide

How to Convert Pixels to Ems

We’ve already started to set our typographic scale in pixels, so how do we convert that into ems? A simple calculation, which expresses the desired font size in relation to the body font size:

calculating ems from pixelscalculating ems from pixelscalculating ems from pixels

Using the body size we assume to be 16px, aiming to convert our 36px <h1>, we get:

px to em conversionpx to em conversionpx to em conversion

Here’s how our scale is converted, using the method above:

our new em valuesour new em valuesour new em values

Some of these values can get a little complex, but don’t be afraid to be as precise as possible with the decimal places. Browsers will always do their best to render the exact values.

It’s useful to make a note in the comments, to remind yourself how you calculated each em value.

Issues with Cascading

The number one biggest grumble people have with ems comes from complications which arise from cascading. An em value is relative to its nearest parent’s value, which can accidentally mess things up if you’re not paying attention. Take a look at the following css, which aims to get anchors and paragraphs sized equally:

problems with cascadingproblems with cascadingproblems with cascading

Now take a look at this innocent piece of markup:

innocent markupinnocent markupinnocent markup

As you’d expect, all appears well in the browser. Both the paragraph and the anchor are displaying at 1.2em, relative to the body font size (1.2 * 16px = 19.2px).

normal rendering of markupnormal rendering of markupnormal rendering of markup

However, if we were to introduce a second anchor within the paragraph, let’s see what happens:

anchor within paragraph inherits relative font sizeanchor within paragraph inherits relative font sizeanchor within paragraph inherits relative font size

The anchor within the paragraph is still sized at 1.2em, but that’s now relative to the parent paragraph, which is already 19.2px - (1.2 * 19.2px = 23.04px). This gives us extra large anchors in some parts of our page; hardly desirable.

Nested list items in navigation menus are a classic example of where cascading can get out of control - watch out for that one.

The Fix

There is no fix for this; the last thing you want to do is add an extra rule to decrease the size of anchors which happen to be in paragraphs - that’s a one-way ticket to Migrainesville. In order to keep your CSS and HTML maintainable, it’s important to Keep It Simple™.

  • Keep your markup simple and modular.
  • Define your ems clearly and in a restrained fashion - don’t go throwing them all over the place.
  • Try to restrict font-sizes to typographic elements; be cautious of applying font-sizes to structural elements.

That should help! Using Ems does mean that you’ll have to think quite hard sometimes, but doing so will force you to clean up your act and be efficient in your coding.


Rems are useful and behave in exactly the same way as ems, without the cascading. Every Rem you define is relative to the body font size. Support is as good as you need these days.

What About Using Ems Elsewhere?

We’ve covered the CSS font-size property; a sensible first step into using ems, but now let’s look at line-height. If ever there was a property which screams “don’t use pixel values”, it’s line-height. 

In this case we’re actually better off using a unitless value. That’s right, just a number; no pixels or ems or anything. Unitless values are the only way to guarantee that descendants of an element inherit a relative line-height. Even using ems could mean that a computed value is passed down to nested elements.

There’s no fixed rule for how large line-height should be, but 1.5 is a reasonable value to try out and will make your typography pleasantly readable.

unitless values on line heightunitless values on line heightunitless values on line height
In this case, our line-height is 1.5 * 18px which is 27px

Structural Elements

Once you get into the mindset of keeping your layout flexible in terms of the font size, you’ll find you rely on pixels less and less for laying out elements on the page.

If we’re talking about fluid layouts, use % values to determine the width of any given element, or let Flexbox and CSS Grid do the measuring for you.

Vertical spacing can be achieved very easily with ems, if you want to. Again, it’s a question of being clean with your markup and styling. Consider restricting margins to the bottom of your elements, so as to make managing vertical rhythm easier.

If you need to define a height (which can be tricky in flexible layouts) use ems too. Perhaps you’re building a navigation and need to define the height of the menu links - they should grow and shrink with the font size.

Rounded corners on a button? Set the border-radius using ems, so everything scales seamlessly. Try it on this interactive pen; change the body font-size to 200% and see what happens to each button.

Text shadow, box shadow, ditto.


And if you need to change the size of everything under certain circumstances, like smaller viewports? Alter the base font size of the body in the appropriate media query body { font-size: 90%; } and wham! Your whole site scales in the time it takes to hit enter.


Start using ems today! Your content is typographically grounded, whether you realise it or not. You don’t have to ditch pixels entirely, but begin thinking in ems and you’ll soon find that they make your web designs more flexible.

Learn More

7.9 Hours

HTML & CSS for Beginners

In this free course, you’ll learn how to code with modern HTML and CSS, the main building blocks of any website.

    Did you find this post useful?
    Want a weekly email summary?
    Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.