typography basics

As noted on the bottom of this page, this document is licensed under a Creative Commons License.

introduction

I tried my best to keep it short, but it got longer. Although I am writing typeface designer, I am not typography expert. Feel free to drop me a note for questions and suggestions.

lines

baseline

Baseline is the line most alphabets align on. Think of it as rules on the notebook.

meanline and x-height

Meanline is the line that is x-height (height of the letter x) above the baseline.

ascender line, cap line

Ascender line is the line that is on the highest point of h and other tall lowercase letters. Acender is part of a letter that is above the meanline.

Cap line is the line that is cap height (height of the letter E) above the baseline. Cap height is often slightly lower than ascender line.

Descender line is the line that is on the lowest point of q and some other lowercase letters. Descender is the part of the letter that is below the baseline.

Figure 1. ehqx.gif

think type

type and body size

A type is a metal block used for printing. On the face of each type, a letter is cast. For alphabets you align the types horizontally to make a line. Thus, all faces in a font have the same height, which is called body size. Body size is made long enough to fit all possible characters including q and É as you can see in Figure 1. *1

point

In digital typography, a measure called PostScript point or point is used for body size. A PostScript point (you write 1 pt) is defined as 1/72 of an inch, which is 0.352777.. mm, by Adobe Systems. *2 *3 *4

You may be wondering why I even bother mentioning about traditional metal type. When you design your own typeface, you have to start somewhere, and body size is where you start because that's one thing that's constant throughout a font of particular size.

font and typeface

Font traditionally means a complete set of metal types of particular size and typeface. The word derives from French fonte, casting. *5

Typeface means the collection of types with the same design.

em

Here comes my favorite em. First, em has nothing to do with the letter M, except for the name. I see websites and books spreading incorrect definitions. It may not cause much problem when you are merely using some typefaces, but it will be when you are trying to design a typeface.

As a relative unit, em is defined by the length of body size of the relevant font. For example, if you are using 12 pt Helvetica, 1 em is 12 pt. If you are designing 9 pt font, 1 em is 9 pt.

As you can see in the figure, body is taken way longer than any measurement of the letter M or m. Then why do we call it em? Because when Romans designed Capitalis Quadrata, they had only uppercase letters, so the height and width of the letter M matched the body size. Later, they invented lower case letters and added diacritical marks, so the letter M has nothing do with em now. *6

imaginary body

Imaginary body or body is the imaginary rectangle for a particular letter if it were set in metal type. The height of an imaginary body is always body size.

The width of an imaginary body is called set width. Set width is taken slightly wider than the width of the letter so it doesn't touch the next letter.

Typeface which has constant set width is called monospaced typeface, and is useful for programming.

actual body and side bearings

Some typographers call the dimension of a letter as actual body as opposed to the imaginary body.

As I mentioned before, you generally take set width (width of imaginary body) slightly wider than the width of actual body. The tiny space on the left of the letter is called left side bearing and the right one is called right side bearing.

quiz

What is the length of 1 em for 12 pt Helvetica?

  1. Width of uppercase M.
  2. Width of lowercase m.
  3. Twice the width of figure 0.
  4. Body size of the font.
  5. 12 pt.
  6. Distance between descender line to ascender line.

digital typography

This section something more specific to digital typography and TrueType font format.

glyph

A letter or more formally character is abstract thing on computer, and ultimately it referes to the character code of a character set, such as 97 to mean the letter a in ASCII code. The term glyph is used to explicitly talk about the shape of a letter in your typeface.

FUnit

FUnit or unit is measurements used to digitalize a typeface, generally defined by a fraction of 1 em. For DoubleType, it is defined as 1/1024 of em.

glyph coordinate system

The origin for a particular glyph is defined by the crossing point of baseline and the left side of its imaginary body.

The x-axis is towards the right side, and the y-axis is towards the top side.

Figure 2. h.gif

resolution

A big difference in digital typography compared to traditional typography, is that it handles low resolution device such as computer display and cellphone screen. I am not trying to offend computer displays here, but compared to traditional paper media, they really do have low resolution.

Resolution is the fineness of device output, and it is measure by a unit called dpi (dots per inch). Since computer displays vary in its size and resolution, combination of logical resolution and screen resolution is used to convert font's body size into pixel length. Logical resolution is expressed by dpi (dots per inch); typcial setting for 96 dpi for Windows, 72 dpi for Macintosh, and 75 dpi for Linux. Screen resolution is expressed by pixel dimention; typical setting is 1024 x 768 pixels and 800 x 600 pixels. Both logical resolution and screen resolution may be changed by the user.

ppem

Since point is defined by 1/72 of an inch, point to pixel is converted by the following formula:

pixel = (point / 72) * logical resolution

On Windows' default setting, 12 pt Georgia will come out to be 16 pixels. On the other hand, typical printer nowadays have 1200 dpi, which comes out to be 200 pixels for the same 12 pt Georgia.

The number of pixels in body size or 1 em is called ppem (pixels per em). Ppem becomes relevant when you are designing typefaces for lower resolution output, such as computer screen. For example, if you would like to use your typeface on Macintosh in 10 point, ppem is as low as 10 pixels. That means you have to design your typeface so that all characters will fit in bitmap with the height of 10 pixels.

font engine

Inside the font engine on your operating system, measurements based on point is no longer used. Everything is based on pixels. Using the calculated ppem (pixels per em), the font engine creates an imaginary grid on the glyph coordinate system. Each square region of the grid is called a pixel. For example, the square connecting the following four points (0,1) (0,0) (0,1) (0,1) is a pixel, with the pixel center (0.5,0.5).

The job of font engine is to convert a glyph's outline into bitmap image. The basic rule is, if the center of a pixel falls inside the outline, the pixel is turned on.

dropout

The rule, if the center of a pixel falls inside the outline, the pixel is turned on, works fine when ppem is high and you have enough pixels to express the glyph. However in lower ppem, the rule is just not good enough. The following figure illustrates how a dropout occurs.

Figure 3. dropout.gif

When part of a glyph is not picked up by any pixel centers and does not render as a pixel against your will, dropout has happened.

hinting

One way to fix a dropout is hinting: You make an exception for the particular ppem you are working on, and slightly move (hint) a point so the outline will be picked up by a pixel center. The hint information will be stored into the point, and will only activate on the particular ppem, because the hinting will be irrelavant on other grids.

Counter: 642, today: 1, yesterday: 8

*7


*1 Body size is also known as size, type size and point size
*2 See Devroye
*3 ATA point is 0.013837 inch or 1/72.27000072 of an inch, which is 0.3514598 mm, defined in defined by the American Typefounders Association in 1886.
*4 Didot point is 1/72 of Royal French Inch (27.07 mm). 0.37597222... mm. Defined in 1770.
*5 The American Heritage Dictionary of the English Language
*6 See Eriksson
*7 EditProtect