An illustrated guide to typographic measurements

by Lucas Czarnecki
If you’ve ever had a question about design measurements, this is for you. Rather than going into the x-height, kerning, or other things that can be measured, this guide is meant to explain the units in which we measure. You know, things like picas, ems, and so on. I hope it’s useful!
Download the free eBook

Inch

Inches are 1/12 of an international foot. If you live in America, you’re probably pretty used to measuring inches and have a good feel for them. What gets tricky is when you’re designing for the web, and inches become essentially irrelevant. (How can an exist in a place without feet?) Inches are most often used as the measurement when printing in the States; for example, posters here are typically printed in tabloid size (11″x17″).

Image

Millimeter

The Millimeter (mm) is another measurement from real-life space: it’s 1/100 of a metric meter. Like the inch, most design programs will let you design in mm—but you might not want to use them if you’re designing for screens. Millimeters are used everywhere the metric system of measurements is used. Interestingly, the iso 216 standard, which measure all pages in millimeters and is based on the older German din 476, prescribe pages that use a ratio of 1:square root of 2 and double with each successive size. The A4 page, for example, is 210mm x 297mm, while the A3 is 297mm x 420mm.

Image
Image

By the way, paper sizing is a pretty robust topic. One of the best-ever books on typography—Die Neue Typographie by Jan Tschichold—goes very in-depth into the din standards and paper sizes. I highly recommend reading it.

Point

The point is the essential typographic measurement. It used to have two different values (one based on the inch and one based on the mm), but since the advent of desktop publishing, the point has been standardized to equal 1/72 of an inch, or 0.353mm. In design, the point is most commonly used to measure point size and leading. In other words, you’re using points when answering: How tall is the type? How much space is above each line of type?

Image
Image

By the way, the point size of a font describes the maximum height any character can have, not how tall the actual letters are. As a result, some typefaces will look larger than others, even at the same point size. This happens when one font has a larger x-height, taller ascenders, etc.

Image

Pica

A pica is made up of 12 points, so it’s 1/6 of an inch or 4.233mm. The pica is often used to measure the width of lines of text (also called the Measure). If you’re using a program like Adobe InDesign or Illustrator, you’ll see dimensions displayed as picas and points, so 6.5 picas—78 points—is shown as 6p6 (six picas and 6 points).

Image

Em

An em is a relative measurement that equals the current point size (not a literal M). This usually comes out to roughly the width of a capital M or H, which are traditionally designed so wide as tall. If you’re setting in 13 point type, then an em will equal 13 points. This relative measurement becomes very useful if you’re designing on the web with CSS, since it will always equal the point size of the current element’s text.

Image

Rem

This web-only measurement equals the “root em,” which is the font-size of your html element. If you don’t specify one, it will equal 16pixels. If you’re trying avoid parent elements affecting the point size of a child element, use rem measurements.

Pixel

The pixel is a tricky measurement. It’s one dot of color on a screen, which sounds simple enough. But since all screens have different dimensions and pixel densities—measured in pixels per inch—it’s tough to be consistent when using pixels. Unfortunately, even if you design in points or inches (or some other measurement), screens will always display in pixels. Luckily, many programs, such as Adobe Illustrator and Photoshop give you the option to export your design at multiple pixel densities (read: sizes), so you might not have to worry too much.

By the way, because pixels are solid-colored squares in a big grid, smooth lines—like that of your favorite ampersand—do not show up quite right. To accommodate the hard edges of pixels, your computer will do something called anti-aliasing, which adds pixels of varying tone to even out hard lines. When exporting from several programs, you’ll actually have multiple anti-aliasing options. Also, when type designers are creating their fonts, they’ll go through the process of hinting, which adds instructions on how to anti-alias the characters so that they display properly.

Image
Image

Free eBook Download

You can download this entire post as a free pdf ebook! Enjoy!

Download the free eBook

Comments

Leave a Reply