Typography as an art form

Typography, the methods and goals involved in written design, can be surprising in its depth. What kind of type is used in any given design has to be chosen carefully so that it can match the elements that exist around it.

This page will discuss both using and creating fonts as they both take into account the same two primary factors.

  • Readability.
  • Personality.

The only difference will be that when utilizing a font you will emphasize readability within your design, and when creating you will probably emphasize personality and style.

Fonts & Typefaces

A font defines specific variations in weight, angle and style within a typeface.

Let's clarify early on, a "font" refers to a specific set of characters (letters and numbers). A "typeface" refers to a set or family of those fonts that all share the qualities of that typeface. This can include seemingly simple variations such as bold and italic version. For instance "Arial" is a typeface, "Arial Black" or "Arial Narrow" are font sets.

A typeface defines the basic visual features shared between one or more fonts.

This text you're reading now is using a simple font called Arial basic (which might change slightly depending on your browser). Usually you will just see it referred to as "Arial" or "Arial regular". The "regular" is of course just added to differentiate when other versions are available.

But even the regular version is just part of the "Arial" typeface. Which includes other versions such as...
the bold version,
the italicized version,
or even a slightly redesigned version with heavier lines and other embelishments.

Designed vs automated fonts

You might wonder why, when we listed the different fonts within the Arial typeface just now, Arial "bold" was listed separately than the redesigned heavier version. This is because there are multiple ways of achieving certain looks for fonts. Spefically for bold and italic versions.

A proper "bold" or "italic" font will involve actuallying editing the fonts to create the look of bold or italic text but do so while taking into account and design problems that might arise for such a conversion.

Many programs, such as Adobe Photoshop, have the ability to simulate or *fake* these effects in-program. These automatically modified fonts are acceptable in most cases but can introduce problems that all designers should be aware of.

A Font Family is a set of typefaces that encompasses wider differences than just bold or italic versions. It might also include serif/sans serif, monospaced, or other variations.

For Arial you might not think there's an immediate difference between the bolder and the redesigned version (called "Arial Black"), but there is. To the right (from top to bottom) you can see the regular version, the bolder version and the design variant. The second should obviously be the same as the first, but with thicker lines. Now take a close look at the last two and notice subtle differences in proportion. Especially in how the vertical spine of the "B" is now wider than the horizontal bars or the entire "C" seems to get wider horizontally.

ABC ABC ABC

Let's look at another example using italicized type.

To the left is a glyph of the capital letter "H". This is a slightly modified version of the Tragan Pro font. From top to bottom you have the original glyph, an oblique version of the same glyph, and finally a version of the glyph which has been edited by hand.

Slanting a regular font without modifying the glyphs to compensate for distortion results in Oblique text.

The key thing to notice is that the second version, the "oblique" version, the stems of the glyph (the vertical sides of the "H") appear to be thinner than in the original. This is because they are. When you skew any given shape to one side like this without rotating the end points you end up with a shape that becomes progressively thinner as the skew angle increases. This introduces a readability problem where the thicker areas of the original design are thinned out and risk being not only less noticeable but contribute to separating the beginning and and of the glyph less and less.

With the third version we've manually edited the glyph to not only be slanted but have changed the thickness of the stems to accommodate this change. This is what makes the third glyph here a *proper* italic font and not simply an "oblique" rendition of the original character.

In this case the third glyph should be more readable than the second.

Parts of a character

A Glyph is a singular character in a font set, for example a letter or number.

There's quite a vocabulary involved in the anatomy of typography. The heirarchy continues down form typefaces, beyond fonts and to individual characters known as "Glyphs". Then even within glyphs we divide the image into common features.

The most basic labels for fonts will be the measurements shared between all characters.

x-Height
x-height
descender
Example
point
size
leading
ascender

The Most of these labels should be obvious. The "Base line" will refer to the base of the letters, the "x-height" is so named because the height of the lower case "x" was used as a guiding measurement in early printing, and the Cap height (usually the same as the ascender) is the height of the capital letters.

The anatomical vocabulary of each character feature is less essential, at least on a layout level, but is still important to be aware of.

Text Sizing & Alignment

There are a few key words and concepts to remember when working with text on the level of an entire block of text. First will obviously be the basic position of the font within your design, second will be the size of the font, and the third will be the actual font itself.

When entering sizes you may see them measured in numerous ways. Pixels (usually denoted as "px") should be obvious, but you might also see Point and Pica measurements. For reference...

1 Point = 1/72 of an inch. 1 inch = 2.54 cm

1 Pica = 1/6 of an inch (12 points). 1/6 = 0.1666666666666667xxxxxxxxx

Both of these are measured from the top of a capital letter height to the lowest "descender", as in a lower case "g" or "y". You may also sometimes see "em", which is percentage relative to a predefined default size.

Text alignment (sometimes "flush") describes how text fills a given space on the left and right sides.

After the basic position and size of the text is chosen the an alignment must be chosen. There are essentially four kinds of alignment.

  • Left, where text is aligned to the left side of the text area.
  • Center, where text is not aligned to either side, but spaced so that there is an equal margin on each side for each sentence.
  • Right, where text is aligned to the right side of the text area.
  • Block (or just "justified"). Full justification, where the text is spaced to align to both the left and right sides of the possible space, is helpful to create visually even columns.

You can see some examples to the right.

Some examples of text alignment. From top to bottom, Left, Center, Right, and Justified. Notice when the text does, and does not align to the side of the column.

We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

Tracking & Kerning

Tracking refers to the spacing assigned to all characters in a text selection.

Spacing out the characters within words usually comes in two forms. Tracking and kerning. Both describe the amount of space between characters, just remember that tracking applies to an entire paragraph of character string, and kerning to the way two particular characters or glyphs interact with one another.

Tracking

Tracking

Here are two examples of a word that has had the tracking adjusted. There are many reasons you may want to adjust this property in your particular software.

  • You want to adjust the horizontal size of a word without, but not the vertical, and don't want to change the proportions of individual characters.
  • The spacing in the original font file was simply not readable enough and needs adjustment.
  • You've applied an effect to the font which changes the white space between characters. Maybe

Kerning refers to the spacing between two specific characters.

Kerning is something that can be defined in most programs manually, but it typically refers to the rules that are applied to particular character pairs. For instance any "T" that come after an "L" may be given less space than an "E" that comes after each "L". Let's look at why.

VAULT

It's somewhat subjective, but notice how the "L" and the "T" in the word "VAULT" seem to have slightly more space between them then the previous letters. This is because even though they may be similar in distance horizontally, the actual features of the letters leave empty space to the upper right of the "L" and to the lower left of the "T".

This problem doesn't exist with the "L" and the "U" because the space between them is even from top to bottom already. If anything, with certain fonts, they might be too close and register as one line in a viewer's eyes.

VAULT

In the second example of the word "VAULT" we've adjusted the spacing between the L and the T (and also brought the V closer to the A. Note how their limbs almost cross over each other horizontally. The goal is to make them more readable with the addition or subtraction of white space from areas that had too much, or too little.