Typography: Web Type

There are three units that rule typography on the web: px’s, em’s, and rem’s.

In print, type size is a simple affair governed by points. It’s a tangible measurement, something that can be measured with a ruler. While you could use points for declaring typeface size, there are three other units that rule typography on the web: px’s, em’s, and rem’s. 

For the longest time, pixels ruled as the unit for type. Like points, pixels have a similar utility in measuring other elements on the web page—pixels are an absolute measurement and hard to screw up. Where they begin to fail is when you have many type sizes declared throughout a more complex site. In that scenario, the need to tweak a type size will lead to the arduous task of combing through stylesheets to adjust all instances of pixel font sizes. Still, it’s the simplest way to get started, is consistent and the easiest approach to type sizing.

For the last ten years, em’s has become the dominant approach to sizing type. Em’s are a relative sizing unit, based on the declared font size of an element’s ancestor. For example, if you gave a paragraph (<p>) a font-size of 20px and then had a strong (<strong>) tag inside of it and gave it a font-size of 1.5em, the type in the strong tag would be 30px (1.5x the size of the paragraph’s type size). This is the strength of em-based type sizing; if you declare a font-size at the body (<body>) tag of a certain pixel size, and use em’s throughout the rest of the document, those type sizes will all be proportional—think Bringhurst (http://webtypography.net/). You can then change that base font size and ALL the type for the site will change proportionally. 

But not exactly. 

Using em’s throughout a document can create compound problems because any element’s font size is affected by all font-size declarations within its direct ancestors. For example, if you have a font-size of 20px declared at the <body>, and you have a <p> that you’ve declared a font-size of 2em, it may be an equivalent of double the base font (40px), but if there are any ancestors with font-sizes declared (for example a <div> with a font-size of 0.5em) those elements’ sizes must be part of the calculation: 

<body> x <div> x <p> = font-size
20px x 0.5em x 2em = 20px

This can suck and it will drive you crazy in the beginning. But the frustration diminishes as you become familiar with using em’s. Em’s can be used for height and width declarations for any element, so you can develop an incredibly complex but proportionally stable visual presentation which can be especially useful in responsive design. The web is full of techniques and tricks for em-based typography so get to it!

Rem-based typography is the final approach I’ll discuss. It’s relatively new on the scene so its browser support is not entirely perfect (http://caniuse.com/#feat=rem) but it is worth getting familiar with. Like em’s, rem’s are a proportional approach to type size but with the convenience of being proportional only to the root <html> font-size declaration. Unlike em’s, it ignores all interceding font-size declarations which eliminates all the issues of compounded font-sizes. In other words, all the convenience of proportional sizing without the baggage. 

Each of these approaches has advantages and disadvantages that you will understand if you dive right in. If you are still using pixels for declaring font-size, then try em’s. If you are the master of em’s, then give rem’s a whirl. Once you have a handle on them all, you will find what works and might even find that a combination of the three is what will work best for you. Get busy!

http://caniuse.com/#feat=rem http://css-tricks.com/rems-ems/

About Bryan:
Bryan Kulba is the founder of Kobot, an Edmonton-based web design company. Over the past decade, Bryan has worked with bands, film makers, artists, restaurants and other organizations big and small to help achieve their goals on the web.