The Beauty of Type (Content) by Annabel Webster

This book was created for a university course entitled Typography for Print.

Special Thanks to: Dominique Falla Jacinda Baird Ellen Lupton

Jessica Hische

For type enthusiasts everywhere. â&#x20AC;˘

the basics of typography

• choosing the right type

Annabel Webster •

The Beauty of Type ÂŠ 2015 Annabel Webster. Printed by Blurb, Australia May 2015. All rights reserved. No part of this book may be reproduced in any form, except for the inclusion of brief quotation in review, without permission in writing from the author/publisher.

Contents â&#x20AC;˘ Introduction

Anatomy How Letters Sit on a Line

3 5

Size Height X-Height Width Spacing

7 8 8 9 10

Scale

Type Classification Sans-Serif Letter Variety

13 16

Type Families True Italics Caps and Small Caps

17 19 20

Mixing Typefaces Harmonious Combinations Tips for Pairing Typefaces

21 22 23

Numerals

Punctuation Punctuation for Typographers

29 31

Thinking Conceptually Defining the Mood Establishing Historical Context

33 34 35

Commonly Abused Terms

References

Introduction

here are some beautiful typefaces out there, but not all of them will be perfect for your project. If you’re a web designer, especially if you’ve attended past AEA Conferences, you have already heard a lot about putting the content first and making websites that don’t sacrifice legibility and ease of use for fluffy ornamentation. Figure out what kind of content is most prevalent in your project (more often than not, plain old body copy) and choose the typeface that satisfies the needs of that content. Remember that just because a giant headline is the first thing your reader sees, that doesn’t mean it should be the first typeface you choose. There are many things to take into consideration when choosing a typeface. This book will give you tips and assist you in choosing the right type for your desired outcome, leading you through the basics of everything you need to know about typography.

1 anatomy. 3

counter

ascender

cap height x-height

baseline

stem

descender

tittle

crossbar

spine terminal

serif

bowl

finial

How Letters Sit on a Line: ascender height

cap height

descender height

Some elements may extend slightly above the cap height.

The distance from the baseline to the top of the capital letter determines the letterâ&#x20AC;&#x2122;s point size.

The length of a letterâ&#x20AC;&#x2122;s descenders contributes to its overall style and attitude.

skin, Body x-height is the height of the main body of the lowercase letter (or the height of a lowercase x), excluding its ascenders and descenders.

is where all the letters sit. This is the most stable axis along a line of text, and it is a crucial edge for aligning text with images or with other text.

the baseline

overhang

The curves at the bottom of letters hang slightly below the baseline. Commas and semicolons also cross the baseline. If a typeface were not positioned this way, it would appear to teeter precariously. Without overhang, rounded letters would look smaller than their flat-footed compatriots.

Bone 6

Although kids learn to write using ruled paper that divides letters exactly in half, most typefaces are not designed that way. The x-height usually occupies more than half of the cap height. The larger the x-height is in relation to the cap height, the bigger the letters appear to be. In a field of text, the greatest density occurs between the baseline and the x-height.

2 size. 7

Height

X-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 millimetres. Twelve points equal one pica, the unit commonly used to measure column widths. Typography can also be measured in inches, millimetres, or pixels. Most software applications let the designer choose a preferred unit of measure; picas and points are standard defaults.

A generous x-height (the height of lowercase characters) is very important when choosing a text face. If the x-height is too low, the typeface will appear smaller overall and the caps will have too much emphasis, which interrupts smooth reading. If the x-height is way too high, your eye wonâ&#x20AC;&#x2122;t be able to distinguish quickly between caps and lowercase, which can make you lose your place while reading. A generous x-height allows you to set type at small sizes (for captions and the like) and have it still be very legible.

Width A letter 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. You may have a natural preference for certain type widths but there are appropriate time to use type of all widths. If youâ&#x20AC;&#x2122;re designing a website with narrow text columns, you might want to pick a typeface whose regular width is a little on the narrow side so you can get more words on each line without having to scale text down, which helps keep hyphenation reasonable and type more legible. If you have a site that has columns with vastly different widths, finding a typeface that comes in a variety of widths can be incredibly helpful so you can use narrower width type on narrower columns and normal width to ever so slightly wide type on wider columns. The goal when setting type is to make it beautiful and readable, and one of the things that helps with legibility is per-line word-count. Choose typefaces that lend a hand in getting the right amount of words on a line.

Spacing Text type requires looser spacing, while display requires tighter spacing. One reason Helvetica (the version you all have on your computers) doesnâ&#x20AC;&#x2122;t work well for text is that its letter-spacing is just too tight. If you feel like you have to add letter-spacing to 16px body copy, you might be working with a typeface that is too tightly spaced, or too tightly spaced for your taste. The white space within and surrounding a letter is incredibly important to the overall design of the type, just as important as the black partsâ&#x20AC;&#x201D; spacing can absolutely make or break a typeface.

example: Helvetica 7pt

Avenir 7pt

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sollicitudin congue tortor sit amet iaculis. Curabitur pharetra sem ut nisi iaculis consequat. Aliquam orci leo, fringilla ut vestibulum in, dignissim condimentum elit. Donec tincidunt maximus risus, eget erat hendrerit eu. Sed efficitur est vel odio convallis dapibus. Morbi risus turpis, tincidunt tempus rhoncus vitae, sagittis a nibh. Phasellus mauris mauris, iaculis et viverra id, ornare sit amet nulla. Duis ullamcorper orci id nisi semper, at consequat erat lacinia. Curabitur suscipit est accumsan, congue nulla eu, facilisis quam. Nam magna leo, efficitur et feugiat ut, placerat sit amet purus. Sed luctus nulla efficitur, imperdiet purus in, viverra ex. Pellentesque blandit gravida arcu, molestie efficitur tortor fermentum in.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sollicitudin congue tortor sit amet iaculis. Curabitur pharetra sem ut nisi iaculis consequat. Aliquam orci leo, fringilla ut vestibulum in, dignissim condimentum elit. Donec tincidunt maximus risus, eget faucibus erat hendrerit eu. Sed efficitur est vel odio convallis dapibus. Morbi risus turpis, tincidunt tempus rhoncus vitae, sagittis a nibh. Phasellus mauris mauris, iaculis et viverra id, ornare sit amet nulla. Duis ullamcorper orci id nisi semper, at consequat erat lacinia. Curabitur suscipit est accumsan, congue nulla eu, facilisis quam. Nam magna leo, efficitur et feugiat ut, placerat sit amet purus. Sed luctus nulla efficitur, imperdiet purus in, viverra ex. Pellentesque blandit gravida arcu, molestie efficitur tortor fermentum in.

Avenirâ&#x20AC;&#x2122;s more open spacing make it a better text face than Helvetica.

cale. 11

THE WORLD IS FLAT

THE

WORLD IS FLAT

aller type crime

scale contrast

Minimal differences in type size make this design look tentative and arbitrary.

The strong contrast between type sizes gives this design dynamism, decisiveness and depth.

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 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.

aller

4 type classification. 13

palatino baskerville

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.

didot

Aa Aa Aa

humanist or old style

The roman typefaces of the fifteenth and sixteenth centuries emulated classical calligraphy.

transitional

These typefaces have sharper serifs and a more vertical axis than humanist letter.

modern

Note the thin, straight serifs; vertical axis; and sharp contrast from thick to thin strokes.

Numerous bold and decorative typefaces were introduced in the nineteenth century for use in advertising. Egyptian typefaces have heavy, slablike serifs.

gill sans

rockwell

egyptian or slab serif

helvetica

futura

humanist sans serif

Sans-serif typefaces became common in the twentieth century. Note the small, lilting counter in the letter a, and the calligraphic variations in line weight. transitional sans serif

Helvetica, designed by Max Miedinger in 1957, is one of the worldâ&#x20AC;&#x2122;s most widely used typefaces. Its uniform, upright character makes it similar to traditional serif letters.

geometric sans serif

Some sans-serif types are built around geometric forms. In Futura, designed by Paul Renner in 1927, the Oâ&#x20AC;&#x2122;s are perfect circle, and the peaks of the A and M are sharp triangles.

Sans-serif Letter Variety Using sans-serif typefaces for body copy can be a little tricky because without serifs it can be more difficult for the eye to quickly distinguish between two similar letter forms. In his 2009 article, On Web Typography for A List Apart, Jason Santa Maria quotes Zuzana Licko who stated, “We read best what we read most.” Perhaps in 50 years from now, Helvetica will be considered the most legible typeface on earth because of the insane Helvetica fetishism we’ve witnessed over the last few years. For now, our (western) eyes and brains are trained to skim quickly and effortlessly over serif typefaces and recognize patterns and shapes within the letters. It is useful to find sans-serifs that pass the Il1 rule. Type a capital I, a lowercase l and a number 1 next to each other. If you can’t tell the difference between these characters, you may run into some trouble when setting the text. Also check to see if the typeface has a two-story a and g. Sansserif typefaces with two-story a’s and g’s usually read a bit quicker than those with single-story a’s and g’s.

“We read best what we read most.” 16

5 type families. 17

In the sixteenth 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.

adobe garamond pro,

The roman form is the core or spine from which a family of the typeface derives. adobe garamond pro regular

The roman form, also called plain or regular, is the standard, upright version of a typeface. It is typically conceived as the parent of a larger family.

Italic letters, which are based on cursive writing, have forms distinct from roman. adobe garamond pro italic

The italic form is used to create emphasis. Especially among serif faces, it often employs shapes and strokes distinct from its roman counterpart. Note the differences between the roman and italic a.

small caps have a height that is similar to the lowercase x-height. adobe garamond pro regular (all small caps)

Small caps (capitals) are designed to integrate with a line of text, where full-size capitals would stand out awkwardly. Small capitals are slightly taller than the x-height of lowercase letters.

Bold letters are used for emphasis within a hierarchy. adobe garamond pro bold

Bold versions of traditional text fonts were added in the twentieth century to meet the need for emphatic forms. Sans-serif families often include a broad range of weights (thin, bold, black, etc.).

The bold typeface needs to include an italic version, too. adobe garamond pro bold italic

The typeface designer tries to make the two bold versions feel similar in comparison to the roman, without making the overall form too heavy. The counters need to stay clear and open at small sizes. Many designers prefer not to use bold versions of traditional typefaces such as Garamond, because these weights are alien to historic families.

True Italics Thereâ&#x20AC;&#x2122;s a difference between a sloped roman and an italic. A great typeface will have really lovely true italics that are easily identifiable in blocks of text. What makes an italic an italic is that its structure is more closely related to scripts or writing than a romanâ&#x20AC;&#x201D;it has identifiable entrance and exit strokes rather than perfectly symmetrical serifs and usually has a single story a and g. True italics also ensure even colour (matching weight) within text when used with their roman counterpart.

Italics are not slanted letters.

Caps and Small Caps 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, enamoured with the squarish proportions of true small caps, employ them not only within bodies of text but for subheadings, by-lines, 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.

6 mixing typefaces. 21

Harmonious Combinations You can absolutely design an entire website with just one font family, but why miss out on all the fun of font-pairing? Good fashionistas and good typographers flex their curatorial muscles by putting together items in unexpected combinations that lead to beautiful and harmonious (or purposefully discordant) results. Combining typefaces is like making a salad. Start with a small number of elements representing different colours, 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 flavours and textures.

Tips for pairing typefaces: 1.

choose a super-family

Some typefaces are released as a super family. Super families come with a variety of weights, a variety of widths, and sometimes a sans-serif and serif version meant to complement each other perfectly. Combining fonts from the same super family is definitely the first step to feeling confident mixing and matching typefaces. You can instantly create a harmonious relationship between two fonts this way, which is great if harmony is what you’re after. Being able to play with weights is incredibly important in design. Many typefaces will contain the standard three weight set of light, regular, and bold. There are also those that have inbetweener weights, ranging from 100-900. Sometimes you will want the text to feel a little bolder or more emphasized but don’t want it to be bold. The more weights you have the more flexibility you have with colour choices and reversing type out of image—you won’t have as many issues with how anti-aliasing affects the perception of type weight.

choose

typefaces

from

the same type designer

choose

typefaces

with

similar characteristics

Once you feel like you’re ready to take off the training wheels, try to make type pairings based on what they structurally have in common. To establish similarities, you can break Typefaces into three parts:

▷ the

skeleton

The bones of the typeface or the basic frame on which the typeface is built. The skeleton determines the width of the letter, the x-height, and the general proportions of components.

▷ the

meat

The body and weight of the typeface. While adjusting the weight of type can seem like the most dramatic change you can make, the type will still be relate closely to its underlying skeleton. Some typefaces are weighted in different ways than other depending on which tradition they emerged from—translation (broad nib) or expansion (pointed pen).

▷ the

clothes

All the fun pizzazz we add to type to make it look awesome. Sometimes serifs can be classified as clothes or meat, depending on how essential they are to the structure of the type. Other things that would be considered clothes are spurs, ornamental serifs, drop shades, drop lines, etc.

A serif and sans-serif might look spectacular together if they share a similar skeletonâ&#x20AC;&#x201D;a lot of people recommend this as a place to start. Find a serif for your body copy and a sans for your headlines. Serifs and san-serifs can form an easy harmonious relationship if they have similar proportions (x-height, letter width, and structure) and attitudes.

â&#x2013;ˇ typeface

relationship chart

sibling

cousin

distant relative

Similar x-height Similar contrast Similar width Similar mood Similar style

A sibling relationship example would be a sans-serif and serif from the same super family or a sans-serif and serif that have a very similar skeletal structure. When pairing typefaces that have a lot in common, ask yourself if the second typeface you have chosen is different enough to justify its use. Could you just get by with one typeface? Is this second typeface bringing something new to the table? For a cousin relationship, two typefaces would have a lot in common structurally but exhibit differences that make them feel only tangentially related. Typefaces from the same type designer that are very different stylistically or typefaces created in the same era that share subtle similarities might be considered cousins. Some of the words you wrote down during your brainstorming session may come in handy now to help you figure out what your typefaces have in common. To pair distant relatives together you have to get a little loose. Sometimes the only thing that unites a pair of typefaces is their mood or the feeling that you get when you see them. Some typefaces are like married couples that on paper seem like a terrible match but when you see them together it all makes sense.

numerals. 27

123 123 456 456

futura medium

helvetica neue bold

123 456

adobe garamond pro

georgia

Lining Numerals 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 Non-lining numerals, also called text or old style numerals, have ascenders and descenders, like lowercase letters. Non-lining numerals returned to favour 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.

▷ commonly

abused punctuation marks

5′2″ eyes of blue

prime or hatch marks indicate inches and feet

It’s a dog’s life.

apostrophes signal contradiction or possession

He said, “That’s what she said.” quotation marks set off dialogue

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.

{[“‘,.;:’”]} baskerville

{[“‘,.;:’”]} helvetica neue

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

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.

▷ em

dashes

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

spaces

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.

▷ en

dashes

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

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.

▷ quotation

marks

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.

▷ discretionary

hyphens

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.

▷ ellipses

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.

9 thinking conceptually. 33

Defining the Mood Now that you have established some general guidelines for what you are and aren’t looking for in an anchor typeface, you can start getting a little arty. Brainstorming for type is not dissimilar to brainstorming for an editorial illustration or a book cover. If you’re commissioned to create a book cover, first you have to read the book. As you read, you write down key points and visual cues you might be able to pull from in the future—not just plot points and character names that could easily be found on Wikipedia, but also notes about how the text makes you feel. What are the characters like? What mood does each scene convey? Sometimes pop culture attaches associations to type that are hard to shake. Most people think about Cooper Black as embodying the 1970s aesthetic despite the fact that it was created in the 1920s. Blackletter, before it was embraced by every Hot Topic-shopping high schooler, was just a fancy laborious way people wrote in the 12th century. Type

without immediate cultural associations can definitely evoke a feeling and a backstory, you just have to spend enough time with it to let that story materialize. Most people aren’t used to thinking about type conceptually, and it’s absolutely more difficult to design with abstract forms rather than narrative images.

Groovy Dude. I’m on Deviant Art, fyi. cooper black (top); lucida blackletter (bottom)

Establishing Historical Context Sometimes you’re working on a project and you can add another layer of conceptual fun by sticking to type that was created during or accurately references the historical period your project is meant to convey. Letterer, illustrator and type designer, Jessica Hische, discuses her experiences with creating a typeface within historical context:

“When I worked on the typeface for Moonrise Kingdom, trying to find a script that felt true to the time was a little tough—most of the script typefaces that came out in the late 50s and early 60s (the story takes place on a small island in New England in the early 60s) were brush scripts, which didn’t feel right for the film. We had to reach a little earlier, into the 40s, to find something that made sense. Typefaces from the 40s would totally have still been in use in the 60s, especially in a small conservative town in the northeast. This sort of conceptual reasoning in typeface selection is something that clients love to hear about and can help you convince them to think beyond the standard web safe typefaces. The more you know about the typefaces you’re using, the easier it is to justify their use.”

the great gatsby

- type sample by jessica hische

“I created a little type sample—typesetting the title and the first few paragraphs of The Great Gatsby—to show you how historical accuracy can add an extra layer of oomph to your design. There are four versions, a completely un-styled version, a fully styled version that uses the default typeface Georgia, a version using typefaces that people perceive as being accurate to the time but are a little off, and a version using historically accurate typefaces. I also targeted the text differently in each version so you can see different ways to apply CSS to text. While the ‘somewhat accurate’ version might scream 1920s a bit more loudly than the

historically accurate version, there’s something nice about making historical references that are more subtle and less cartoonish. The reason why everyone throws up rainbows about the set design and costumes on Mad Men is because they go above and beyond to show more than just the most iconic designs of the 50s and 60s. Also, by using typefaces that are accurate to the time we don’t run the risk of rewriting history and adjusting the public perception of what design from that era looked like.” -Jessica Hische

10 commonly abused terms. 37

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 moulds 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â&#x20AC;&#x2122;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.

References • 1

Hische, Jessica. Thoughts. http://jessicahische.is/thinkingthoughts

Lupton, Ellen. Thinking with Type. http://www.thinkingwithtype.com/

▷ The Beauty of Type is typeset in:

Aa Aa 40

Palatino Designed by Hermann Zapf, in 1948

Webstino Designed by Annabel Webster, in 2015