Old Letters
CONTENTS
4
anatomy
26
classification
36
relationships
52
organizing type
64
typographers
96
foundries
ANAT ANAT ANAT ANAT NAT ANAT NAT 4
anatomy of letterforms
7
intro
8
terminology
14
styles and weights
18
size and scale
24
best practices
1
TOMY O TOMY TOMY ANATOMY TOMY TOMY zack rasner blakely pritchard yemi hutcherson elisa hubert
aperture
ascender
descender
bilateral serif bowl
of
5
LETTERFORMS
AN A NA AT TO OMY MY ANA AN AT TO OM O MY MY ANA AN AT TO OM O MY MY ANA AN AT TO OMY OM MY ANA AN NAT TO OM MY Y ANA AN AT TO OM MY Y ANA AN NAT TO OM MY Y ANA AN AT TO OM MY Y 6
anatomy of letterforms
Y Y Y Y Y Y Y Y
zack rasner blakely pritchard yemi hutcherson elisa hubert
7
ANATOMY OF TYPOGRAPHY In 1450, Johannes Gutenberg invented the printing press, giving Western Europe and the world one of most important inventions in the Modern Era. Based on the handwritten lettering that German scribes developed, Gutenberg’s printing press led to books and texts being produced cheaply and quickly. The increased literacy and social changes that followed owe everything to the printing press. Being such an important trade, standardization processes and different styles emerged of how to lay out type. These standards and styles have evolved for over 450 years into our modern understanding of typography today. To be a successful typographer, you must have a firm grasp on the fundamentals: understanding the anatomy of the letterform, it’s components, and the boundaries by which the letters are restricted. Learning about weights and styles, as well as their history and use, to be able to apply them creating adequate hierarchy and differentiations. Size and Scale act as a comparison and contrast for different typefaces. Typefaces are classified by their distinct height, width and proportions and are measured in point systems. Let’s begin with the basic terminology:
8
anatomy of letterforms
TERMINOLOGY
boundaries baseline
Where letters “sit� ; descenders extend below the baseline. Most capital letters sit on the baseline. J and Q are common exceptions. The baseline is the point from which other elements of the type are
capline
A line marking the uppermost point in the capital letter of a font.
meanline
vImaginary line that designates the height of lowercase letters. Typically, the height is uniform throughout a type family.
x-height
The height of the lowercase letter x. Generally, it serves at the standard height of the body of all lowercase letters of a typeface. X height varies greatly among typefaces. A large X-height for a font can improve legibility.
zack rasner blakely pritchard yemi hutcherson elisa hubert
The peak of an uppercase A.
9
anatomy of letterforms apex
Horizontal part of a letterform, one or both ends of which are unattached to the vertical portion. An example: The cross section of an uppercase sans serif T.
arm
Portions of a lowercase letter form that extends above the x-height of the typeface (In some type faces, it will extend to the capheight).
ascender
An imaginary line drawn from top to bottom of a glyph bisecting the upper and lower strokes is the axis.
axis
A circular form at the end of the arm in letters. In typography, the terminal is a type of curve. Many sources consider a terminal to be just the end (straight or curved) of any stroke that doesn’t include a serif (which can include serif fonts)
ball terminal
Larger than a spur, the projection that extends from the endpoints of an uppercase L, T, or E.
beak
The curved portion that encloses a counter.
bowl
10
anatomy of letterforms
bracket
The curve that connects the serif to the stem or stroke. Also known as the fillet.
counter
Negative space within the letterform. Can be either fully closed or partially enclosed.
cross stroke
The horizontal part of a letterform that intersects with the main vertical body.
crossbar
The horizontal part of the letterform that connects a stem to a hairline. In the transition from humanist to old style, the crossbar on the lowercase “e” falls to the horizontal position.
descender
Portions of a letterform (usually lowercase) that descends below the baseline.
ear
The small decorative projection from the lowercase “g”, upper right side.
eye
The enclosed section of a lowercase e.
zack rasner blakely pritchard yemi hutcherson elisa hubert
11
A tapered curve at the end of some letters. Used especially in ornate flourishes.
finial
The thinnest portion of the stroke. This only applies to fonts that used varying line weights.
hairline
The lower angled stroke of a l.
leg
The name of the combined letterform that’s created when there is no break of space between characters.
ligature
Portion of the lowercase g that connects the loop to the bowl.
link
The curved portion that encloses a counter.
loop
Small decorative lines added to the end of the stems and strokes.
serif
12
anatomy of letterforms
bilateral serif
A serif extending to both sides of a main stroke. They are reflexive.
shoulder
The curved stroke aiming downward from a stem. The curve at the beginning of a leg of a character, such as in an “m.�
small capital
Uppercase letters that are smaller than other uppercase letters of that particular font.
Aa spine
The main portion of the letter s curse left to right.
spur
The projection that extends from end points of curved portions of letterforms. Smaller than a serif.
stem
The main vertical body portion of a letterform.
stroke
Typically used to denote any main structural marks of a letterform. Can also just refer to diagonal portions.
zack rasner blakely pritchard yemi hutcherson elisa hubert
13
Handwritten letterforms of the mid-15th century embodied 3000 years of evolved letter design, and served as a natural model for letterforms in systematized typography.
early influential letterforms
Also known as Gothic script, it was used throughout Western Europe from the 12th to well into the 17th century, and until the 20th century for the German language. Early movable type was higly influenced by this style.
blackletter
These scripts emerged from a cultural revival in Italy and differed greatly from the heavy strokes of black letter. Classical influences were largely drawn from inscriptional capitals Von ancient Roman buildings, which structured on a euclidean geometric scheme and classical architecture. This overlapped with the Italian Humanist’s revival of Caroligian script and miniscules. With refinment over time this became the basis for modern Venetian typeset. Additionally Roman and Italic type evolved from these.
humanist and classical revival
14
anatomy of letterforms
STYLES AND WEIGHTS styles
Akzidenz Akzidenz Akzidenz
weights
Akzidenz Akzidenz Akzidenz Akzidenz
Akzidenz Akzidenz Akzidenz Akzidenz Akzidenz Akzidenz Akzidenz Akzidenz Akzidenz Akzindenz Italic, Regular, Condensed, Light, Regular, Medium, Bold, Medium Extended, Light Extended, Bold Italic, Medium Italic, Extra Bold Condensed Italic, Bold Condensed, Medium Condensed Italic, Medium Condensed, Light Condensed
The weight of typeface is determined by the thickness of the strokes of each of the letters, while styles are a variation of inclination or distance between strokes. Both weight and style are used to create differentiations within a type family. The more common styles are regular and italic, which have a relevant historical background. Nevertheless, there are some modern additions such as condensed, with a significantly narrower, and small caps, where all the letters are uppercase shaped, but not as big as if writing with uppercase. The more common weight is Bold; however, some modern additions, are light, regular and semi-bold. There are also combinations of any of the previously mentioned weights and styles, such as Bold Italic. Normally, the different weights and styles of the same typeface are grouped and called family. And each family member is a font.
zack rasner blakely pritchard yemi hutcherson elisa hubert
Movable type was innovated in Rome in the late fifteenth century, thus receiving the name of roman typefaces. Roman types have their vertical strokes perpendicular to the baseline and were inspired by the classical inscriptions on Trajan’s column in Rome.
15
roman and italics
Around the same time, in Venice, still Italy, Aldus Manutius was trying to find a way to print as much text as possible into a page, and thus, reducing printing costs. Aldus, inspired by a back then popular hand-lettering called cursiva humanistica, created what later got known as Italics, but first and briefly was called Aldinos. This typeface was not only able to fit more text per page than roman type, due to its popularity it was also familiar to reader’s eyes. Around 1525, Ludovico Arrighi, another Italian, created a new italic type, which is the model for most of the italic types that came afterwards called cancellaresca. An interesting fact about these italic types is that the capitals that were used kept on being roman capitals. With time, the use of italics declined, but their role as counterpoint to roman types remained. Thus, it ended
trajan’s column
roman type
italic type
16
anatomy of letterforms
oblique Some types, instead of having a true cursive complement, bold and may have a slanted variation of the roman face, which small caps
is the case for most sans serif typefaces. This slanted variation is normally referred to as oblique. However, and with exceptions, obliques are designed from scratch in order to preserve the correct proportions. Obliques that are created by slanting the type generates unpleasant distortions. There is bold, a thicker variation of the roman face, which also has a real version, harmoniously designed from scratch to keep proportions, and a fake or forced version in which the line weight is increased all around resulting in clumsy and distorted proportions. The same situation applies to the small caps style. There is a real version, in which proportions are carefully designed, and a fake version, in which the proportions are distorted. Interestingly, small caps are not a shrunken version of the full caps. The are designed with their particular stroke, height and proportions. Also, sans serif typefaces normally do not have small caps, compared to serif typefaces which normally do. Consequently, it is bettver to always use given designed weights and never forced ones, whether they are forced italics, bolds or small caps.
real and fake italic real and fake small caps
zack rasner blakely pritchard yemi hutcherson elisa hubert
Old-style typefaces designates roman typefaces designed in late fifteenth and early sixteenth centuries, and those inspired on them coming later. For instance, Nicholas Jenson and Francesco Griffo designed some types that continue to be among the most popular typefaces for setting text. The principal features of old-style faces are the slight contrast between the thick and thin strokes, and a slanted axis for letters such as the o. With time the contrast between thick and thin increased and the serifs became finer, more horizontal and more delicate. Transitional types started appearing at the end of the seventeenth century, breaking away from the old-style look and gearing towards a more “modern� look. The contrast between thick and thin strokes increased even more, the slanted axis became vertical and the serifs became horizontal. Modern typefaces concluded the trend started with transitional types in mid-eighteenth century. Their look is characterized by hairline-thin strokes contrasting thick strokes, hairline-thin unbracketed serifs that meet the strokes creating right angles. A famous exponent of modern style was Giambattista Bodoni. Today, modern faces have dropped out of fashion for text setting.
17
old-style transitional and modern typefaces
18
anatomy of letterforms
SIZE AND SCALE During the 16th Century type sizes for the letterpress were invented and categorized for each typeface based on the height and width. The names given to each type size often overlapped with names describing different fonts which created confusion. For example, “English” was a name for both a specific font as well as a 14 point type. The French addressed this problem in 1723 with a royal order for the sized of fonts to be fixed. Pierre Fournier, a typographic theoretician, invented the point system. This became the first standardized measurement of type in the 18th Century. This point system has preserved type sizes of fonts for over four centuries. In recent developments, with the explosion of web design, modern type theorists such as Tim Brown have developed modular systems for sizing and scaling. Brown states, “Typography is an ancient art and craft; we are merely its latest practitioners. By looking to our tradition for guidance, we might once more attain our finest typographic achievements in this new medium.” Explorations of the size and scale of type have yet to cease as new technologies and mediums are invented.
zack rasner blakely pritchard yemi hutcherson elisa hubert
19
6pt: nonpareil
7pt: minion
8pt: brevier or small text
9pt: bourgeois or galliard
10pt: long primer or garamond
11pt: small pica or philosophy
12pt: just plain old pica
14pt: english or augustin
18pt: great primer
21pt: double small pica or double pica
24pt: double pica or two–line pica
36pt: double great primer The Point System was created to be a standard measurement of the height of the letter. One point equals 1/72 inch or .35 millimeters, 12 points equals 1 pica (common width measurement).
point system
Points and Picas are often abbreviated in the following standardized format below:
points and picas abbreviated
12 picas = 12p 12 points = p12, 12 pts. 12 picas, 5 points = 12p5 12-point Helvetica with 14 points of leading = 12/14 Helvetica
20
anatomy of letterforms
height
The height of the type is measured from the cap height (tallest point on the letter) to the lowest descender. Height also includes the breathing room and the top and bottom to avoid letters on varying lines from running into one another.
Height Height
Height Height
Height Height The type buffer is created by the type designer of each font. Since the type buffer is built into the type each uppercase letter occupies the same amount of space vertically even if they do not fill it. However, the x-height of the letter does vary between fonts even if set at the same size making one font appear to be taller. Taller x-heights can often help with legibility of the word, as seen in the first two comparisons. However raising the x-height too high will likely cause legibility problems, like the the last example using lowercase “h” and “n”
zack rasner blakely pritchard yemi hutcherson elisa hubert
21
WIDTH WIDTH WIDTH WIDTH WIDTH WIDTH WIDTHWIDTHWIDTH The width of a type is the visual width plus the space beside it preventing it from running into other letters. There are distinct proportions for various typefaces that determine if the type is narrow or wide. Designers can distort the letters the increase the horizontal or vertical scaling. Distortion can include heavy elements within the typeface to be made thin or vice versa. Condensing, compressing and extending all impact the width of the type.
width
The scale of point sizes within typefaces are related based on a specific ratio and proportion of height and width between each size. Six point types to seventy-two point types have remained intact for over four hundred years. Originally the sizes within the point scale were referred to by names instead of sizes.
scaling and point sizes
When it comes to scaling in sizes, typefaces can appear significantly different even in the same point size. This difference in appearance relates to differences in x-heights, line weights and proportions within the typefaces. With new advances in technology, web designs have opened the door for typographic freedom when dealing with the scale of type. Character heights and widths no longer are bound by ratios to one another but instead can be stretched and fall outside of scale with one another. This freedom may be considered a disgrace and disturbance to how type was originally invented to appear and relate to other type.
22
anatomy of letterforms
relative and Typeface size and scale can not only be classified by absolute specific measurements but can also be described keywords by distinct keywords. Keywords tend to be more self-explanatory in reference to scale.
absolute-size keywords
The words Xx-small, x-small, small, medium, large, x-large, and xx-large set the type to a specific size as defined by the browser. Medium is the default browser font size.
relative-size keywords
The words smaller and larger, make text smaller or larger relative to its parent element’s font size. Unfortunately, different browsers use different algorithms to determine the relative font size change, making them unreliable for browser interoperability.
modular scale
As technology advanced, the internet introduced a new medium in which type could be explored and created. Tim Brown, a modern theorist stresses the importance that specific types appear most clear and legible at specific point sizes and ratios of that point size. He developed what he calls the Modular System for developing web type proportions. The Golden Ratio is and example of a modular scale as seen to the right.
zack rasner blakely pritchard yemi hutcherson elisa hubert
23
24
anatomy of letterforms
BEST PRACTICES Making good use of the anatomy, weights, styles, size and scale within typography will enhance legibility and keep your reader engaged in your design.
do’s Choose a line height that gives your body copy breathing room.
Maintain proper typeface proportions by always using given designed weights and styles. Use different weights to solve an aesthetic problem or a visual or compositional issue. Use different weights to solve a content problem when the content dictates it due to a different tone of voice, quotes and so on. Maintain baseline relationships. Choose roman (or regular) brackets, curly brackets, and parenthesis even if the text inside is italics.
dont’s Distort the size so that the intended proportions are diminished.
Never use forced or fake styles, whether they are forced italics, bolds or small caps.
zack rasner blakely pritchard yemi hutcherson elisa hubert
http://www.typographydeconstructed.com/
25
terminology
http://en.wikipedia.org/wiki/File:Schriftzug_Fraktur.svg http://en.wikipedia.org/wiki/File:Gebrochene_Schriften.png http://www.smedresmania.com/archives/Paper.pdf http://en.wikipedia.org/wiki/File:Evolution_of_minuscule.svg http://www.marksimonson.com/assets/content/notebook/proxnova-weights.png
styles & weights
http://en.wikipedia.org/wiki/File:Arrighi_italic.png http://en.wikipedia.org/wiki/File:Jenson_1475_venice_laertius.png http://codex99.com/typography/21.html http://duggal.com/connect/getting-started/intro-to-typography http://opentype.info/blog/2012/04/10/x-height-and-legibility/#!prettyPhoto
size and scale
e classificationtype classification
pe classification type classification type classification
type classification
type classif
2
the history of classification systems
31
type styles vs. families vs. fonts
32
common typeface classifications
34
best practices
fication
30
e classification type classification
lassification type classification type cla
2
e classificationtype classification
pe classification type classification type classification
type classification
type classif
2
trabazz bruce mackenzie hemker daniel lunk
29
CLASSIFICATION OF TYPE Typographic classifications are ways to organize and group typefaces by looking at the characteristics of the typeface letter forms, including stroke variation, serifs, brackets, x-heights, and the stress put on letters. Although some see classifications as unbreakable rules, they should instead be considered a set of guidelines or best practices. “classification describes typefaces, it does not define them� There are many classification systems that try to be all-inclusive, but most are incomplete. Many designers feel that it is impossible to classify a type because of numerous and subtle typographic differences between many typefaces. However, being able to classify typefaces can be invaluable in helping to make design choices in projects and typographical layouts. It is also important to understand the history of these classifications to avoid creating design cliche, or creating an unclear message through type choice.
classification
30
HISTORY OF CLASSIFICATION SYSTEMS
roots
Type classification gained importance because printers sought to identify heritage through the different typographic styles. The three main groups most type styles fall under correspond to the Renaissance, Baroque, and Enlightenment periods. Many classification systems have been proposed but most are similar to one another with only small variations.
vox-a-typl
The primary “official” classification system is the Vox-A-Typl system. It was put together in 1954 by Maxmilien Vox, then adopted in 1962 by Association Typographique Internationale. This system classifies typefaces in 11 general categories.
british standard
The British Standards Classification of Typefaces, was adopted in 1967 and is a simplified version of Vox’s classification. Elements of Typographic Style categorizes typefaces around periods of art history. Because there are multiple ways of classifying type, classification can be very confusing and controversial.
trabazz bruce mackenzie hemker daniel lunk
31
TYPE STYLES VS. FAMILIES VS. FONTS
a Type Style, also known as a typeface, is a set of letterforms created by a typographer that share similar design characteristics.
type style
a Font is a typestyle of a specific size and weight. For instance, Times New Roman with a bold weight and a 12 pt size is a single font.
font
a Type Family is a grouping of fonts that may have varying sizes and weights, but share a unifying type style. For example, the type family Helvetica is comprised of several fonts, including Helvetica light and Helvetica bold. Some type families are so large that they begin to spread across multiple packages and contain various styles and formats. When they reach this point, the type family then becomes a Super family.
type family
classification
32
COMMON TYPEFACE CLASSIFICATIONS serif
blackletter
oldstyle
Serif typefaces include semi-structural details on its contained letter-forms. These structures can be found around the baseline, x-height, and also around the capline. Some examples of serif typefaces include French Old Style, Spanish Old Style, and Clarendon. Blackletter typefaces are have dramatic contrast in their thick stroke weight, and or often ornate, with swirls and elaborate serifs. These were the first fonts used with the printing press. Old Style serif typefaces were some of the first typefaces, and were developed between the 15th and 17th century. These letterforms can be identified by a fairly equal contrast of stroke and by curved serifs. Garamond is a great example of an Old Style typeface.
transitional
Transitional typefaces were developed after Old Style typefaces. These typefaces were viewed a bridge between Old Style and Modern serif typefaces. These letterforms can be identified by a slight contrast in stroke and angled serifs. Baskerville is the most popular example.
modern
Modern Typefaces were developed in the late 18th and early 19th century. Modern typefaces have high contrast of stroke, straight serifs, and a vertical axis. Bodoni, for example.
trabazz bruce mackenzie hemker daniel lunk
33
Slab-serif typefaces were developed after Modern typefaces. These typefaces had heavy serifs and were mainly used for decorations and headlines. The heavy serifs made the typefaces easier to read at smaller fonts sizes. Rockwell is a slab-serif.
slab serif
Sans-serif typefaces date back to the 5th century but did not gain broad acceptance until the 20th century. Simply put, Sans-serif typefaces have no serifs. Many sans-serif typefaces were modeled after serif typefaces, but with their serifs removed.
sans-serif
Humanist typeface was modeled after the Old Style typeface, but without the serifs. The stroke of a humanist font is fairly uniform.
humanist
Geometric typefaces have letterforms that are modeled after geometric forms.
geometric
Script typeface were based of letterforms made with a flexible brush or pen. Script typefaces were associated closely with strokes of handwriting
script
Pixel typefaces were based on the pixels seen on the screen of computers.
pixel
Decorative typefaces were designed specifically for headlines, posters, and billboards. They usually have ornate decorative characteristics, such as long sweeping and swirling strokes, that could impede readability at smaller sizes.
decorative
classification
34
BEST PRACTICES
hierarchy
typefaces
When creating a typographic layout, it is important to create a visual hierarchy, so a viewer can easily differentiate sections and understand importance. This hierarchy can be achieved through the combination of typefaces from visually different typographic classifications. If typefaces from similar classifications are used in conjunction, the parts of the hierarchy blend together and become less clear. similarly, if the combined typefaces are too radically different, it will cause visual confusion and the viewer will not be able to distinguish importance within the hierarchy.
Generally speaking, layouts should be kept simple, with only two combined typefaces. When there is more complexity, and additional typefaces are required, each type classification used should be given a specific role which should not be broken. This allows the viewer to maintain an understanding of the hierarchy throughout the layout. These roles can be further defined by looking at a classification’s “mood” or the emotions that the letterforms evoke.
trabazz bruce mackenzie hemker daniel lunk
Typographic “color” should also be considered when combining classifications. the word “color” is used as a description of the overall visual difference across a layout. This difference can be achieved when different classifications are juxtaposed. This overall color can be more easily seen when squinting at a layout to blur the overall image. one squinting, the viewer will see lighter and darker areas. The darker areas will draw more attention from the viewer, so there should be a balance between these colors and lighter colors.
Finally, one of the most common techniques used when combining classifications is using both a serif and san-serif typeface. This is generally used to give visual differentiation to header and body text. Because serif typefaces are generally considered easier to read for longer blocks of text, the body is usually a serif typeface, while the header is a san-serif typeface.
35
color
combining type
3
legibility and meaning 36
legibility and meaning
40
hierarchy
41
using different type styles together
45
detail of use
48
best practices
l leg le
3
legibility and mea legibility and legibility and meani legibility and meaning legibility legibility and mean legibility and mea legibilit legibility an legibility legibility a legibility legibility an legibility and mea legibility and me legibility and mean legibility and mea legibility and legibilit legibility a legibility and m legibility an legibility and meaning leg legibility and meaning legib legibility and m legibility and meaning legibility and meaning legibility and meaning legibility and meaning sara price kelly fish josh barrett alyssa wallace
37
d meaning legibility and mea lity and meaning legibili meaning legibility and mean aning legibility and meaning bility and meaning legibi d meaning legibility and mea gibility and meaning and meaning legibility aning legibility and meaning ity and meaning legibilit aning legibility and meanin gibility and meaning nd meaning legibility and me bility and meaning legibi meaning legibility and mean ty and meaning legibilit and meaning legibility and ing legibility and meaning and meaning legibility ning legibility and meaning eaning legibility and meanin ng legibility and meaning legibility and meaning and meaning legibility and m ning legibility and meaning y and meaning legibility and ning legibility and meaning ZING TYPE ZING TYPE ZING TYPE ZING TYPE ZING TYPE ZING TYPE ZING TYPE ZING TYPE ZING TYPE ZING TYPE
ZING TYPE ZING TYPE ZING TYPE
38
legibility and meaning
meaning eaning ning meaning
sara price kelly fish josh barrett alyssa wallace
39
LEGIBILITY AND MEANING
ning ning meaning eaning nd g ng aning g nd meaning ng and meaning ng
In order for designers to create content that is comprehensible and easy to read, they use a variety of different strategies, based on relationships, which include, creating a hierarchy to show what is most important in the content, techniques such as kerning and tracking to create type that is legible and readable, and understanding the best practices of dealing with issues such as widows and orphans. Without a good understanding of these techniques, it would be overwhelming for a reader to comprehend the content. Being able to utilize all of these techniques while designing content is crucial to the design process.
40
legibility and meaning
HIERARCHY In Thinking with Type, Ellen Lupton states, “A typographic hierarchy expresses an organizational system for content, emphasizing some data and diminishing others (94).� Whether an individual is designing a business presentation to pitch to investors, a publication, or simply a flyer to support a local band, having a knowledge of hierarchy will enhance communication with the audience.
emphasis
Undoubtedly, hierarchy does not exist in text unless emphasis is present. Designers should pay attention to the way that text is aligned, spaced, sized, and positioned on a page. There are several simple ways to highlight certain points in a body of text and they include: italicizing, bolding, capitalizing, and underlining content. Subtle shifts like these, serve as visual cues that allow viewers to pick up on the most important information immediately rather than sifting through a block of text to reveal the main idea.
rule of proximity
The Rule of Proximity refers to the idea that related items in a body of text should be grouped together. Paragraphs are simple examples because they break information down in a practical way. When formatting type on a page, redundancy is useful. Paragraph indents and line breaks are practical and effectively group ideas so that it is easier for the audience to visually process information. Lupton suggests that designers should try not to use more than three cues for each grouped area in a document. Size, style, alignment, and color should be carefully considered in the design process (Lupton, 94).
sara price kelly fish josh barrett alyssa wallace
41
USING DIFFERENT TYPE STYLES TOGETHER The term “typestyles” here refers to font and typeface, as well as the actual style of the type. These terms were defined earlier in another section, but it’s still good to set things straight, for sake of a better understanding.
the design of the characters- the look of the letters and so forth
typeface
the design of the characters of a type family. Essentially, it’s the same as a typeface, but on a much broader scope
style
Nick Sherman brought up a great analogy for remembering which is which. Think of a typeface or style as a song, and the font as the CD. So our “song” is, say, Garamond. Because we like the album cover better, we pick up the “CD” Garamond, Bold 12 pt.
“light italic typeface” Written by: FreightMicro
77 pt
42
legibility and meaning
how font conveys meaning
We can divide a font into three main parts- weight, italic, and width. Yes, there are probably many more elements to consider with fonts, but we’ll stick with these three to keep things simple.
weight
Altering the weight of the text is like changing the volume. Bold is a lot louder than, say, Roman. Essentially, the darker you get, the more your text pops forward and the louder it yells. Lighter weights quiet the text and pull it backwards, with Roman being an acceptable middle-ground. Weight is a great way to portray emphasis. Using a darker weight around light weights autamatically emphasizes the darker text. But let’s branch out a bit; let’s think a little differently. Remember the volume analogy? Well, try taking that literally. If you want to make something read powerfully with an “in-your-face” kind of attitude, you make that text darker. This works the other way with lighter weights; the text fades away into a whisper, conveying insignificance or portraying a sort of mysterious, secretive personality. Combining the two is like playing with the volume knob on a radio, varying from standard, to shouting, and all the way down to a whisper.
I love you I hate you Helvetica Neue Ultra light
Helvetica Neue Bold
sara price kelly fish josh barrett alyssa wallace
Italics, and obliques, adjust the tone. Let’s ignore the formal uses for italics for a minute, and think about how they change the way we read text. What’s the difference in using standard type like this and using italics like this? They change the way words sound in our head; italics carefully articulate words. They do not yell, shout, or whisper like weight. They differentiate themselves through the way they’re read, and the way we perceive them. This is tone. If text had a voice, italics would change the way it speaks. Think of the width as the tempo; it tells us how quickly or how slowly the type reads. Wide fonts are loooong and sloooow. They take up more space and appear stretched across the page, whereas condensed fonts are packed closely together, reading much more quickly. For example, you might use a condensed font to type out smaller, insignificant details so that we read through them quickly. Wide fonts? Those are great for big, important titles that dominate the page. So, to reiterate, width is tempo. Wide is slow; condensed is fast. And now, we have typeface. Typeface is like the mood of a song or someone’s voice. It’s the way in which the sound is presented- the personality. Every typeface has a personality. Every. Single. One. Not every typeface is unique; in fact, some look nearly identical. But those itty bitty differences are what give them their charm, or in some cases, their hideousness. The ability to read a typeface’s personality isn’t something you can learn from reading an article. Or, well, maybe it is. Just look at the text. Look at the form of the letters, and then read what they’re saying. Does it fit? Does it mesh together? Does it work?
43
italics
italics set the tone
width
SLOW
QUICK
typeface
CLEAN HEAVY OFFICIAL
44
legibility and meaning
Let’s take a look at Baskerville, for example. It’s a classic, old, typeface often used for the bulk of paragraphs and long articles (like this one). It’s not too formal, but it’s not too silly. In certain context, it can hold its own against more modern typefaces. But, give it a different backdrop, and it fits right into antiquity, and its age begins to show. But how do you figure this out? Simple. You look at the text, and then you read it.
THE
WORKS OF THE LATE
J O H N BAS KE RVILLE personality
Personality is very open-ended. It’s all about what you perceive from the text and how it looks, that’s why one of the most difficult questions to answer is “what typeface should I use?” Sometimes, it just takes a little experimentation and mucking about with different typefaces to answer it. So if you’ve been following along with the music analogy, you’ll notice that we have four important building blocks for a song- volume, tone, tempo, and mood- or in reality, weight, italics/obliques, width, and typeface respectively. With an understanding of how font and typeface affects the way we read text, we can better combine these typographic elements to convey ideas and meaningnot just pretty text.
sara price kelly fish josh barrett alyssa wallace
45
DETAIL OF USE Kerning is an adjustment of the space between two letters in order to give a word a more aesthetically pleasing appearance.
kerning
The use of kerning first originated when calligraphy came into practice. When type was made by using cast metal, a corner was made to be an even height on one or both sides of a letter-piece. These pieces were only set against one another, not against un-notched ones, which had straight sides. The corner allowed for a character’s features to reach into the area normally taken up by the next character. For example, the top bar of a T or the right diagonal of the V could hang over the bottom left corner of an A. uses the kerning tables that are built into the typeface. When you select metric kerning, you are using the spacing that was intended by the type designer. Usually looks good, especially at small sizes.
metric kerning
implemented automatically by the page layout program that is being used. Rather than using the pairs addressed in the fonts kerning table, optical kerning assesses the shapes of all characters and adjusts the spacing wherever needed. Some graphic designers apply optical kerning to headlines and metric kerning to text.
optical kerning
metric optical
Kerning Kerning
46
legibility and meaning
tracking
Tracking refers to the space between each letter of a word, line, or block of text Tracking is similar to kerning in that it is the spacing between characters, but it is the space between groups of letters rather than just the individual letters.
TRACKING TRACKING TRACKING TRACKING By expanding the tracking across a word, line, or entire block of text, the designer can create a more open field. In blocks of text, tracking is usually applied in small increments, creating a subtle effect not noticeable to the casual reader. Occasionally, a single word or phrase is tracked for emphasis, specifically when caps is used within a line. Negative tracking, which is rarely wanted in text, can be used sparingly to help bring up a short line of text.
sara price kelly fish josh barrett alyssa wallace
Leading is the amount of space between the lines of text.
47
leading
Isome thinkspace. i need Isome thinkspace. i need I think i need some space. I think i need some space. The term leading originated from the practice of placing lead strips between lines of type on older hand set printing presses such as a letterpress. Adjusting the leading is also a very useful way of saving or using space on a page. Leading can also be used to change the aesthetics when dealing with a typographical design.
48
legibility and meaning
BEST PRACTICES line length
robert bringhurst’s
ideal line length
Line length, also called measure, refers to the number of characters per line. It is key to the readability of the text. If a line of text is too long, it will be difficult for a reader to focus on the text as their eye can easily become lost and lose track of where a line starts and ends. Alternately, a line that is too short will seem abrupt and disconnected, which can cause the reader’s eye to jump frequently. -45 to 75 characters (ideally 66 including spaces) for a single column -40 to 50 characters for a multi-column -40 characters for justified type -85 to 90 character for discontinuous text with liberal leading. -12 to 15 character for marginal notes There are also other factors that can affect line length, including the font, point size, and the length of the words in each line.
sara price kelly fish josh barrett alyssa wallace
49
Ragging is referred to as the uneven vertical margin on a body of type on either the left or right, depending on which side is flushed.
ragging and allignment
Most cases in the western world a body of type is flush left, improving the readability of the text, thus making the right side ragged. It is important to make sure that when a side of the body of text is ragged, that there is a balance with the length of each line. If the length of lines differs too greatly the ragging can create distracting negative space which interferes with the readability of the text.
left allignment
Justified type is when both the left and right sides of area of text are even, resulting in a clean text box. This technique is also commonly used in newspapers and books. Justification of text is made possible by adding spaces between letters and words in each line in order to make all the lines the same length. However, this can result in some lines of text having noticeably large spaces between letters and words which creates rivers of white space.
justified allignment
Centered type is when the text is uneven on both sides with different line lengths and organized on a central axis point, making the text symmetrical. This can often be used to create areas of text which are more organic than justified or flush left/right type. This technique is often used on invitations, title pages, certificates, and tombstones. However, this technique should not be implemented when there is a large passage of text, such as in books, because the reader will find it difficult to keep up with where the lines start because they all begin in varying locations.
center allignment
50
legibility and meaning
orphans
Some sources explain that an orphan is a short line of text, usually only one to a few words, that appear at the end of a paragraph or bottom of a page by itself. Other sources will say that an orphan is a word or short line of text that appears at the beginning of a column or page.
Text text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text. text text text text text text text. Text text text text text text text text Text text text text text text text text text text text A widow or an orphan text text text text text text text text is a word or a few words that appear text text text text text text text text at the bottom of a page or paragorahp text text text text text text text text like this. text text text text text text text. WIDOWS AND ORPHANS
Text text text text text text text text text text text text text tex text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.
sara price kelly fish josh barrett alyssa wallace
Some sources say a widow is a line of text, usually at the end of a paragraph, which has been separated from the main body of the paragraph either appearing on the next page or in another column. Others claim that a widow is, like an orphan, a single word or a few words that appear at the end of a paragraph on a line by itself.
WIDOWS AND ORPHANS
page like this.
Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text. Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text. Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text. A widow or an orphan can also be a word or short line at the beginning of a column or
In either case it is universally agreed that it is best practice to get rid of them. This can be done in a variety of ways, either by adjusting the kerning or tracking, breaking a paragraph earlier, or even rewording the widow or orphan.
51
widows
56
grids
58
dividing space
60
white space
62
hierarchy & balance
54
organizing type
gillian paige michael pogoloff blair sly junjie ji
55
ORGANIZING TYPE
Utilizing a strong understanding of how to organize and layout a typographic design is essential to effectively commuting a message. While it is import to design aesthetically pleasing work, in typography the information is the most crucial element in need of visual articulation. For this reason basic readability is the most important aspect of typography. Assuming that has been accomplished, the next reason to organize your type is to give the viewer’s eye an easy-to-follow path that guides them through the information in deliberate path that organizes subject matter. Traditionally the organization of typography is done through the use of grid systems, hierarchy, and the division of positive/negative space. Using an understanding of these concepts in conjunction with one another will enhance maximum readability, understanding, organization, and aesthetic appeal in a typographic design.
56
organizing type
GRIDS
grid
A structure made up of a series of intersecting straight (vertical, horizontal, and angular) or curved guide lines used to structure content. The grid serves as an armature on which a designer can organize graphic elements in a rational, easy to absorb manner. A grid can be use to organize graphic elements in relation to a page, in relation to other graphic elements on the page, or relation to other parts of the same graphic element or shape.
golden ratio
A common mathematical ratio found in nature that can be used to create pleasing, natural looking compositions in your design work. The formula for the golden section is a : b = b : (a+b) Expressed numerically, the ratio for the golden section is 1 : 1.618.
gillian paige michael pogoloff blair sly junjie ji
57
TYPES OF GRIDS Single column of text surrounded by margins. This is the simplest type of grid and is most used in novels or other prose.
one column
Multi column grids provide flexible formats for publications that have a complex hierarchy or that integrate text and illustrations. The more columns you create, the more flexible your grid becomes.
multicolumn
In addition to creating vertical zones with the columns of the grid, you can also divide the page horizontally. The body text will “hang” from a common line.
hang lines
Consistent horizontal divisions from top to bottom in addition to vertical divisions from left to right. In the 1950s and 1960s, Swiss graphic designers including Gerstner, Ruder, and Müller-Brockmann devised modular grid systems.
modular
Baseline grids serve to anchor most layout elements to a common rhythm.
baselines
Intuitive placement of elements that still conforms to the needs of the information. For example: web design.
hierarchy
58
organizing type
DIVIDING SPACE
spacing
The amount of unused space that exists between words, letters, and lines in text. Spacing provides a means to avoid overlapping shapes and letters in order to improve readability. Can be either fixed or proportional. In a fixed font, such as Courier, every character occupies the same amount of space. In a proportional font, such as Arial or Times New Roman(R), character width varies from letter to letter.
history
In the Nineteenth century, the multi-columned, multimedia page of newspapers and magazines challenged the supremacy of the book and its insular edge, making way for new typologies of the grid. By the 1910’s the page was no longer a fixed hierarchical window through which content might be viewed, but an expanse that could be mapped and articulated, a space extending beyond the edge. (Lupton)
gillian paige michael pogoloff blair sly junjie ji
59
Typographic syntax and communication have a language that must be learned to understand typographic design. Syntax is the connecting of typographic signs to form words and sentences on the page. The elements of design – letter, word, line, column, and margin – are made into a cohesive whole through the use of typographic spacing, clear visual hierarchy, and grid systems. (Carter, Day, Meggs)
syntax
A three-column by three-row structure is the format for exploring texture and composition. This philosophy is also known in photography and design as the “rule of thirds” and states that important pieces of information should be situated at the intersection of these divisions. This simple grid system provides a wide range of variation for exploration within a controlled system of organization.
using grids
60
organizing type
WHITE SPACE
gillian paige michael pogoloff blair sly junjie ji
61
As seen in the page opposite, abundant use of white space can give a feeling of sophistication or elegance to a design or layout.
abundant
Space between smaller elements: lines, letters, and words, or between caption and an image.
micro
White space used to lead a reader from one element to another. It is added to the composition to better emphasize or structure information.
active
Passive white space is simply the empty space around the outside of the page or blank areas inside the content.
passive
62
organizing type
HIERARCHY
cues
Each level of the hierarchy should be signaled by one or more cues, applied consistently across a body of text. Cues can be spatial (indent, line spacing, placement) or graphic (size, style, color). Infinite variations are possible.
redundancy
Writers are trained to avoid redundancy as seen in the expressions “future plans” or “past history.” In typography, some redundancy is acceptable, even recommended. For example, paragraphs are traditionally marked with a line break and an indent, a redundancy that has proven quite practical, as each signal provides backup for the other. To create an elegant economy of signals, try using no more than three cues for each level or break in a document.
emphasis
Emphasizing a word or phrase within a body of text usually requires only one signal. Italic is the standard form of emphasis. There are many alternatives, however, including boldface, small caps, or a change in color. A full-range type family such as Scala has many weight and style variations designed to work together. You can also create emphasis with a different font. If you want to mix font families, such as Scala and Helvetica, adjust the sizes so that the x-heights align. (Lupton)
gillian paige michael pogoloff blair sly junjie ji
63
BALANCE
A composition is similar in arrangement and visual weight on both sides. Also called formal balance.
symmetrical
A composition is balanced in visual weight but is not symmetrical in arrangement. Also known as informal balance.
asymmetric
A radial composition is simply a composition that radiates from a center point to create balance.
radial
5
T TY TYP TYPO T Y POG T Y P OG R T Y P OG R A T Y P OG R A P T Y P OG R A P H Y P OG R A P H E
T Y P OG R A T Y P OG R A P T Y P OG R A P H Y P OG R A P H E P OG R A P H E R OG R A P HE R S G RA P H E R S R APHE R S A PHE R S P HE R S HERS ERS RS 68
early typographers
77
modernism
83
digital revolution
88
contemporary typographers
T TY TYP T Y PO T Y P OG T Y P OG R T Y P OG R A T Y P OG R A P T Y P O G R A PH T Y P O G R A P HE T Y P OG R A P HE R TYPOG R A PH ERS Y P OG R A P H E R S P OG R A P H E R S OG R A P H E R S GRA P H E R S RAPHE R S A PH E R S PHE R S HE R S ERS RS S
5
kendre mcnulty stephen minervino thomas crocker meredith haake
67
TYPOGRAPHERS
Typographers have played an important role in the evolution of design. This section will provide a list of influential typographers, highlighting several of those who made significant contributions to typography. Typographers began by emulating the handwriting of scribes, then moved into type only producible by type foundries and now type is moving back full circle to the point where anyone can create type. Much like how anyone could train to be a scribe, now everyone has access to the ability to create typefaces of their own. There are four subsections representing periods that correspond to this circle of how type is and was created and how the advancements in technology affected the typography of that period.
early typographers modernism digital revolution contemporary typographers
68
typographers
EARLY TYPOGRAPHERS
johannes gutenberg nicolas jenson francesco griffo claude garamond william caslon john baskerville giambattista bodoni firmin didot
Typography was originated with the invention of the Gutenberg press, and movable type. As time progressed, early printers progressed from emulating handwriting to producing typefaces that were specifically for print.
kendre mcnulty stephen minervino thomas crocker meredith haake
69
JOHANNES GUTENBERG (1395 - 1468)
Gutenberg was a German craftsman and inventor of the moveable type printing press, along with methods of creating the type based on matrix and hand mould. Born in 1395 in the German city of Mainz, he worked as a blacksmith, goldsmith, and then later printer and publisher. Gutenberg’s experience in the metal crafts provided him with the necessary knowledge to produce the movable type. His invention allowed for books to be mass produced, setting off a new era in mass communication. Gutenberg, together with scribe Jenson, developed and cut the first typeface. The Black Letter font, it was meant to emulate the style of handwritten fonts from the scribes of the time. Gutenberg’s most known work besides of his press invention was the Gutenberg Bible.
johannes gutenberg nicolas jenson francesco griffo claude garamond william caslon john baskerville giambattista bodoni firmin didot
70
typographers
NICOLAS JENSON (1420-1480)
johannes gutenberg
nicolas jenson francesco griffo claude garamond william caslon john baskerville giambattista bodoni firmin didot
Jenson was the creator of Roman Type, the first typeface to be based on typographical principles rather than based off of old, handwritten manuscripts. After working at the French Royal Mint, he opened a printing shop, and began to produce work under his signature Roman style. His work is considered to be the break from Black Letter to Roman. The high success of Jenson’s printing shop was due to the number of presses that could be run simultaneously.
kendre mcnulty stephen minervino thomas crocker meredith haake
71
francesco griffo (1450–1518)
Griffo followed the footsteps of Nicolas Jenson, making improvements on the Roman type, and pushing it farther from the handwritten Black Letter. Griffo is considered to be the first modern type designer, as he cut type specifically for the craft of printing, rather than as a replacement for handwriting. His most important contribution was the invention of italics for the Venecian publisher Aldus Manutius.
johannes gutenberg nicolas jenson
francesco griffo claude garamond william caslon john baskerville giambattista bodoni firmin didot
72
typographers
claude garamond (1490 – 1561)
johannes gutenberg nicolas jenson francesco griffo
claude garamond william caslon john baskerville giambattista bodoni firmin didot
Garamond, a French publisher and typographer whose first works were Greek typefaces, based off of the handwriting of the King’s librarian. Shortly afterwards, he moved away from handwritten faces, and produced his now famous Roman style type. His work became extremely influential, spreading throughout Europe in the 1540’s. Many of his typefaces have remained in use in one way or another to the present day.
kendre mcnulty stephen minervino thomas crocker meredith haake
73
william caslon (1692 - 1766)
Caslon, an engraver, gunsmith, type founder, and type designer, was given the task of cutting type punches for various presses in London when printer John Watts became aware of his work. In 1734, Caslon’s first specimen sheet was issued displaying his roman and italic types in 14 different sizes. He based his designs on the Dutch old style. His types eventually spread all over Europe and the American colonies, where one of his types was used in the first printed version of the United States Declaration of Independence. In the century after Caslon’s death, his types fell out of favor, but his designs influenced others such as John Baskerville and are the predecessors of typeface styles: Transitional and Modern.
johannes gutenberg nicolas jenson francesco griffo claude garamond
william caslon john baskerville giambattista bodoni firmin didot
74
typographers
john baskerville (1706-1775)
johannes gutenberg nicolas jenson francesco griffo claude garamond william caslon
john baskerville giambattista bodoni firmin didot
Baskerville, an English businessman in japanning and papier-mâchÊ, is best remembered for his work in printing, paper production, ink production, and typography. He developed a technique that produced a smoother whiter paper, which showcased his strong black type. Baskerville’s type was created by refining the forms of previous designers. The designs were wider and had more of a contrast between thick and thin strokes. This gave his type a great lightness and color. These typefaces embody the transition between old style and neoclassical (modern) designs, and they incorporate some characteristics of each.
kendre mcnulty stephen minervino thomas crocker meredith haake
75
giambattista bodoni (1740-1813)
Bodoni was an engraver, printer, publisher and type designer. Among his accomplishments, Charles III of Spain named Bodoni his court typographer in 1782. Bodoni had many publications including Manuale Tipografico, which contains 100 roman, 50 italic and 28 Greek minuscule types. Later his wife completed his entire life works by publishing Manuale Tipografico in two volumes with contents including roman, Greek, gothic, Asian and Russian types, in addition lines, borders, symbols, numbers and musical notation. Bodoni first took inspiration from the type designs of Pierre Simon Fournier and later came to admire John Baskerville’s works. Most significantly, Bodoni and Firmin Didot developed a style of type called New Face. This style uses letters that are cut in such a way as to produce a strong contrast between the thin and thick parts of the letters’ bodies. It also uses vertical rather than oblique shading. The Bodoni Museum opened in Parma, Italy in 1963.
johannes gutenberg nicolas jenson francesco griffo claude garamond william caslon john baskerville
giambattista bodoni firmin didot
76
typographers
firmin didot (1764-1836)
johannes gutenberg nicolas jenson francesco griffo claude garamond william caslon john baskerville giambattista bodoni
firmin didot
He invented the Stereotype method of printing. He was part of a large printing family; the Didots were a French family, beginning with Francois Didot. Firmin established the Modern typefaces, using extreme contrast between thin and thick strokes. His legacy stays in many modern fonts.
kendre mcnulty stephen minervino thomas crocker meredith haake
77
MODERNISM
In Germany there was much development in sans-serif typefaces as a revolt against the ornate lettering of the popular Black Letter styles, which lead to sans-serif typefaces based on geometric forms. This lead to Modernism and many different styles: Gothic, Grotesque, Doric, Linear, Swiss and Geometric.
robert besley paul renner eric gill jan tschichold max miedinger
78
typographers
ROBERT BESLEY (1794 - 1876)
robert besley paul renner eric gill jan tschichold max miedinger
Besley was a civic activist, printer and typographer. He made his start in his family firm and later worked at and became the head of the Fann Street Foundry in London. He designed the popular slab-serif typeface Clarendon, which became the first registered typeface in 1845. The letterforms in this typeface represented a significant change from other slab-serif fonts at the time. While maintaining the distinct features of slab-serif typefaces, Besley’s new design was more refined. This typeface was extremely popular for early commercial printers because it is distinct and striking but possesses a very graceful outline.
kendre mcnulty stephen minervino thomas crocker meredith haake
79
paul renner (1878 - 1956)
Renner is a German typographer and friend of Jan Tschichold, who was also a strong advocate of the Bauhaus movement and believed in functional simplicity. His most well-known font, Futura, encompasses the form-follows-function ideals. This typeface was important because it would start the push towards more modern roman lettering in Germany. The geometry of Furtura’s font would be the starting point for many typefaces to come. Renner also designed two other fonts worth of mention in his career: Plak and Tasse.
robert besley
paul renner eric gill jan tschichold max miedinger
80
typographers
eric gill (1882 - 1940)
robert besley paul renner
eric gill jan tschichold max miedinger
Gill started to train as an architect in London in 1900, where came under the influence of Edward Johnston and began taking classes in calligraphy and masonry. He then pursued calligraphy, letter-cutting, and later masonry. Gill developed what is now known as the Gill Sans typeface based on Johnston’s London Underground sans-serif typeface. Of his typefaces, Gill hoped to create the most legible font of his time. He took it upon himself to perfect this typeface. His most well known fonts are Gill Sans, Joanna and Perpetua.
kendre mcnulty stephen minervino thomas crocker meredith haake
81
jan tschichold (1902 - 1974)
Jan Tschichold developed a love for ornamental writing, script and old typefaces after attending the World’s Fair for Books and Graphics in 1914. These ideals shifted from artistry structure and simplicity in 1923 when Tschichold decided to pursue typographic design. He was influenced by the Bauhaus style and spent much of his career focusing on themes like how typefaces are arranged on a page and how a book title is constructed. His book The New Typography encompasses these ideals. Tschichold believed that “the cure for typography lay in abandoning rules, adopting symmetrical setting, and the exclusive use of sans serif typefaces.” He would later stray once again from these ideals back to the classical approach as the head of typography for Penguin Books.
robert besley paul renner eric gill
jan tschichold max miedinger
82
typographers
max miedinger (1910 - 1980)
robert besley paul renner eric gill jan tschichold
max miedinger
At the age of 16, Miedinger apprenticed under Jacques Bollman, a Swiss book printer. During this apprenticeship from 1926-1930, he trained as a typesetter, and later worked for ten years as the typographer for global department stores. Edouard Hoffman commissioned Miedinger to create a typeface for the Swiss type Type Foundry Haas for their advertisements and visually printing brochures. This font, Helvetica, has become the most widely used font in the world.
kendre mcnulty stephen minervino thomas crocker meredith haake
83
DIGITAL REVOLUTION
The introduction and success of the personal computer allowed for designers to take the clean design of modernism, destroy it, and reassemble it in a new visual language.
wim crouwel matthew carter zuzana licko emigre
84
typographers
wim crouwel (1928 -Present )
wim crouwel matthew carter zuzana licko emigre
Crouwel is a Dutch typographer and graphic designer famous for designing the New Alphabet, a typeface working within the limitations of the phototypesetting equipment and cathode ray tubes. This typeface contains only horizontal and vertical strokes, allowing for accurate display on these limited devices. He is one of the founders of the design studio Total Identity, and in 2009 won the Gerrit Noordzij Prize, awarded to designers for contributions to the world of typography, type, and education.
kendre mcnulty stephen minervino thomas crocker meredith haake
85
matthew carter (1937 -Present )
Born in London, Carter was one of the pioneer designers for web fonts, designing the widely used fonts Verdana and Georgia. He worked through the transition from physical type to digital, and has worked for both Apple and Microsoft designing font. He is still working today, and in 2010 he was named as a Macarthur Fellow for his work. He has a long list of fonts to his name, seven of which are featured in the Museum of Modern art, having been acquired in 2011.
wim crouwel
matthew carter zuzana licko emigre
86
typographers
zuzana licko (1961 -Present )
wim crouwel matthew carter
zuzana licko emigre
Licko is a typeface designer based out of the San Francisco Bay Area who was born in 1961 in Bratislava, Czechoslovakia. Licko came to the United States with her family when she was a child. She studied architecture, photography and computer programming until finally earning a degree in graphic communications at Berkeley ‘s University of California. Licko’s father was a bio-mathematician at the University of California, San Francisco, and got her involved to help him with with data processing with computers during summer. When she first started attending the university, her goal was to earn a degree in architecture but she then changed to a visual studies major because she believed architecture was too similar to going to business school. While at Berkeley, Licko took a calligraphy class, which happened to be her least favorite due to the fact that she had to write with her right hand even though she was left handed. This experience later influenced her when she started working on type design, which was more computer-based.
kendre mcnulty stephen minervino thomas crocker meredith haake
87
emigre (1984 -Present )
In the mid-1980s, Zuzana Licko and her husband Rudy VanderLans founded the magazine Emigre, also known as Emigre Graphics. Emigre was then created in 1984. This magazine designed and distributed original fonts under the direction of its editor, VanderLans. Licko was responsible for many successful Emigre fonts. Emigre was also created, apart from adding new typefaces as a form of content, to share and publisize Licko’s typefaces with other designers. With the advance in technology, Licko moved from bitmap to high-resolution and based the newer designs on the ones initially created for dot matrix printers. In the mid-1990s, Licko worked on two notable revivals: Mrs Eaves, based on Baskerville, and Filosofia, based on Bodoni. Both are Licko’s personal interpretations of their historical models and each features extensive ligatures. Mrs. Eaves was actually named after John Baskerville’s lover and is also a kind of revival of Baskerville typeface but somewhat stylized. Along with ligatures, Licko stylized Baskerville through the use of small caps or “petite caps”.
wim crouwel matthew carter zuzana licko
emigre
88
typographers
CONTEMPORARY TYPOGRAPHERS
neville brody stephen farrell eric olson hoefler & frere jones jonathan hoefler tobias frerejones
The popularity of the Internet, online blogs and digital distribution has provided a new home for many individuals and small organizations to create/develop their own type foundries. While the increasing number of typographers and type foundries has made it virtually impossible to be familiar with every typeface design in publication, it is important for a designer to be well versed in the styles, uses and origins of typography, type foundries, type designers and their corresponding typefaces.
kendre mcnulty stephen minervino thomas crocker meredith haake
89
neville brody (1957 -Present )
Brody is a globally celebrated designer, brand strategist, typographer, and art director. He is also founder of the Research Studios network, and in addition to contributing and lecturing to a range of cultural and educational initiatives, he works both alongside designers and independently on private and commercial projects. Born in Britain, studied graphic design at the London College of Printing. He designed record covers for Fetish Records and Still Records. Brody eventually became art director of The Face, a British style magazine. From 1983 to 1990 he provided art direction for several other magazines like City Limits, Arena, Per Lui & Lei (Italy), and Actuel. He founded his own London-based design practice, The Studio, which worked on several corporate identities and fashion projects for clients including Nike, the Dutch Postal Service and the German cable channel Premiere. Some of Brody’s popular typefaces are Arcadia, Industria, Insignia, FF Blur, FF Pop, FF Gothic, and FF Harlem. He is also a partner of FontShop International, FontWorks, and founding editor of the digital magazine FUSE.
neville brody stephen farrell eric olson hoefler & frere jones jonathan hoefler tobias frerejones
90
typographers
stephen farrell
neville brody
stephen farrell eric olson hoefler & frere jones jonathan hoefler tobias frerejones
Farrell is recognized for his graphic design work as he is for his partnerships with authors in “designing fiction”. He is the principal of Slip Studios and an Associate Professor and Chair of the Visual Communication department at the School of the Art Institute of Chicago. His work comes from a strong background in typography, but he joins it gracefully with the visual language of diagrams, photographs, and diverse distressed but animated marks. He makes rubbish look beautiful. The work feels like there is always a controlled and precise handon it: a designer’s hand. Farrell’s studio has strived to bridge the worlds of literature and design. His most inspiring work is the novel he created with Steve Tomasula, VAS: An Opera in Flatland. The book has been explained by the publishers as: “Printed in the colors of flesh and blood—a hybrid image-text novel—shows how differing ways of visualizing the body produce various stories of history, gender, politics, and, most importantly, the literature of who we are.” It is an astonishing piece of writing and design.
kendre mcnulty stephen minervino thomas crocker meredith haake
91
eric olson
Olson is the principal and leading designer of the Process Type Foundry. Print magazine named him as one of the New Visual Artists for 2004. The Process Type Foundry, which was established in 2002, is a type design studio housing the retail and custom typefaces of Eric Olson. The goal of the studio is to offer a variety of custom and retail typefaces for contemporary designers with a specific emphasis on rigorous full-featured OpenType fonts. Custom clients include the Design Institute at the University of Minnesota, General Motors, the Walker Art Center and Metropolis magazine. Olson taught typography at the College of Art and Design in Minneapolis, worked as a designer at the Walker Art Center and had an assistant design fellowship at the University of Minnesota Design Institute. Olson was originally from Minneapolis, but currently resides in Reading England.
neville brody stephen farrell
eric olson hoefler & frere jones jonathan hoefler tobias frerejones
92
typographers
hoefler & frere (1999 -Present )
neville brody stephen farrell eric olson
hoefler & frere jones jonathan hoefler tobias frerejones
Since 1989, Jonathan Hoefler and Tobias FrereJones have aided some of the world’s leading publications, corporations, and institutions to improve their distinctive voice through typography. Since their collaboration, the two have worked together on projects for The Wall Street Journal, Martha Stewart Living, Nike, Pentagram, Esquire, GQ, The New Times, Business 2.0, and The New York Times Magazine. Their work contains some of the world’s most renowned designs, typefaces marked by both high performance and high style. In 2004, The Hoefler Type Foundry entered its sixteenth year as Hoefler & Frere-Jones. H&FJ remains to work with brand leaders in every sector and develops original typefaces and licensing fonts in its library of more than thousand designs. H&FJ publishes fonts exclusively through its NY sales office and its web site at typography.com.
kendre mcnulty stephen minervino thomas crocker meredith haake
93
jonathan hoefler (1970 -Present )
Jonathan Hoefler is an armchair type historian and typeface designer that focuses in the design of original typefaces. I.D. Magazine named him one of the forty most influential designers in America. Hoefler’s publishing work contains award-winning original typeface designs for Rolling Stone, Harper’s Bazaar, The New York Times Magazine, Sports Illustrated, and Esquire; his institutional clients range from the Solomon R. Guggenheim Museum to the rock band They Might Be Giants. Possibly his best known work is the Hoefler Text family of typefaces designed for Apple Computer appearing now everywhere with the Macintosh operating system. His work has been displayed internationally, and is in the permanent collection of the Cooper-Hewitt National Design Museum (Smithsonian Institution) in NY. The Association Typographique Internationale presented Hoefler with its most prestigious award, the Prix Charles Peignot for outstanding contributions to type design in 2002. Hoefler and Frere-Jones’ partnership has awarded them profiles in The NY Times, Esquire, and Time.
neville brody stephen farrell eric olson hoefler & frere jones
jonathan hoefler tobias frerejones
94
typographers
tobias frere-jones (1970 -Present )
neville brody stephen farrell eric olson hoefler & frere jones jonathan hoefler
tobias frere-jones
After attaining his BFA in 1992 from Rhode Island School of Design, Frere joined Font Bureau, Inc. in Boston. Throughout his seven years as Senior Designer, he produced many of Font Bureau’s best known typefaces, like Poynter Oldstyle & Gothic and Interstate. In 1996 he became a professor at the Yale School of Art. In 1999, he left Font Bureau to starte working with Hoefler. Frere has produced over 500 typefaces for retail publication, custom clients and experimental research. He has worked for The Boston Globe, The NY Times, The Cooper-Hewitt Museum, The Whitney Museum, The American Institute of Graphic Arts Journal, and Neville Brody. He has also taught at Rhode Island School of Design, Yale School of Art, Pratt Institute, Royal College of Art, and Universidad de las Americas. His work has appeared in How, ID, Page, Print, and the Victoria & Albert Museum in London. In 2006, Frere became the first American to obtain the Gerrit Noordzij Prize, given by the Royal Academy of The Hague in honor of his unique contributions to type design, typography, and type education.
kendre mcnulty stephen minervino thomas crocker meredith haake
95
image Citations -upload.wikimedia.org/wikipedia/commons/3/33/ Gutenberg.jpg -upload.wikimedia.org/wikipedia/commons/0/0a/NJ.gif -studentpages.scad.edu/~kgrant24/Typography%20 site/pietro-bembo_web.jpg -upload.wikimedia.org/wikipedia/commons/3/31/ClaudeGaramond.jpeg -imgc.allpostersimages.com/images/P-473-488-90/65/6502/JGW6100Z/posters/english-william-caslon-engraving.jpg -luc.devroye.org/JohnBaskerville-Portrait.png -upload.wikimedia.org/wikipedia/commons/9/91/Bodoni-giambattista.png -www.100besttypefaces.com/bilder/045/firmin_didot_ www.jpg -www.old-print.com/mas_assets/full2/P1551869/ P1551869461.jpg -www.unostiposduros.com/wp-content/uploads/2008/09/zfoto-renner.jpg -www.fontbureau.com/media/images/historical/gill.jpg -image.linotype.com/cms/tschichold_portrait_ d12383i43.jpg -image.linotype.com/cms/miedinger_portrait_ d12338i48.jpg -resolver.kb.nl/resolve?urn=urn:gvn:NAGO01:TD03508&role=page&count=1&role=image&size=variable -tdc.org/about/carter.jpg -www.aiga.org/uploadedImages/AIGA/Content/Inspiration/aiga_medalist/MD_Licko_Van_Portrait_640.jpg -http://www.emigre.com/NImages/MenuFonts.GIF -static.dezeen.com/uploads/2012/11/dezeen_Neville-Brody-DandAD-education.jpg -www.saic.edu/media/saic/profiles/faculty/stephenfarrell/sfarrell_portrait.jpg -cdn.myfonts.net/s/ec/cc-200811/cover.jpg -www3.pictures.zimbio.com/gi/Tobias+Frere+Jones+2011+National+Design+Awards+V5phfLzeTw2l. jpg -i427.photobucket.com/albums/pp358/starspeak25/ Jan%202010/hoefler.jpg -typotalks.com/berlin/files/2011/01/frere_jones_2004. jpg
johannes gutenberg nicolas jenson francesco griffo claude garamond william caslon john baskerville giambattista bodoni firmin didot robert besley paul renner eric gill jan tschichold max miedinger wim crouwel matthew carter zuzana licko emigre neville brody stephen farrell eric olson hoefler & frere jonathan hoefler tobias frere-jones
undries
foundries type foundries
type foundries
6
pe foundries undries type foundr type foundries
type foundries
6
ype foundries type foun type foundries type foundries
type t
2
100 3
104 4
105
sdries
ries
the history of classificatiotn systems independent foundries
type styles vs. families vs. fonts font houses common typeface classifications free fonts
type foundries
type foun
type found
type foundries
type foundries
undries
foundries type foundries
type foundries
6
pe foundries undries type foundr type foundries
type foundries
ryan grady justin phillips maggie briggs melissa richardson
99
TYPE FOUNDRIES
We first see type foundries popping up in England in 1476 in conjunction with William Caxton’s introduction of the printing press and after the perfection of movable type by Johannes Gutenberg in 1458. London became the main hub for the printing industry, offering carvings in wood and metal. Type foundries within the printing press business began as minor sectors of the factory and grew into a high ranking trade. The type foundries we know today are companies that design and distribute digitized typefaces. Type designers have the option to freelance or sign with or own their own foundry. Foundries can also offer custom type services for businesses or specific projects. These foundries have provided designers, companies, and independents options for free or purchasable typefaces that enhance any project or presentation.
foundries
100
INDEPENDENT TYPE FOUNDRIES independent foundries
drawbacks
Finding quality fonts in 2013 is a different monster than it was just five years ago. With websites like dafont.com and fontstruct.com any one who needs type can browse the web and choose fonts to their liking. As far as lucrative fonts go, large type foundries have the capability to create multiple high quality font families, and can control how those fonts are distributed. Despite this saturation of fonts available, independent foundries still find a place to thrive in the world of type. There are drawback to creating your own independent foundry. Usually there is a very small number of people that have to complete tasks normally done by specialists. You have to market and brand your family and foundry like a graphic designer would. You would also have to take care of all the transactions and bookkeeping. In theory you would get the majority of profits, but there would have to be profits in the first place. To avoid independent foundry complications, you could sign on with a large established foundry. However there is the possibility of your font family becoming lost among the many typefaces the foundry is distributing. Also the partnership would be a closed system, so you couldn’t bring on other designers to work on projects. You could act as a foundry in name only and sign on with a distributor to get your font family out into the world. That way you are able to still show your work on a website and be your own company. Again the is the problem of competing with other fonts and typefaces within the same distributor, not too mention priority issues.
ryan grady justin phillips maggie briggs melissa richardson
101
COMMERCIAL TYPE (2004)
Commercial Type is the independent foundry founded by Christian Schwartz & Paul Barnes. Their fonts range from functional to fun, having variety in a relatively small list of typefaces.
commercial type latinotype lost type co-op
foundries
102
LATINOTYPE (2007)
commercial type
latinotype lost type co-op
Latinotype is a digital type foundry based in Concepcion, Chile. There goal is to create new quality typefaces that mix South American influences. The typeface featured here is Renia Sans Pro.
ryan grady justin phillips maggie briggs melissa richardson
103
LOST TYPE CO-OP (2011)
Lost Type Co-Op is a pay as you want type foundry, featuring a number of type artists and graphic designers. You have the option to name your price of a font even if it’s $0. It was originally founded by Riley Cran and Tyler Galpin.
commercial type latinotype
lost type co-op
foundries
104
FONT HOUSES
overview
digital revolution
One cannot talk about Type Foundries without also discussing the role of Font Houses. While Foundries often both create and sell their own original typefaces, a Font House focuses on the distribution of typefaces from numerous Foundries and independent designers. While a foundry may provide unique and specific typefaces, a Font House will often serve as a one-stop-shop for designers and type users everywhere.
Font Houses have risen in popularity and number with both the increasing prevalence of internet shopping and the rapidly growing number of fonts on the market. Both of these factors are effects of the digital revolution, no longer does one need the physical tools, materials, and craft skills that were once required to produce the movable type of the printing press. Leading Font Houses include Adobe, Fonts.com, and Linotype.
ryan grady justin phillips maggie briggs melissa richardson
105
FREE FONTS
Free are fonts are free given away by their designer and can be used by anyone. Free fonts are used in webpages, applications, PDFs, and books(font squirrel). As Ellen Lupton has stated in her Free Font Manifesto, “Like open source software, the freedom of the fonts…is made explicit through their licensing, which allows other people to not only use the fonts but to modify them (granted that they change the name of the typeface if they alter its design).”A font may not qualify as a free font if the font’s foundry has “black listed’ the font.
distribution
In the typography world, free fonts and free font accessibility is topic for debate. Some typographers like Ellen Lupton believe some “good” fonts should be released to the public to benefit not only the typographer or designer economically, but to benefit the whole world by giving font to other cultures. This does not mean that all fonts should be free and typographers need to be supported by purchased fonts.
debate
sources
SOURCES Bosler, Denise. “Chapter 2 Letter.” Mastering Type: The Essential Guide to Typography for Print and Web Design. Cincinnati, OH: F+W Media , 2012. 242-26,27. Print. <http:// site.ebrary.com/lib/ncsu/ docDetail.action?docID=10686409&p00=mastering%20type>. Bonneville, Douglas. “Best Practices of Combining Typefaces.” Smashing Magazine. A Smashing Media Company, 4 Nov. 2010. Web. 19 Sept. 2013. Boulton, Mark. “Chapter 13, Hierarchy.” Designing for the Web. Five Simple Steps, 2010. Web. 23 Sep. 2013. <http://designingfortheweb.co.uk/book/part3/ part3_chapter13.php>. Bringhurst, Robert. “3 Harmony & Counterpoint.” The Elements of Typographic Style. 2nd Ed. Hartley & Marks Publishers, 2002. 350-48. Print. “Commercial Type.” Commercial Type. N.p., n.d. Web. 22 Sept. 2013. <http:// commercialtype.com/>. Chimero, Frank. “Type Study: Typographic Hierarchy.”TypeKit. Adobe, 17 Mar 2011. Web. 22 Sep 2013. <http://blog. typekit.com/2011/03/17/ type-study-typographic-hierarchy/>.
Cullen, Kristin. “Typesetting Factors.” Design Elements, Typography Fundamentals : A Graphic Style Manual for Understanding How Typography Affects Design. 1st . Osceola, WI: Rockport Publishers , 2012. 161-114. Print. Felici, James. “Chapter 3 About Typefaces.” The Complete Manual of Typography. 1st Ed. Frank Romano. Adobe Press, 2003. Print. “Frequently Asked Questions.” N.p.. Web. 23 Sep 2013. <http://www. fontsquirrel.com/faq>. “Graphic Design Principles.” Graphic Design Principles. N.p., n.d. Web. 15 Sept. 2013. “History of Printing.” History of Printing. Print Local, n.d. Web. 23 Sept. 2013. Humphrey, Matt. “Design Principles: Proximity.” User Experience and Design. Forum One, 27 May 2010. Web. 21 Sep 2013. <http:// forumone.com/blogs/post/ design-principles-proximity>. Knight, C., and J. Glaser. “The Power of Typography.” The Power Of Typography — Creating Exciting And Unusual Visual Hierarchies. Smashing Magazine, n.d. Web. 15 Sept. 2013.
N.d. Infographic. ePUBFWeb. 20 Sep 2013. <http://i.stack. imgur.com/ePUBF.png>. Lawler, Brian. “Adobe.” Print Publishing Technical Guide. Adobe Inc, n.d. Web. 24 Sep 2013. “Lost Type Co-op.” Lost Type Co-op. N.p., n.d. Web. 22 Sept. 2013. <http://losttype. com/>. Lupton, Ellen. “Free Font Manifesto.”http://www. designwritingresearch.org/. N.p., n.d. Web. 23 Sep 2013. <http://www.designwritingresearch.org/free_fonts. html>. Matson, Seth. “Tracking, Kerning, and Leading?.”Matson Graphics. N.p., 28 01 2011. Web. 16 Sep 2013. <http://www. matsongraphics.com/ graphic-design-blog-huntington-beach/tracking-kerning-leading/tracking-kerning-and-leading>. Peters, Yves. “Styles, Weights, Widths - It’s All in the (Type) Family.” RSS. The Font Feed, 4 Feb. 2009. Web. 19 Sept. 2013.<http:// fontfeed.com/archives/ styles-weights-widthsit%E2%80%99s-all-in-thetype-family/>. “Regia Sans Pro.” Latinotype. N.p., n.d. Web. 22 Sept. 2013. <http://latinotype.com/>.
Schwartz, Christian. “Why Did I Start a Type Foundry? | I Love Typography, the Typography and Fonts Blog.” I Love Typography RSS. N.p., n.d. Web. 22 Sept. 2013. “Select Your Language.” Justified Type. Fonts.com, n.d. Web. 22 Sept. 2013. <http://www.fonts.com/ content/learning/fontology/ level-2/text-typography/ justified-type>. “Select Your Language.” Rags, Widows & Orphans. Fonts. com, n.d. Web. 22 Sept. 2013. <http://www.fonts. com/content/learning/fontology/level-2/text-typography/rags-widows-orphans>.
Snider, Lesa. “Design Basics-The Proximity Principle.”Graphic Design & Development. Macworld, 1 Sep 2009. Web. 22 Sep 2013. <http://www.macworld. com/article/1142240/designtipsprox.html>. “The Basics of Typography.” Six Revisions RSS. Design Instruct, n.d. Web. 22 Sept. 2013. <http://designinstruct. com/tools-basics/the-basics-of-typography/>.
“Typography: Kerning, Leading and Tracking.” MM Print. MM Print, 01 08 2011. Web. 16 Sep 2013. <http://www.mmprint.com/ blog/2011/typography-kerning-leading-tracking/>. “Typographic Widows and Orphans.” Magazine Designing. N.p., n.d. Web. 22 Sept. 2013. <http://www. magazinedesigning.com/typographic-widows-and-orphans/>.
“The Chicago Manual of Style Online: Appendix A.” The Chicago Manual of Style Online: Appendix A. N.p., n.d. Web. 22 Sept. 2013. <http://www.chicagomanualofstyle.org/15/appA_ KeyTerms.html>.
WEBSITES http://www.smashingmagazine.com/2013/04/17/making-sense-type-classification-part/ http://www.infor.uva.es/~descuder/docencia/IG/typeface_classifications.pdf http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/ http://www.fonts.com/content/learning/fontology/level-1 http://fontfeed.com/archives/styles-weights-widths-it%E2%80%99s-all-in-the-type-family/ http://smad.jmu.edu/shen/webtype/facefontfamily.html http://www.fonts.com/content/learning/fyti/typefaces/super-families http://www.designishistory.com/1450/type-classification/ http://www.lcuch.com/picnews.asp?id=13 http://www.smashingmagazine.com/2010/05/18/the-beauty-of-typography-writing-systems-and-calligraphy-of-the-world/ http://jpm.liuxue51.net/content.aspx?Id=68 www.alistapart.com/article/whitespace http://en.wikipedia.org http://www.identifont.com http://www.typography.com http://www.linotype.com http://typophile.com http://www.nndb.com http://people.ku.edu
this book the type a graphic prime err was created at nc state university college of design in two thousand and thirteen
primary typefaces are freight micro & freight sans
designed by team light desaturated rainbow