Q: What is proximity?
A: Closeness of two or more graphic elements.

Q: What is alignment?
A: Placing elements along an imaginary line. This body of text is left-aligned. There is no alignment on the right, which is called ragged right. This is vertical alignment; graphic elements can also be aligned horizontally or diagonally.

Q: What is repetition?
A: Grouping in a pattern, as with the four Q & A combinations in this text

Q: What is contrast?
A: Consider the size of the letters Q and the A at the start of each paragraph, compared with the size of the letters in the rest of the sentence. Look also at the spacing between a Q & A group, vs. the spacing of an A & Q group. Also achieved with color and by variations in style, such as bold or italic.

Figure 1. Illustrations of Proximity, Alignment, Repetition, and Contrast (PARC), as applied to a body of text.

________________________________________________________________________

Typography

This is a large subject; a normal graphic design curriculum includes two complete courses in it. The basics that a CS major needs can be condensed to a short list:

• Font families: serif, sans-serif, script, and novelty. Examples:

• Basic terminology: 
• Point size: 1 point = 1/72 of an inch. This sentence is set in 12-point Times Roman. But a word of warning: it is not easy to say exactly what is meant by the point size of a typeface. All the words in the first, second, and fourth lines in the examples above are set in 12-point type, and all the words in the third line are set in 14-point..
• UPPER CASE and lower case. The terms come from the days of movable type, where letters were placed in two cases stacked at the back of the compositor’s table, with the small letters in the lower case because they were used more often and required less hand movement if close by. 
• Justification: Forms of vertical alignment: left justified, centered, right justified, ragged right.
• Ways to give emphasis: italic, bold, underlined, larger type.
• Kerning: Adjusting spacing between letters to “make it look right.” Used only with larger type sizes, and more commonly with sans-serif fonts. In the second line below, notice how the a is nested under the overhanging stroke of the W, and how the e nestles into the open part of the t.

• Legibility issues: minimum readable size on the Web (12 points unless good contrast provided), contrast with background (no pink on red or dark blue on black), avoidance of excess use of italics and centered text. 

Terminology in typography is notoriously confusing. To most people these days, “Times Roman” is the name of a font (this sentence is set in it). Then we talk about point size, italics, etc., simply as variations on the one font. To a professional typesetter, 12 point Times Roman italic and 12 point Times Roman bold are two different fonts. The latter definition makes sense in terms of the mechanics of how type was created using hot metal; it makes no sense today. Just be aware that you can suddenly find yourself in an argument about terminology that seems senseless.

Students need to learn how to apply typography intelligently on the Web, where one is at the mercy of the fonts on the user’s browser. If used in text on the Web, most of the fonts illustrated above would appear as either Times Roman or Arial, because browsers are not required to have a large number of fonts. If the designer cares enough about a font to embed it in a graphic, of course there is no limit except for file size.

Top Of Page

HOME | USER-CENTERED DESIGN | COLOR |  TYPOGRAPHY | 
COMPRESSION | BIBLIO | LINKS | ABOUT DDM | SITE MAP