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 #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.
But when web designers use CSS to cast the base font size in stone..
..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:
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:
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:
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.
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:
Using the body size we assume to be 16px, aiming to convert our 36px <h1>, we get:
Here’s how our scale is converted, using the method above:
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.
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:
Now take a look at this innocent piece of 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).
However, if we were to introduce a second anchor within the paragraph, let’s see what happens:
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.
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
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.
1.5 * 18px which is 27pxStructural 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.
RWD
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.
Conclusion
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
- Pixels vs. Relative Units in CSS: why it’s still a big deal by Kathleen McMahon
- pxtoem.com conversion tool
- How we learned to leave default font-size alone and embrace the em by Filament Group
- Why Ems? by Chris Coyier
- Em (typography) on Wikipedia
- Font sizing with rem could be avoided by Harry Roberts (an approach which is less popular these days)
- Mixins for Rem Font Sizing by Chris Coyier (if you’re confident with SASS)
- An explanation of ems on "The Elements of Typographic Style Applied to the Web"
