Typography

A Crash Course on Typeby Jennifer Allison

101

Dedication

This book is dedicated to Martin Brief

who loves typemore than anybody I know.

Table of Contents

Diagram of type

Typeface vs. Font

Type size

Classification of Type

5 Classic Typefaces

Type and Graphic Design

Layout Strategies

5 Typefaces, 5 Grids

Line Length and Alignment

Alignment Examples

Display Type and Body Copy

Hierarchy

3

4

6

6

8

10

11

12

18

20

22

24

2

The Anatomy of Type

In type, the most basic element is called a character, and is most commonly used to refer to letters, however is also used to label numerals, or punctuation marks. Modern numerals have a cap height; which refers to the height of a capital letter above the baseline for a particular typeface. The diagram to the right shows various parts of the anatomy of type.

3

Diagramof

TypeTail Descender

Cross Stroke

Bilateral Serifs

BracketEarDot

Diagonal Stroke

Finial

Baseline

axis

Terminal

Ascent Line

Hook

Link

Lower Case

Stem

4

...is the design of the letter form

...is what the character looks like

Use it in a sentence...

“That is a sweet looking typeface”

Typeface vs. FontA Typeface...

Font Typeface

5

A font is a delivery mechanism

“the font files”

You cannot look at a font unless you can open it up

Below are fonts*Century

*Cooper Black

*Corbrl

Use it in a sentence...

“Send me the fonts”

vs.

6

Text type should be large enough to read easily at arms length. Text type should be between 6-14 points. X-height has a dramatic effect on how it appears with regard to size. Consider your audience, the size of the piece, and print vs. screen. (Georgia and

About points... In typography, a point is the smallest unit of measure. It comes from a pica; which is larger. It is commonly abbreviated as pt. The point has long been the usu-al unit for measuring font size and leading and other minute items on a printed page. There are 12 points to the pica, and on average, 72 points will measure about one inch.

Old Style•Closely connected to calligraphy and the movement of the hand.

Traditional•Generally more legible on paper than on a screen.

Modern•Generally more Abstract.•Generally less organic

Classification of Type

Type Size

7

should

“We yteirav cihpargopyt emoclew

as the natural consequence of human creativity.”

-Sebastian Carter

8

Typefaces

• based on Venetian Types• more open lower case characters• generous counters• larger capitals• delicate grace to curved strokes

Baskerville• tail on lower case g does not close• swash-like tail of Q• small counter italic e compared to italic a• J well below baseline• high cross bar and pointed apex of A• top and bottom serifs on C• W has no middle strokes• long arm of E• T has wide arms

Classic5Garamond

9

• easily recognizable romantic typeface• vertical stress• slight serif bracketing• top and bottom serifs on c• vertical tail of Q• small upper bowl of g• usually no middle serif on w• large ball terminal of c

• curl ending in a ball terminal on top of letter c• ball terminal on hook of f, ear of g, and tail of j• curled tail on capital R and

• prominent top spur on capital C

•two storied a with curves of bowl and stem•narrow t and f•square looking s•bracketed top serif of 1•rounded off square tail of R

Bodoni

Helvetica

Century

10

1. Communication • What? - content, message • How? - how is the idea being presented

2. Response to the problem • Massimo Vignelli always starts projects by listening. He is convinced the solution is always in the problem. He says, “Design must solve a problem.”

3. Stuff we make • posters • flyers • advertisements • web design • packaging

TypeandGraphicDesign

The3main pointsof graphic design

11

Layout Strategies

Think about the concepts below and their context in the design.

“Graphic Design is the communication framework through which these messages about what the world is now, and what we should aspire to. It’s the way they reach us. The designer has an enormous responsibility. Those are the people, you know, putting their wires into our heads.”

-Rick Poynor

• size• position• orientation• repetition• cropping

12

TypefaceGrids

The following grids highlight the beautiful parts of each typeface in 2x2” sections while making the overall design visually pleasing.

5

13

AAAAAAAAA

Baskerville

14

AAAAAAAAABodoni

15

AAAAAAAAA

Copperplate Gothic Light

16

AAAAA

AAAA

Garamond

17

AAAAAAAAAHelvetica

18

andalignment

LineLength

19

A line length between 35-65 characters is optimum. Size and alignment are important factors in determining optimal line length.

CenteredThis type of alignment will line all

the lines up straight down the center. There is an even gap on

both sides. This might look nice for a poster, and in certain situations where attention is needed, but can be hard to read for a long

body of text.

Flush leftThis type of alignment is most traditionally used with books and traditional publications. Flush Left alignment is easy to read and is aligned along the left margin.

Flush rightThis type of alignment can be

used in text to highlight authors of quotes, your signature, some

bodies of text depending on the application, etc. The text is align

along the right margin.

J u s t i f i e dIn this type of alignment, the words start with the alignment at the left, but equal spacing is given so that the right margin also has words lined up with i.e..

Line

20

Alignment Combination Examples

The letter W is unique in the sense that it does not occur in Latin, nor is part of the Latin alphabet. W can sometimes appear in Latin documents, but due to its Germanic language origin; which includes Old English, W primarily will be seen in personal or place names. W is the 23rd letter of the alphabet, and goes by the name ʻdouble-u.ʼ Wʼs name is similar or identical to that of English V.and in many languages W literally means double-V. The Germanic W was written as ʻvvʼ or ʻuuʼ with V and U only becoming distinct around the 7th or 8th century by the early writers of Old English and Old High German. Non-Latin based Gothic used a letter based on the Greek Y instead of W. Even by the 14th century W was still an outcast and not really considered part of the Latin alphabet proper. Com-monly, “Double U” is the only English letter name with more than one syllable.

The letter V, is the twen-ty second letter in the alpha-

bet and during the medieval period was consid-ered to be interchangeable

with the letter u. The two were so synonymous that

deciphering between the two in a large number of ancient

scripts became a bit of a problem, The letters had

much of the same meaning, and sometimes looked the same. English, French and Germanic languages have

distinct sounds for the letter V. The letter V comes from the Semitic letter Waw. In

Roman numerals, the letter V is used to represent the num-ber 5. It was used because it resembled the convention of

counting by notches carved in

double-cut to form a “V”. V is used frequently in Spanish,

but not at all in Polish. V is unique in that it is not doubled

to show that a short vowel follows, for example like ʻpʼ

does for ʻpuppiesʼ.

WwVv

21

WwThe letter W is unique in the

sense that it does not occur in Latin, nor is part of the Latin alphabet. W can sometimes appear in Latin documents, but due to its Germanic lan-

guage origin; which includes Old English, W primarily will be seen in personal or place

names. W is the 23rd letter of the alphabet, and goes by the name ‘double-u.’ W’s name is

similar or identical to that of English V.and in many

languages W literally means double-V.

The Germanic W was written as ‘vv’ or ‘uu’ with V and U only becoming distinct around the 7th or 8th century by the early writers of Old English and Old High German. Non-Latin based Gothic used a letter based on the Greek Y instead of W. Even by the 14th century W was still an outcast and not really considered part of the Latin alphabet proper. Commonly, “Double U” is the only English letter name with more than one syllable.

The letter V, is the twenty second letter in the alphabet and during the medieval period was considered to be interchangeable with the letter u. The two were so synonymous that deciphering between the two in a large number of ancient scripts became a bit of a problem, The letters had much of the same meaning, and sometimes looked the same.

English, French and Germanic languages have distinct sounds for the letter V. The letter V comes from the Semitic letter Waw. In Roman numerals, the letter V is used to represent the number 5. It was used because it resembled the convention of counting by notches carved in wood, with every fifth notch double-cut to form a “V”. V is used frequently in Spanish, but not at all in Polish. V is unique in that it is not doubled to show that a short vowel follows, for example like ‘p’ does for ‘puppies’.

Vv

22

Display Type and Body Copy

Display Type is usually the decorative type or ‘headline’ of the design. Dis-play type is usually larger than body copy. Usually fonts that do not have a lowercase are display type. When setting up display type, watch for kerning; which is the space between two letters.

Kerning may need to be adjusted with certain typefaces, and there are also some things to keep in mind with kerning. Always kern large type. In Adobe InDesign, “Metrics” is more appropriate for text type, whereas with “Optical”, everything gets tighter, (great for headlines). When working with large type, the tighter the better.

Body Copy is the ‘chunks of text’ withing the design, the whole story, a.k.a. body text. For body copy generally you want to pick a legible typeface, serif typefaces are usually easier to read, medium weight (book, roman, regular is more legible than italic or bold. Avoid decorative typeface.

Tips about vertical type• Roman letters are designed to rest on a baseline• All caps are easier to read because of similar construction• Generally speaking, if you DO need to run vertical type, rotate the whole word not the individual letters.

“Don’t

23

confuselegibilitywith communication.

Just because something is legible doesn’t mean it communicates and, more importantly, doesn’t mean it communicates the right thing.”

-David Carson

24

Hierarchy

• size• color/value/hue• position - cropping/repetition• two different typefaces• keep it simple• leading, kerning, tracking• line breaks, indents• typestyle ex. medium, bold• alignment• foreground/background

Hierarchy leads viewers through the information of

the design. Hierarchy emphasizes some

elements while .srehto gnitanidrobus

Consider the following.

25

What it Is

What you need

How to do it

Caramel-Pecan Apple Pie7 cups sliced peeled tart apples 1 teaspoon lemon juice1 teaspoon vanilla extract3/4 cup chopped pecans1/3 cup packed brown sugar3 tablespoons sugar4-1/2 teaspoons ground cinnamon1 tablespoon cornstarch1/4 cup caramel ice cream topping, room temperature1 unbaked pastry shell (9 inches)3 tablespoons butter, melted

1. In a large bowl, toss apples with lemon juice and vanilla. 2. Combine the pecans, sugars, cinnamon and cornstarch; add to apple mixture and toss to coat. 3. Pour caramel topping over the bottom of the pastry shell; top with apple mixture (shell will be full). 4. Drizzle with butter.5. In a small bowl, combine the fl our, pecans and sugar. 6. Cut in butter until mixture resembles coarse crumbs. Sprinkle over fi lling.7. Bake at 350° for 55-65 minutes or until fi lling is bubbly and topping is browned. 8. Immediately drizzle with caramel topping. 9. Cool on a wire rack. Yield: 8 servings

STRUESEL TOPPING3/4 cup all purpose fl our2/3 cup chopped pecans 1/4 cup sugar6 tablespoons cold butter1/4 cup caramel ice cream topping, room temperature

Hierarchy Example

“Trying to explain how to ride a bicycle is notoriously difficult. The same distance lies between experience and theory in describing the design process. To my mind defining design as problem solving smacks more of routine work than creative thinking. The fact is designers enjoy playing with problems.

They treat them as a personal challenge and so if someone else asks how they came up with an idea you’ll probably hear what the designer thinks you expect to hear. Anything from it just popped up in the head, the result of a mystical experience like a Llama levitating by reversing his polarities or something magical like making a leopard change its spots.

For myself I try to sum up the situation, back in edge ways, and cast around for ideas on which to hang further ideas.

It’s an intuitive process involving search, discovery, recognition and evaluation. Rejection or development. There are no specific rules or recipes. One might slip through a sequence of actions in seconds, sweat through step by step, start backwards, move randomly from one point to another, or do what surfers call ‘hang ten’ - get your toes into the board and ride the crest of the wave.

However, there are three essential conditions. The first is the capability for cerebral acrobatics so the mind can juggle the elements while freewheeling around the possibilities. The second is a mind set with the credulity of a child, the dedication of an evangelist, the spadework of a navy. And the third is sufficient motivation to kiss a lot of frogs before finding a prince. All of which adds up to just one thing. An aim to reach that condensation of sensations which -Matisse said- ‘constitutes a picture’.”

-Alan Fletcher

On a closing note...