Typography


| intro | alignment | line length | whitespace - leading, kearning and tracking |
| terminology | typography cheat sheet | quiz | project |

Introduction

Placing text over a background image can make the text difficult to read—for example if the text color is close to any of the colors in the image.

On the web, text over an image can prevent a screen reader from reading the text since in that case, the text is actually part of the image. A background image on the web that is meant to stand alone also needs to be the same or larger than the width of the web page in the browser so that the image doesn’t repeat, or some parts of the page do not appear without a background. Background images that create textures or subtle patterns are not usually an issue (if they are done right!).

A well-designed piece, whether for web or print, will have been developed to accommodate image and text. If the type is to be superimposed on an image, the art direction of the image (photograph or illustration) should have included sufficient “empty” or neutral space so any type placed in that area is legible. Another option is to use a semi-transparent block of color between the image and the text to provide sufficient contrast.

Printing or displaying text on a colored background requires thoughtful use of color for both the background and the text. Darker backgrounds require brighter colors for the text, and in many cases (especially for printed materials) a bolder font is necessary. Dark backgrounds can tend to “pinch” the type so that is may appear filled in, in some areas. In print, it actually can be filled in by the spreading of the ink(s).

Using a shape within an image as the guide or margin for aligning text is called text wrap or runaround. When using flush left alignment, and the shape is very complex, it can become difficult for the eye to find the beginning of the next line, hindering readability. The same is true for using centered or flush right alignments for large quantities of text.


| intro | alignment | line length | whitespace - leading, kearning and tracking |
| terminology | typography cheat sheet | quiz | project |

Alignment

Alignment refers to how multiple lines of text are aligned. The four basic typographic alignments are flush left, flush right, full justification and center aligned (see above illustration). At first glance, full justification may appear to be the best choice because of the straight edges of text on both sides. However, to achieve full justification, the words are automatically spaced to make every line the same length. This often results in gaps between letters and words and “rivers” throughout the paragraphs. I personally prefer flush or centered because the consistent tracking helps create an overall consistency of the typeface.

alignment

  

 


| intro | alignment | line length | whitespace - leading, kearning and tracking |
| terminology | typography cheat sheet | quiz | project |

Line Length

The optimal line length is considered to be 50 to 60 characters long. For example,

The example below is considered just right (50-60 characters per line)

The Cat in the Hat knows alot about that. The Cat in the Hat
knows alot about that. The Cat in the Hat knows alot about
that. The Cat in the Hat knows alot about that. The Cat in the
Hat knows alot about that. The Cat in the Hat knows alot
about that.

The example below is considered too short (25 characters per line)

The Cat in the Hat knows
alot about that. The Cat
in the Hat knows alot about
that.

The example below is considered too long (75 or more characters per line)

The Cat in the Hat knows alot about that. The Cat in the Hat knows alot about that. The Cat in the Hat knows alot about that. The Cat in the Hat knows alot about that. The Cat in the Hat knows alot about that. The Cat in the Hat knows alot about that. The Cat in the Hat knows alot about that. The Cat in the Hat knows alot about that. The Cat in the Hat knows alot about that. The Cat in the Hat knows alot about that. The Cat in the Hat knows alot about that. The Cat in the Hat knows alot about that.


| intro | alignment | line length | whitespace - leading, kearning and tracking |
| terminology | typography cheat sheet | quiz | project |

White Space - Leading, Kearning and Tracking of Letters

In general, leading is the spacing between lines of text, kearning is between individual letters, and tracking is between a range of letters as shown below.

leading, kearning and tracking

Leading

Leading is the space between the lines of type in a body of copy that plays a big role in readability. Correctly spaced lines make it easier for a reader to follow the type and improves the overall appearance of the text. Leading also alters typographic color, which is the density or tone of a composition.

Many factors affect leading: typeface, type size, weight, case, measure, wordspacing, etc. The longer the measure, the more leading is needed. Also, the larger the type size, the less leading is required. A good rule is to set the leading 2-5pt larger than the type size, depending on the typeface. So if you set the type at 12pt, a 15pt or 16pt leading should work well on the web.

Leading should be one to two points larger than the body copy. If you are using 10 point body copy, for example, the leading should be 11 or 12 points. Leading should be one to two points larger than the body copy. If you are using 10 point body copy, for example, the leading should be 11 or 12 points. Leading should be one to two points larger than the body copy. If you are using 10 point body copy, for example, the leading should be 11 or 12 points.

On the other hand, The optimal leading for body text for those with visual limitations is around 25% to 30% more than the point size of the text.

So, if your text is 16pt then the optimal leading would be 20pt as shown below:

leading1

Kerning and Tracking

The difference between kearning and tracking is simple:

kearning vs trackingkearning

 

The Character Palette using Adobe Photoshop, Illustrator, or InDesign

The Type Palette/window inside Photoshop, Illustrator or InDesign is used to control leading, learning and tracking. To access the window select Window > Character and a window similar to the one below will appear:

type window


| intro | alignment | line length | whitespace - leading, kearning and tracking |
| terminology | typography cheat sheet | quiz | project |

General Type Terminology

anatomy of typography

Ascender: The part of lowercase letters (such as k, b, and d) that rise above the x-height of the other lowercase letters.

Baseline: The imaginary line on which the majority of the characters in a typeface rest.Descender The part of lowercase letters (such as y, p, and q) that descends below the baseline of the other lowercase letters in a font face. In some typefaces, the uppercase 3 and Q also descend below the baseline.

Counter: The white space enclosed by a letterform, whether wholly enclosed (as in "d" or "o") or partially (as in "c" or "m").

Descender: The part of lowercase letters (such as y, p, and q) that descends below the baseline of the other lowercase letters in a font face. In some typefaces, the uppercase 3 and Q also descend below the baseline.

Sans serif: A type face that is without serifs. The ends of the strokes are usually square as in Helvetica.

Serif: Small decorative strokes that are added to the end of a letter's main strokes.

Stress: in a typeface, the axis around which the strokes are drawn: oblique (negative or positive) or vertical. Not to be confused with the angle of the strokes themselves (for instance, italics are made with slanted strokes, but may not have oblique stress).

X-height: Traditionally, x-height is the height of the lowercase letter x. It is also the height of the body of lowercase letters in a font, excluding the ascenders and descenders. Some lower-case letters that do not have ascenders or descenders still extend a little bit above or below the x-height as part of their design. The x-height can vary greatly from typeface to typeface at the same point size.


| intro | alignment | line length | whitespace - leading, kearning and tracking |
| terminology | typography cheat sheet | quiz | project |

Typography Cheat Sheet

Martin Silverant created the ultimate Typography Cheat Sheet shown below. To view the larger version you can click on the image or go to his website by clicking on Matin Silvertant.

typography cheat sheet



| intro | alignment | line length | whitespace - leading, kearning and tracking |
| terminology | typography cheat sheet | quiz | project |

Quiz

Select the best answer for each of the questions below:

  1. What is the definition of typography?



| intro | alignment | line length | whitespace - leading, kearning and tracking |
| terminology | typography cheat sheet | quiz | project |

Projects Photoshop

  1. Photoshop Clipping Mask
  2. Photoshop Matrix Text
  3. Photoshop Rainbow Text
  4. Photoshop Patched Text
  5. Photoshop Type Poster
  6. Photoshop Typefce Poster

Illlustrator

  1. Illustrator Type Poster
  2. Illlustrator Trendy Text
  3. Illustrator Plant Text