Tt TotallyType

Measuring Type

There are five units for measuring type:

unit abbreviation medium type
point pt print absolute
pixel px screen absolute
em em fonts & web internal/relative
percent % web relative
root-em rem web relative

Lets take a look at the oldest absolute unit — points.

Absolute Units

In print, type is typically measured in absolute or fixed units — picas and points. The PostScript point is 1/72 inch. The PostScript pica is a subdivision of 12 points. Generally picas are used for measuring the page — columns widths, margins, graphics etc. When we talk about type size in print, we are referring to its point size.

Point size

Caslon metal type letter k  by Leo Reynolds

The fine tuned elements of typography — indents, line spacing, font size, etc. — are generally measured in points. When each letter was cast on its own block, the block had to be taller and wider than the letter impression to prevent letters from touching. In metal type each point size had to be cut individually; point size was defined by the height of the block — not the impression. The block was slightly taller than the tallest ascender and the longest descender. When type went digital, the block was represented by the bounding box. Digital type was not limited to a particular size, rather it could be scaled to any point size so it did not adhere to the strict ascender to descender rule. We will get back to digital type a little later in this lesson.

Pixel a fixed unit

The picture element or pixel (pix-el) — abbreviated as px — is an fixed unit used in screen displays and digital images; a single dot on a digital display and the smallest unit of data in a digital image. How many pixels equals one point depends on pixel density or resolution. Pixel density is measured in ppi (pixels per inch), whereas printed images are measured in dpi (dots per inch). Variations in both ppi and dpi can result in variable physical sizes across mediums. Consider the following example: a 10x10px square is made up of a grid of pixels, 10 wide by 10 high, totaling 100 pixels.

10x10px at your ppi

10x10px square printed at 300dpi

If your image has a resolution of 72ppi (pixels per inch), than one point will equal one pixel at 72ppi. The ppi of screens and the ppi of printers is variable. A screen displays one pixel of image data on a physical pixel. The physical size is dependent on the density and size of pixels. A TV, desktop screen, or mobile device have different pixel densities and therefore produce different physical sizes. The physical size of our 10x10 image depends on how big 100 square pixels are on a device. It may look big when displayed on a low resolution screen or tiny when printed on paper at 300dpi.

In terms of typography, the pixel is often used in Web documents in an attempt to produce pixel-perfect designs in the browser. The pixel unit does not scale. This is a problem when devices come in an array of sizes and users have the ability to scale a document at will — luckily, we have relative units.

Relative Units

The opposite of absolute units, relative units have no fixed value — they are relative to an absolute unit.

The EM and EM Square

Type is measured in ems. In metal type, the em square is the same dimensions as the type size. It gets its name because early fonts usually cast the letter M on a square body. In digital type, an em is a unit of measurement relative to the point size. The em is not defined by the typeface but by the size we set our type at — in 10 point type, an em is 10 points... and in 36 point type an em is 36 points. An em may or may not equate to the width of the M.

In digital fonts, every character in a typeface is relative to the font size. This allows, like HTML and CSS, the separation of structure (glyphs) and style (size, side bearings, kerning, etc.). By using relative units, a digital typeface can be scaled to any size. Most digital fonts are based on 1,000, 1,024 or 2,048 UPM — units-per-em. The UPM defines a grid for each contour point to snap to. A font with 1000 UPM is designed within a 1,000 x 1,000 unit square (one million units).

The computer system only needs to know the point size, from which it calculates everything relative to. A fonts built in kerning table for example is relative. This allows one kerning table per font rather than one for every point size. Additionally, our hard work can be scaled; when coming from 12 point to 14 point the type size, white space, and our typesetting all get resized proportionally.

Whats the point?

For many years I have seen designers perplexed by font size; saying there is no point to point size when 12 point type doesn't equal 12 points. Point size is not pointless, the bounding box of 12 point type is exactly 12 points tall. However, there are characters and elements in a typeface that reach outside the bounding box. If you want to know more about how font size is calculated in digital fonts, read the following explanation.

Show Advanced
What is the deal with point size in digital type.

Lets look at Chaparral Pro, the OpenType font used on this site. Chaparral has 1000 UPM. The point-size is the distance between the ascender and descender lines, the 1000 UPM grid scaled. The glyphs within this space get resized proportionally when we set a point size. In this example, we are looking at Chaparral's capital M, tallest ascender Å, and longest descender Ț. Above the UPM is the yMax, Chaparral's max ascender height and below, is the yMin, Chaparral's max descender value. Both the yMin and and yMax values are used to determine the rendered font size and line spacing values. The line gap is used to determine the default line spacing value and overlaps the yMin. In Chaparral, the line gap is 200 and with a UPM of 1000, a font size of 1em has a default line-height of 1.2em.

Lets see how they stack up. The line gap of the top line aligns with the ascender line of the following line of text, this space is 200 UPM. In other words the distance between baselines is 1200 UPM. If we were to decrease or increase the line-height, we are changing this space. Both the yMin of line one and the yMax of line two fit within the line gap with a little room to spare. All of this ensures that ascenders and descenders in lines of type never collide.

What about the Web?

One of the most confusing and complicated attributes in CSS is font-size. In CSS, we have four different units — pt, px, em and % — we can use to set the size of text in a web browser. We already covered the point, pixel, and em.

Percent

Percent is used in web design and works much like the em. The difference is that it is relative to the root font size of a device. For example a desktop browser has a root font size of 16 pixels. If we set our font size to 100%, it is the same as setting it to 16 pixels. The advantage of using the percent unit is that the text remains scalable for mobile devices and accessibility.

Root Font Size

It’s easy to understand the difference between absolute and relative units when you see them in action.

Base %
12pt The quick brown fox jumps over the lazy dog.
16px The quick brown fox jumps over the lazy dog.
1em The quick brown fox jumps over the lazy dog.
100% The quick brown fox jumps over the lazy dog.
Base body {font-size:100%;} body {font-size:120%;}
12pt The quick brown fox jumps The quick brown fox jumps
16px The quick brown fox jumps The quick brown fox jumps
1em The quick brown fox jumps The quick brown fox jumps
100% The quick brown fox jumps The quick brown fox jumps

Generally, 1em = 12pt = 16px = 100%. If you increase the base font-size to 120% in the interactive table above, you will see how both relative units — the em and percent units — get larger as the base font-size increases, but the fixed units, pixels and points, do not. For this reason, the em and percent units are preferred on the Web.

REM

The web is not a fixed place so using relative units like ems and percentages are a must. The em and percent are however, relative to the font size of the parent element. In a structure like HTML where we nest our type this inheritance can be a problem. Luckily, there is another relative unit that addresses this problem, the rem or root-em. A rem is not relative to its parent but the root of the document, consider the following example:

/* BASE SIZE = 14px */
body, html {font-size: 14px}

/* --------------- EM --------------- */
/* h1 font-size: 14x2.5=35 | margin: 35x0.6=21 */
#em h1 {font-size: 2.5em; margin:0.6em 0;}
/* h2 font-size: 14x2=28 | margin: 28x0.75=21 */
#em h2 {font-size: 2em; margin:0.75em 0;}

/* --------------- REM --------------- */
/* h1 font-size: 14x2.5=30 | margin: 14x1.5=21 */
#rem h1 {font-size: 2.5em; margin:1.5rem 0;}
/* h2 font-size: 14x2=28 | margin: 14x1.5=21 */
#rem h2 {font-size: 2em; margin:1.5rem 0;}

See the Pen EM vs. REM by Rhett (@rhettajf) on CodePen.

In the example above, because the em is relative to the parent, each margin must be calculated individually. When we use the rem to set our margin, it is relative to the root or document font size, not the parent. If you’re trying to set consistent padding or margins to establish a rhythm, the rem can be very helpful.

Back to Lessons Anatomy