Letter

Anatomy: How Letters Sit on a Line

^height
Attempts to standardize the measurement of type began in the eighteenth century. The point system is the standard used today. One point equals 1/72 inch or .35 millimeters. Twelve points equal one pica, the unit commonly used to measure column widths. Typography can also be measured in inches, millimeters, or pixels. Most software applications let the designer choose a preferred unit of measure; picas and points are standard defaults.

^{Nerd Alert: Abbreviating Picas and Points}
8 picas = 8p
8 points = p8, 8 pts
8 picas, 4 points = 8p4
8-point Helvetica with 9 points of line spacing = 8/9 Helvetica

^width
A letter also has a horizontal measure, called its set width. The set width is the body of the letter plus a sliver of space that protects it from other letters. The width of a letter is intrinsic to the proportions and visual impression of the typeface. Some typefaces have a narrow set width, and some have a wide one. You can change the set width of a typeface by fiddling with its horizontal or vertical scale.This distorts the line weight of the letters,however, forcing heavy elements to become thin, and thin elements to become thick. Instead of torturing a letterform, choose a typeface that has the proportions you are looking for, such as condensed, compressed, wide, or extended.

Size Crime: Vertical or Horizontal Scaling

Size: The Power of X-Heights

Size: Variations on a Typeface

All the typefaces shown below were inspired by the sixteenth-century printing types of Claude Garamond, yet each one reflects its own era. The lean forms of Garamond 3 appeared during the Great Depression, while the inflated x-height of ITC Garamond became an icon of the flamboyant 1970s.

^{download hi-res pdf:} Portrait of Four Garamonds

Optical Sizes

A type family with optical sizes has different styles for different sizes of output.The graphic designer selects a style based on context. Optical sizes designed for headlines or display tend to have delicate, lyrical forms, while styles created for text and captions are built with heavier strokes.

Optical Sizes: Adobe Garamond Premiere Pro

^{download hi-res pdf:} Optical Sizes

Scale is the size of design elements in comparison to other elements in a layout as well as to the physical context of the work. Scale is relative. 12-pt type displayed on a 32-inch monitor can look very small, while 12-pt type printed on a book page can look flabby and overweight. Designers create hierarchy and contrast by playing with the scale of letterforms. Changes in scale help create visual contrast, movement, and depth as well as express hierarchies of importance. Scale is physical. People intuitively judge the size of objects in relation to their own bodies and environments.

_{the xix amendment Typographic installation at Grand Central Station, New York City, 1995. Designer: Stephen Doyle. Sponsors: The New York State Division of Women, the Metropolitan Transportation Authority, Revlon, and Merrill Lynch. Large-scale text creates impact in this public installation.}

A basic system for classifying typefaces was devised in the nineteenth century, when printers sought to identify a heritage for their own craft analogous to that of art history. Humanist letterforms are closely connected to calligraphy and the movement of the hand. Transitional and modern typefaces are more abstract and less organic. These three main groups correspond roughly to the Renaissance, Baroque, and Enlightenment periods in art and literature. Historians and critics of typography have since proposed more finely grained schemes that attempt to better capture the diversity of letterforms. Designers in the twentieth and twenty-first centuries have continued to create new typefaces based on historic characteristics.

^{download hi-res pdf:}
Type History Lecture
^{download hi-res pdf:}
Type History Lecture in Spanish, contributed by Laura Meseguer

In the sixteeenth century, printers began organizing roman and italic typefaces into matched families. The concept was formalized in the early twentieth century to include styles such as bold, semibold, and small caps.

^{download hi-res pdf:} Type Families

Type Family in Use: Garamond 3

_{mcsweeney's Magazine cover, 2002. Design: Dave Eggers. This magazine cover uses the Garamond 3 typeface family in various sizes. Although the typeface is classical and conservative, the obsessive, slightly deranged layout is distinctly contemporary.}

A traditional roman book face typically has a small family–an intimate group consisting of roman, italic, small caps, and possibly bold and semibold (each with an italic variant) styles. Sans-serif families often come in many more weights and sizes, such as thin, light, black, compressed, and condensed. A superfamily consists of dozens of related fonts in multiple weights and/or widths, often with both sans-serif and serif versions. Small capitals and non-lining numerals (once found only in serif fonts) are included in the sans-serif versions of Thesis, Scala Pro, and many other contemporary superfamilies.

_{univers was designed by the Swiss typographer Adrian Frutiger in 1957. He designed twenty-one versions of Univers, in five weights and five widths. Whereas some type families grow over time, Univers was conceived as a total system from its inception.}

_{TRILOGY, a superfamily designed by Jeremy Tankard in 2009, is inspired by three nineteenth-century type styles: sans serif, Egyptian, and fat face. The inclusion of the fat face style, with its wafer-thin serifs and ultrawide verticals, gives this family an unusual twist.}

Portrait of a Superfamily: Thesis

A word set in ALL CAPS within running text can look big and bulky, and A LONG PASSAGE SET ENTIRELY IN CAPITALS CAN LOOK UTTERLY INSANE. Small capitals are designed to match the x-height of lowercase letters. Designers, enamored with the squarish proportions of true small caps, employ them not only within bodies of text but for subheads, bylines, invitations, and more. Rather than Mixing Small Caps with Capitals, many designers prefer to use all small caps, creating a clean line with no ascending elements. InDesign and other programs allow users to create FALSE SMALL CAPS at the press of a button; these SCRAWNY LETTERS look out of place.

^{download hi-res pdf:} Caps and Small Caps in Context

Capitals in Use

_{amusement magazine Design: Alice Litscher, 2009. This French culture magazine employs a startling mix of tightly leaded Didot capitals in roman and italic. Running text is set in Glypha.}

Combining typefaces is like making a salad. Start with a small number of elements representing different colors, tastes, and textures. Strive for contrast rather than harmony, looking for emphatic differences rather than mushy transitions. Give each ingredient a role to play: sweet tomatoes, crunchy cucumbers, and the pungent shock of an occasional anchovy. When mixing typefaces on the same line, designers usually adjust the point size so that the x-heights align. When placing typefaces on separate lines, it often makes sense to create contrast in scale as well as style or weight. Try mixing big, light type with small, dark type for a criss-cross of contrasting flavors and textures.

Mixing Typefaces: Single-Family and Multi-Family

Mixing Typefaces: The Small Print

_{the word: new york magazine Design: Chris Dixon, 2010. This content-intensive page detail mixes four different type families from various points in history, ranging from the early advertising face Egyptian Bold Condensed to the functional contemporary sans Verlag. These diverse ingredients are mixed here at different scales to create typographic tension and contrast.}

Lining numerals take up uniform widths of space, enabling the numbers to line up when tabulated in columns. They were introduced around the turn of the twentieth century to meet the needs of modern business. Lining numerals are the same height as capital letters, so they sometimes look big and bulky when appearing in running text.

Non-lining numerals, also called text or old style numerals, have ascenders and descenders, like lowercase letters. Non-lining numerals returned to favor in the 1990s, valued for their idiosyncratic appearance and their traditional typographic attitude. Like letterforms, old style numerals are proportional; each one has its own set width.

^{download hi-res pdf:} Lining and Non-Lining Numerals in Context

Numerals: Examples

_{monthly calendar, 1892 The charming numerals in this calendar don't line up into neat columns, because they have varied set widths. They would not be suitable for setting modern financial data.}

A well-designed comma carries the essence of the typeface down to its delicious details. Helvetica's comma is a chunky square mounted to a jaunty curve, while Bodoni's is a voluptuous, thin-stemmed orb. Designers and editors need to learn various typographic conventions in addition to mastering the grammatical rules of punctuation. A pandemic error is the use of straight prime or hatch marks (often called dumb quotes) in place of apostrophes and quotation marks (also known as curly quotes, typographer's quotes, or smart quotes). Double and single quotation marks are represented with four distinct characters, each accessed with a different keystroke combination. Know thy keystrokes! It usually falls to the designer to purge the client's manuscript of spurious punctuation.

Punctuation Crimes

_{type crimes: new york city tour City streets have become a dangerous place. Millions of dollars a year are spent producing commercial signs that are fraught with typographic misdoings. While some of these signs are cheaply made over-the-counter products, others were designed for prominent businesses and institutions. There is no excuse for such gross negligence.}

_{gettin’ it right Apostrophes and quotation marks are sometimes called curly quotes. Here, you can enjoy them in a meat-free environment.}

_gettin’ _{it wrong The correct use of hatch marks is to indicate inches and feet. Alas, this pizza is the hapless victim of a misplaced keystroke. In InDesign or Illustrator, use the Glyphs palette to find hatch marks when you need them.}

Punctuation for Typographers

Writers or clients often supply manuscripts that employ incorrect dashes or faulty word spacing. Consult a definitive work such as The Chicago Manual of Style for a complete guide to punctuation. The following rules are especially pertinent for designers.

^{word spaces} are created by the space bar. Use just one space between sentences or after a comma, colon, or semicolon. One of the first steps in typesetting a manuscript is to purge it of all double spaces. Thus the space bar should not be used to create indents or otherwise position text on a line. Use tabs instead. html refuses to recognize double spaces altogether.

^{en spaces} are wider than word spaces. An en space can be used to render a more emphatic distance between elements on a line: for example, to separate a subhead from the text that immediately follows, or to separate elements gathered along a single line in a letterhead.

^{em dashes} express strong grammatical breaks. An em dash is one em wide-the width of the point size of the typeface. In manuscripts, dashes are often represented with a double hyphen (--); these must be replaced.

^{en dashes} serve primarily to connect numbers (1-10). An en is half the width of an em. Manuscripts rarely employ en dashes, so the designer needs to supply them.

^hyphens connect linked words and phrases, and they break words at the ends of lines. Typesetting programs break words automatically. Disable auto hyphenation when working with ragged or centered text; use discretionary hyphens instead, and only when unavoidable.

^{discretionary hyphens}, which are inserted manually to break lines, only appear in the document if they are needed. (If a text is reflowed in subsequent editing, a discretionary hyphen will disappear.) Wayward hyphens often occur in the mid-dle of a line when the typesetter has inserted a "hard" hyphen instead of a discretionary one.

^{quotation marks} have distinct "open" and "closed" forms, unlike hatch marks, which are straight up and down. A single close quote also serves as an apostrophe ("It's Bob's font."). Prime or hatch marks should only be used to indicate inches and feet (5'2''). Used incorrectly, hatches are known as "dumb quotes." Although computer operating systems and typesetting programs often include automatic "smart quote" features, e-mailed, word-processed, and/or client-supplied text can be riddled with dumb quotes. Auto smart quote programs often render apostrophes upside down (‘tis instead of 'tis), so designers must be vigilant and learn the necessary keystrokes.

^ellipses consist of three periods, which can be rendered with no spaces between them, or with open tracking (letterspacing), or with word spaces. An ellipsis indicates an omitted section in a quoted text or...a temporal break. Most typefaces include an ellipsis character, which presents closely spaced points.

Fontlab and other applications allow designers to create functional fonts that work seamlessly with standard software programs such as InDesign and Photoshop. The first step in designing a typeface is to define a basic concept. Will the letters be serif or sans serif? Will they be modular or organic? Will you construct them geometrically or base them on handwriting? Will you use them for display or for text? Will you work with historic source material or invent the characters more or less from scratch? The next step is to create drawings. Some designers start with pencil before working digitally, while others build their letterforms directly with fontdesign software.

Begin by drawing a few core letters, such as o, u, h, and n, building curves, lines, and shapes that will reappear throughout the font. All the letters in a typeface are distinct from each other, yet they share many attributes, such as x-height, line weight, stress, and a common vocabulary of forms and proportions. You can control the spacing of the typeface by adding blank areas next to each character as well as creating kerning pairs that determine the distance between particular characters. Producing a complete typeface is an enormous task. However, for people with a knack for drawing letterforms, the process is hugely rewarding.

Typeface Drawing: Castaways

_{castaways Drawing and finished type, 2001. Art and type direction: Andy Cruz. Typeface design: Ken Barber/House Industries. Font engineering: Rich Roat. House Industries is a digital type foundry that creates original typefaces inspired by popular culture and design history. Designer Ken Barber makes pencil drawings by hand and then digitizes the outlines. Castaways is from a series of typefaces based on commercial signs from Las Vegas. The shapes of the letters recall the handpainted strokes made by traditional sign painters and lettering artists.}

Typeface Proof: Mercury

_{mercury bold Page proof and screen shot, 2003. Design: Jonathan Hoefler/Hoefler & Frere-Jones. Mercury is a typeface designed for modern newspapers, whose production demands fast, high-volume printing on cheap paper. The typeface's bullet-proof letterforms feature chunky serifs and sturdy upright strokes. The notes marked on the proof below comment on everything from the width or weight of a letter to the size and shape of a serif. Many such proofs are made during the design process. In a digital typeface, each letterform consists of a series of curves and lines controlled by points. In a large type family, different weights and widths can be made automatically by interpolating between extremes such as light and heavy or narrow and wide. The designer then adjusts each variant to ensure legibility and visual consistency.}

Create a prototype for a bitmap typeface by designing letters on a grid of squares or a grid of dots. Substitute the curves and diagonals of traditional letterforms with gridded and rectilinear elements. Avoid making detailed “staircases,” which are just curves and diagonals in disguise. This exercise looks back to the 1910s and 1920s, when avant-garde designers made experimental typefaces out of simple geometric parts. The project also speaks to the structure of digital technologies, from cash register receipts and LED signs to on-screen font display, showing that a typeface is a system of elements.

_{Examples of student work from Maryland Institute College of Art}

Where do fonts come from, and why are there so many different formats? Some come loaded with your computer's operating system, while others are bundled with software packages. A few of these widely distributed typefaces are of the highest quality, such as Adobe Garamond Pro and Hoefler Text, while others (including Comic Sans, Apple Chancery, and Papyrus) are reviled by design snobs everywhere. If you want to expand your vocabulary beyond this familiar fare, you will need to purchase fonts from digital type foundries. These range from large establishments like Adobe and FontShop, which license thousands of different typefaces, to independent producers that distribute just a few, such as Underware in the Netherlands or Jeremy Tankard Typography in the U.K. You can also learn to make your own fonts as well as find fonts that are distributed for free online. The different font formats reflect technical innovations and business arrangements developed over time. Older font formats are still generally usable on modern operating systems.

^{PostScript/Type 1} was developed for desktop computer systems in the 1980s by Adobe. Type I fonts are output using the PostScript programming language, created for generating high-resolution images on paper or film. A Type 1 font consists of two files: a screen font and a printer font. You must install both files in order to fully use these fonts.

^TrueType is a later font format, created by Apple and Microsoft for use with their operating systems. TrueType fonts are easier to install than Type 1 fonts because they consist of a single font file rather than two.

^Opentype, a format developed by Adobe, works on multiple platforms. Each file supports up to 65,000 characters, allowing multiple styles and character variations to be contained in a single font file. In a TrueType or Type 1 font, small capitals, alternate ligatures, and other special characters must be contained in separate font files (sometimes labelled "Expert"); in an OpenType font they are part of the main font. These expanded character sets can also include accented letters and other special glyphs needed for typesetting a variety of languages. OpenType fonts with expanded character sets are commonly labeled “Pro.” OpenType fonts also automatically adjust the position of hyphens, brackets, and parentheses for letters set in all-capitals.

Some Commonly Abused Terms

^{typeface or font?}
A typeface is the design of the letterforms; a font is the delivery mechanism. In metal type, the design is embodied in the punches from which molds are made. A font consists of the cast metal printing types. In digital systems, the typeface is the visual design, while the font is the software that allows you to install, access, and output the design. A single typeface might be available in several font formats. In part because the design of digital typefaces and the production of fonts are so fluidly linked today, most people use the terms interchangeably. Type nerds insist, however, on using them precisely.

^{character or glyph?}
Type designers distinguish characters from glyphs in order to comply with Unicode, an international system for identifying all of the world's recognized writing systems. Only a symbol with a unique function is considered a character and is thus assigned a code point in Unicode. A single character, such as a lowercase a, can be embodied by several different glyphs (a, a, a). Each glyph is a specific expression of a given character.

Roman or roman?
The Roman Empire is a proper noun and thus is capitalized, but we identify roman letterforms, like italic ones, in lowercase. The name of the Latin alphabet is capitalized.