The Art of Type

“The spoon and the letter are tools,” noted iconic type designer Adrian Frutiger, “One to take food from the bowl, the other to take information off the page... When it is a good design, the reader has to feel comfortable because the letter is both banal and beautiful.”[1] Typography is what language looks like. If words are the vehicle of public discourse, typography is the vehicle’s chassis. Author Simon Garfield writes, “In type, the appearance of beauty and elegance depends on trickery and skill—perhaps the most fruitful and longest-lasting collision of science and art.”[2]

Figure 1

Figure 1

The question often arises as to why the world needs more than one typeface. The answer, put quite simply, is that letterforms have personalities just as much as actors on screen. Some fonts are mean and glaring; others are soft and wispy. Some fonts are dignified and debonair; others are rude and hostile. Type visually depicts tone of voice (Figure 1). Designers must develop type intuition: the ability to interpret the personality of a typeface and use it appropriately in any given design. Just as sociologists study interactions between groups of people, so elite designers study the interactions between letterforms and differing typefaces. In order to effectively articulate the nuances of this art, many tools and terms must be defined. Following a brief history of communication, a description of the anatomy and classification of letters is in order. The processes and rules of body type will be discussed. After this a brief critique will be given of ten acutely influential typefaces.

History

Many of the first writing systems comprised pictographs made of simple shapes. The Sumerians, Egyptians, and Chinese were among the first societies to develop these writing systems. Eventually multiple pictographs were combined to represent more complex ideas. Sometimes two pictographs were combined to phonetically represent a word—termed rebuses (Zielske). 

Figure 2

Figure 2

Around 2800 BC the first and probably most popular pictographs, the Egyptian hieroglyphs, appeared. Although these hieroglyphs are not considered an alphabet, they certainly represent a set of codified symbols that have meaning. Their meanings are sometimes disputed due to the need for interpretation. For example, a pictograph of a hand could mean giving or greeting. We still use pictographs today; several examples include recycle symbols, men’s and women’s restroom signs, telephone signs, and radiation icons (Figure 2). Pictographs were a huge step forward from simply passing down information verbally between generations, but these were not without problems. There were thousands of pictures to memorize and interpret.

Nearly 1300 years later, the Phoenicians developed an alphabet and thereby eliminated the need for interpretation (Zielske). An alphabet is defined as, “a system of writing in which each symbol ideally represents one sound unit in the spoken language.”[3] The Phoenician alphabet contained twenty-two symbols based upon phonetics, much like our alphabet today. It was widely used in trading. Around 800 BC, the Greeks adapted the Phoenician alphabet and tweaked it for their own purposes. When the Romans conquered Greece in 146 BC, they adapted their own alphabet based majorly upon the Greek alphabet. 

Figure 3

Figure 3

In 400 AD, Rome adopted Christianity. The demand for Bibles grew, so scribes began to increase production. At this point in history, the common person did not have texts to read. Books belonged only to the wealthy and powerful and were a sign of prominence. In 1100, the production of rag paper began. Rag paper was an inexpensive material to write on, produced in Italian mills that used rivers for power sources. Some early wood block printing also began during this time. Blackletter, also known as Gothic script, was developed from approximately 1150 to 1500 AD (Figure 3). The gaudy Blackletter letterforms are often identified with the Medieval Age in Europe. Sometimes called Old English, Blackletter letterforms were used for the German language even up until the twentieth century. Fourteen hundred to 1600 AD saw more books printed than ever before. Literacy among landowners, merchants and guild classes greatly increased. Finally, texts were available to the middle class—not just nobility. 

Figure 4

Figure 4

In 1438 Johann Gutenberg modified a wine press to serve as a printing press. He developed a method to cast single letterforms using precise molds. Eventually he developed suitable inks and methods for situating the pages consistently on the press. In 1456 Gutenberg’s 42-Line Bible was printed. Gutenberg’s printing press was one of the most important advancements in the history of communication. 

In 1458 Nicholas Jenson developed and cut the first Roman typeface called Cloister Oldstyle. Twenty years later, a printer in England named William Caxton designed Gothic typeface Batarde by combining Rotunda and Gothic Textura. Caxton standardized capitalization and punctuation in the English language. Aldus Manutius is credited as being the first book publisher in 1492.

In 1509 Renaissance artist Leonardo DaVinci and mathematician Luca Pacioli developed De Divina Proportione (Figure 4), a document seeking to illustrate the divine proportions loosely similar to previous Fibonacci’s golden ratio (Figure 5). DaVinci analyzed construction of letterforms with geometric elements. Soon after, Geofroy Tory theorized that letterforms should closely mimic the proportions of the human body (Figure 6).[4] Tory’s humanist influence on letterforms began to make letters feel more casual and comfortable.

Figure 5

Figure 5

In 1525 Albrecht Dürer wrote an essay called Just Shaping of Letters in which he constructed the first alternate characters based upon precisely sized squares and arcs. Five years later, Claude Garamond abandoned strictly geometric constraints on letterforms, instead designing letters based upon a combination of shapes and his own intuition. Garamond introduced the apostrophe to the French language. Many contemporary typefaces contain traces of Garamond’s work. 

Figure 6

Figure 6

Many different art movements dictated the direction of type design. The Dada Movement in 1914 rejected the organization of type. Artists during this period rejected strict vertical and horizontal letters, instead employing energy and chaos. The Dada Movement itself was a surge against the politics of World War I and penetrated many areas of society, including photography, literature, poetry, and graphic design. These artists abandoned many preexisting standards in art and instead utilized anarchist ideology. During the Art Deco Movement in 1925, letterforms were characterized by geometric linear designs and bilateral symmetry. Modern examples include Daniel Pelavin’s ITC Anna—inspired by the Art Deco era of the American Roaring ’20s—and A. M. Cassandre’s Peignot, a font heavily influenced by the Cubism movement in 1920.

The Bauhaus was a school in Germany that existed between 1919 and 1933. Bauhaus ideology believed that in design, form follows function. Less is more. The Bauhaus artists abandoned traditional canvas and pursued design as a modern art form in response to the uprising of Communism in parts of Europe. Bauhaus letterforms and designs were heavily based upon geometric shapes.

The Constructivist Movement also influenced type. Constructivist artists employed bold linear elements and the strong use of diagonal lines to create obvious focal points. Type became cold and industrial.

In 1950, phototypesetting changed the way paragraph type was presented. Phototypesetting used a single negative to make small type quite large and eliminate space between letters. Because of this new option, tighter spacing was soon overused and readability was obliterated. In 1960, the Optical Art Movement reinforced the idea that legibility was not important. Seymour Chwast designed several typefaces that still hold to this 1960’s ideal. By 1970, another movement called Minimalism began to shatter this notion that legibility was unimportant. Unfortunately, many design corporations swung too far the other direction in retaliation, imposing strict guidelines for consistent visual identity. In many instances this suppressed creativity. 

By the 1980s, Postmodern ideology began infiltrating type design. Many of the old ideologies of the Dada, Art Deco and Constructivist movements were revisited. Postmodern artists believed that the old rang new once again. Neville Brody, a revolutionary English designer, used the computer to influence design. His typefaces, including Industria, Inline, and Arcadia, use unorthodox shapes. This creates a stylized quirkiness combining a computerized and industrial feel. 

In 1985 Zuzana Licko began designing typefaces that eliminated the rough pixelization of early computer-based fonts. The first digital fonts were very strange and boxy looking. Licko and her husband, Rudy VanderLans, were among the first designers to embrace the technological advances, eventually founding the Emigre Font Foundry. By the 1990s, high-resolution laser printers and outline font technologies greatly enhanced computer typeface design. Licko designed an extremely popular font called Mrs Eaves in 1996, inspired by John Baskerville’s type design. The 1990s are remembered for the use of grunge fonts. Many free online font websites sprang up, allowing amateur type designers to upload and distribute their fonts.

In 2000, Tobias Frere-Jones introduced Gotham, a typeface derived from a bus terminal in New York City. Sophisticated and clean-cut, fonts like Gotham run against the attitude of grunge aesthetic and seek to revisit the beauty of simplicity.

Just as typefaces are designated by their histories, they are also inseparably linked to the cultures from which they emerge. Renowned designer Erik Spiekermann, from his observations of the similarities between architecture and letterform, claims “type defines not only a city, but the characteristics of a nation.”[5]

When choosing a typeface, designers must consider the history, context, and formal qualities of every given typeface. And in order to assess these formal qualities, one must first understand the parts of a letter, to which we now turn.

Letter

Figure 7

Figure 7

The line upon which letters sit is called a baseline. All fonts are measured by a common cap height: the distance from the baseline to the top of a capital letter. The cap height determines a letter’s point size. Some elements in certain letters extend above the cap height. Examples of this include the rounded edges of capital letters “O” and “S.” The x-height is the height of the main body of a lowercase letter. Some elements in lowercase letters extend above the x-height, so the simplest way to measure it is by locating the letter “x.” Although many children learn to write letters using ruled lines that separate the cap height exactly in half, many typefaces have x-heights that go slightly above the halfway mark (Figure 7).[6]

Many letters have their own specific terms for elements, but some letters share common terms. The most important terms are the stems, bowls, and serifs (Figure 7). The stem is the thickest stroke in many capital letters that provides the foundation for the rest of the elements. In the letter “s” the foundation stroke is called the spine. Rounded elements within certain letters are called bowls. The areas within bowls are called counters. 

In the letter “e” the area inside the bowl is called the eye. Serifs are the small knobs on the end of letters that look like tiny platforms. Serif typefaces have feet; sans serif typefaces do not. There are many distinctive variations in styles of serifs (Figure 8). Bracketing describes the relative variation in the fullness and roundness of the serif. 

Figure 8

Figure 8

Figure 9

Figure 9

Arms and legs are common in both lowercase and capital letters. Arms are strokes that extend diagonally upward, while legs are strokes that extend diagonally downward. Legs visually hold the letter steady. The tiny wisp at the low rightmost part of the letter “e” is called the finial or terminal (Figure 9).[7]

Some letters have ascenders and descenders. Ascenders are elements in lowercase letters that rise above the x-height. Descenders are elements in lowercase letters that go below the baseline. The descender on a capital letter “Q” is called a tail (Figure 9).[8]

The shoulder is a rounded element that is not completely closed off by a stroke. The small teardrop-shaped element on the top of a lowercase “a” is called the ear. The rightmost top of the capital letters “F” and “E” is called the beak. Rounded letters that have similar hook shapes on top like “C” and “G” are called barbs. The lower right- most element in the capital “G” is called the spur (Figure 10).[9]

Figure 10

Figure 10

Figure 11

Figure 11

The line that horizontally strikes the letter “t” is called a cross stroke. The line in between the stems of an “H” is called a crossbar. The lowest point of a “V” is called the vertex. It often stretches slightly below the baseline. The lower rounded area on the letter “g” is called the loop (Figure 11).[10]

Some strokes within letters of certain typefaces have varying weights. The thickest strokes are called stem strokes. Strokes that are thinner are called hairline strokes. Some fonts have extreme variance between stem and hairline strokes, but some have very little difference (Figure 11).[11]

With a detailed toolbox of letterform terminology, the progression of distinct body types can now be analyzed. 

Body

There are two different types of fonts in existence: display fonts and body fonts. Display fonts are used in attention-grabbing ads, logos, and headlines. Body fonts are used in books for text in paragraphs. There are five basic body type families that have developed over the course of time (Figure 12). Nearly every body font that exists today can be classified as having roots in one of these families. 

Figure 12

Figure 12

First, Old Style body type originated in 1730. Several examples of Old Style typefaces include Garamond, Goudy, and Caslon. Old Style typefaces can be identified by low thick-to-thin contrast with minimal stress on any stroke. Old Style letters have warm, comfortable and human qualities.

Second, Transitional body type was developed around 1750. Several examples of Transitional typefaces include Baskerville and Fornier. Transitional typefaces can be identified by moderate thick-to-thin contrast with stress on vertical strokes. The serifs have far less bracketing than the Old Style type. Transitional typefaces feel more refined than Old Style typefaces but still maintain a degree of warmth.

Third, Modern body type progressed in the 1780s. Several examples of Modern typefaces include Bodoni and Didot. Modern typefaces can be identified by extreme thick-to-thin contrast with very high stress on vertical strokes. The serifs have little or no bracketing at all. The x-heights are often lower. Modern typefaces are often interpreted as cold and sophisticated, generally feeling exceptionally mechanical.

Fourth, Egyptian body type was introduced in 1820. Several examples of Egyptian typefaces include Lubalin Graph, Clarendon, and Archer. Egyptian body type, also known as Slab serif type, can be identified by huge, bold strokes and serifs with little or no bracketing. The x-heights are often quite high. Egyptian typefaces feel technical, grandiose, and brash.

Fifth, Sans Serif body type emerged around 1915. Several examples of sans serif typefaces include Helvetica, Futura, and Univers. The letters have no serifs. There is little to no stress on any given strokes. Sans Serif typefaces usually have large x-heights. Sans Serif typefaces are clean-cut and simple, but if overused they can have a generic feel.

In print design today it is common practice to use a sans serif typeface for headlines and a serif typeface for the body type. On websites the opposite practice achieves an optimal viewing experience. Because computers deal in square pixels, sans serif fonts render better at smaller sizes. 

There are several more terms one must understand when dealing with body type. Paying attention to these important details will help paragraphs feel more readable and look professional.

The space between lines of type is called leading. The term leading came from lead strips that were placed between lines of type on printing presses. Default leading in computer design programs such as Adobe InDesign is one hundred and twenty percent of the point size. Although the default leading is a good place to start, a designer must make adjustments based upon the specific project at hand. Lack of white space between lines makes identifying letterforms quite difficult. Extra large leading gives the viewer’s eye visual breathing room. 

Figure 13

Figure 13

The term for space between letterforms is called kerning. Kerning is particularly critical when designing headlines and working with large letterforms. Some rounded letters like “o” and “e” by default have more space around them. In body paragraphs this looks natural, but when the point size is increased the space is greatly accentuated and looks disjointed. Generally the kerning must be adjusted when point size exceeds eighteen-point (Figure 13). 

Tracking refers to overall word spacing per line. Tracking is very similar to kerning, but it is used on a group of letters rather than just one letter. Tracking is measured by percentage of point size in Adobe InDesign. Percentage measurement is much more adjustable.

The spaces between the columns on a page are called alleys. When following a grid these spaces must follow precise measurements. A gutter is the space in the center of a spread. In books, the gutter is the place on each page in which the binding holds the book together. Designers must account for the gutter and leave adequate space for the binding.

An orphan occurs when seven characters or fewer are on their own line. A widow occurs when a single line continues to the top of the next column. Adjusting the tracking and kerning can help to eliminate orphans and widows.

Figure 14

Figure 14

Justification is the term for aligning body type either to the left margin, the right margin or both. Flush left means that the beginning words of each line align with the next line on the left side. Flush right means that the ending words of each line align with the next line on the right side. Ragged is the opposite of flush. Ragged right lines do not align on the right side. Ragged left lines do not align on the left side. Because the English language reads right-to-left, the most common justification in English is flush left, ragged right. A grid is achieved when consistent alignments create continuity. When applying both flush left and flush right to a paragraph simultaneously, it is important to watch for wide gaps between words. These distracting gaps are called rivers. Rivers can be eliminated with careful tracking. 

Kissing occurs when two letterforms undesirably touch. Ligatures were developed to eliminate this unattractive connection. A ligature is the combination of two letters as one form. There are unique ligatures in different languages. The most common ligatures in the English alphabet contain the letter “f” (Figure 14).

With an understanding of the history of type, the anatomy of the letterforms and the technical aspects of fine-tuning body type, one is prepared to critique several of the best typefaces ever designed. 

Ten Influential Typefaces

Neutraface is a sans serif typeface designed by Christian Schwartz of House Industries in 2002 (Figure 15). It is based upon the work of world-renowned architect Richard Neutra. Neutra believed in open and free owing functionality; his architecture seeks unity with the surrounding landscape. The typeface itself is based upon geometric shape but still has an incredibly warm and human feel. It can be identified by its extremely low crossbars. House Industries later released two other versions, Neutraface No. 2 and Neutraface Slab, in 2009.

Archer is a slab serif typeface designed by Hoefler and Frere-Jones in 2001 (Figure 16). Originally designed for Martha Stewart Living, Archer combines the bold, geometric structure of twentieth century slab serifs with a softer, more humanist feel. The result is a beautiful typeface that implies absolute credibility and charm.

Futura is a geometric sans serif typeface designed by Paul Renner (Figure 17). Commissioned by the Bauer type foundry, Futura was commercially released in 1927. Futura remains one of the most used sans serif types in the twenty-first century. It has an appearance of efficiency and forwardness. The typeface is derived from simple geometric forms such as near-perfect circles, triangles and squares. Among the most notable brands using Futura is the German-based auto manufacturer Volkswagen.

Gotham is a geometric sans serif typeface designed by Tobias Frere-Jones and Jesse Ragan in 2000 (Figure 18). Inspired by lettering found in a Manhattan bus terminal, Gotham was originally commissioned by GQ. Gotham has a masculine, strong and fresh feel. It revisits the idea of beauty in simplicity. Barack Obama’s presidential campaign design used Gotham.

Helvetica is a widely used sans serif typeface developed in 1957 by Max Meidinger with Eduard Hoffmann (Figure 19). Helvetica was designed in Switzerland and originally named “Die Neue Haas Grotesk.” Eventually the name was changed to Helvetica, Latin for “Switzerland,” to make it more internationally marketable. Helvetica has great clarity and simplistic, unified letterforms. Many modern stores, including Target and GAP, rely on Helvetica for the bulk of their marketing needs. 

Lubalin Graph was designed by Herb Lubalin, Antonio DiSpigna, and Joe Sundwall in 1974 (Figure 20). Lubalin Graph could be identified as either a sans serif or slab serif typeface; it shares features of both. Its most identifiable feature is its huge x-height. It is loosely based upon the typeface Avant Garde Gothic. Lubalin Graph has been used by IBM for different projects.

Caslon was a serif typeface designed by William Caslon in 1722. Caslon is cited as the first typeface of English origin. Caslon was extremely successful in its time and has been used in many important historical documents, including the U.S. Declaration of Independence. Adobe Caslon is a variation designed by Carol Twombly in 1990 (Figure 21). Adobe Caslon is based upon Caslon’s own specimen pages from the mid 1800’s. Over eighteen different variations of Caslon have been produced to date. The letterforms of Caslon have rhythmic strokes and down-to-earth, human qualities.

Mrs Eaves, mentioned previously, is a transitional serif typeface designed by Zuzana Licko in 1996 (Figure 22). Mrs Eaves is a revival of the typefaces by the English printer John Baskerville. It abandons many of the refined, precise techniques used in modern type design and instead seeks to revisit and illustrate the unpredictability of the printing press. Mrs Eaves has elegant and almost poetic aesthetics.

Avant Garde is a sans serif typefaces designed by Herb Lubalin with the help of Tom Carnase between 1970 and 1977 (Figure 23). The inspiration for Avant Garde was based upon Lubalin’s logo design for Avant Garde Magazine. Avant Garde reminisces of the German Bauhaus movement; the letterforms are constructed of circles and clean lines, giving it a simple yet efficient look.

Clarendon is a slab serif typeface designed by English designer Robert Besley in 1845 (Figure 24). Originally designed for the Fann Street Foundry, Clarendon is considered the first registered typeface. The German government used Clarendon extensively for ad campaigns during World War I. Clarendon was also used on many American Old West wanted posters. Its huge letterforms and brash elements give it a blaring voice. 

Conclusion

Not fully science and not fully art, typography is quite possibly the most important element in all of graphic design. Typography is so much more than just letterforms; it is the embodiment of communication throughout history. We have briefly surveyed the history of communication, discussed the anatomy and classification of letterforms, analyzed the basic rules of body type and critiqued several of the most influential typefaces. Each typeface has a distinct personality. Yet all fonts share one common theme; Jonathan Barnbrook, an influential type designer for Émigré, says, “Typography truly reflects the whole human life, and it changes with each generation. It may well be the most direct visual representation of the tone of voice with which we express the spirit of the time.”[12]

Bibliography

Dictionary.com | Find the Meanings and Definitions of Words at Dictionary.com. Web. 13 Mar. 2010. <http://dictionary.reference.com/>.

Garfield, Simon. Just My Type: A Book about Fonts. New York: Gotham, 2010. Print.

Lupton, Ellen. Thinking with Type: a Critical Guide for Designers, Writers, Editors, & Students. New York: Princeton Architectural, 2004. Print.

Zielske, Elizabeth. “Typography.” Class lecture and notes. Spring 2009.