typography 101
DESCRIPTION
A Crash Course on TypeTRANSCRIPT
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...