Choreographing Words Creates The Typographic Dance.
Kendre McNulty
Contents 1
Anatomy of Letterforms
4
Terminology Styles & Weights Size & Scale Best Practices
2
Type Classification
14
Classification History Classifications Best Practices
3
Legibility & Meaning Creating Hierarchy Between Words Using Different Type Styles Detail of Use Best Practices
22
4
Organizing Type
32
Grids Types of Grids Dividing Space Hierarchy Balance Terms to Know
5
Typographers
50
Early Typographers Modernism Digital Revolution Contemporary
Type Foundries
6
Independent Type Foundries Type Foundries vs Font Houses Free Fonts
62
Ana t
1
a tomy
Anatomy of Letterforms 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. Suddenly the masses had access to the written works never before seen by common men. 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.
zack rasner blakely pritchard yemi hutcherson elisa huber
7
Size & 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 which was the first standardized measurement of type in the 18th Century.[1] 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 continue to be invented. 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.
The point system which was the first standarized measurement of type There are modular systems for sizing and scaling. Type sizes are based of the height and width. -
Height
The height of the type is measured from the cap height (tallest point on the letter) to the lowest descender. 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.
Width
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.
Scaling
The scale of point sizes within typefaces are related based on a specific ratio and proportion of height and width between each size. Originally the sizes within the point scale were referred to by names instead of sizes.[2] 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 of the typefaces.
8
anatomy
Style & Weights
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 (Bosler, 242-26). 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 semibold. 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.
Oblique, Bold and Small Caps
Some types, instead of having a true cursive complement, may have a slanted variation of the roman face, which 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. (Felici)There is bold, a thicker variation of the roman face, which also has a real version, harmoniously design 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. (Bosler 242-26,27)The same 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 (Bringhurst 350-48). Also, sans serif typefaces normally do not have small caps, compared to serif typefaces which normally do. Consequently, it is better to always use given designed weights and never forced ones, whether they are forced italics, bolds or small caps.
Roman & Italics
Roman types have vertical strokes perpendicular to the baseline and were inspired on the classical inscriptions on Trajan’s column in Rome. (Felici 42) 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 popular hand-lettering called cursiva humanistica, created what was later known as Italics 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. (Felici 42)
Real and Fake Bembo Italic
Comparison of Roman and Italic
Real and Fake Futura Italic
Comparison of Roman and Italic
Different weights in Akzidenz
zack rasner blakely pritchard yemi hutcherson elisa huber
9
Old-style, Transitional and Modern Typefaces 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. (Felici 45,46) 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. (Felici 45,46) 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. (Felici 45,46)
Goudy Old-Style Baskerville Transitional DidotModern Examples of Old-style, Transitional and Modern Typefaces
A A A Changes in brackets among styles
10
anatomy
Terminology 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 measured (such as the x-height)
Capline
A line marking the uppermost point in the capital letter of a font.
Meanline X-height
Imaginary 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. (Open Type by Robin Dodd, page 48)
Apex
The peak of an uppercase A.
Arm 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.
Ascender
Portions of a lowercase letter form that extends above the x-height of the typeface. (In some typefaces, it will extend to the capheight.)
Axis
An imaginary line drawn from top to bottom of a glyph bisecting the upper and lower strokes is the axis
Beak
Larger than a spur, the projection that extends from the endpoints of an uppercase L, T, or E. Axis
Bowl
The curved portion that encloses a counter
zack rasner blakely pritchard yemi hutcherson elisa huber
11
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. .
Crossbar Bracket
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
Barb
The small curved projected form the end of a letter.
Finial
A tapered curve at the end of some letters. Used especially in ornate flourishes.
Small Capital
Uppercase letters that are smaller than other uppercase letters of that particular font.
Ligature
The name of the combined letterform that’s created when there is no break of space between characters. Finial
Cross Stroke
The horizontal part of a letterform that intersects with the main vertical body
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.
Hairline Ear
The thinnest portion of the stroke. This only applies to fonts that used varying line weights.
12
anatomy
Leg
The lower angled stroke of a letter.
Link
Portion of the lowercase g that connects the loop to the bowl.
Loop
Curved lower portion of a lowercase g that encloses the bottom counter position. Leg
Serif
Small decorative lines added to the end of the stems and strokes.
Abrubt Serif
A serif that breaks away from the stem at a harsh angle.
Small Capital Uppercase letters that are smaller than other uppercase letters of that particular font.
Adnate Serif
A serif that flows smooth from or to the stem. Also known as a “Bracked� serif.
Spine
The main portion of the letter s curse left to right.
Spur Stem
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.
Terminal
The end of a stem or stroke, specifically without a serif.
zack rasner blakely pritchard yemi hutcherson elisa huber
13
Typography Anatomy Diagram
Best Practices Do
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 (Boulton).
Use different weights to solve a content problem when the content dictates it due to a different tone of voice, quotes and so on (Boulton). Maintain baseline relationships (Cullen 161-114). Choose roman (or regular) brackets, curly brackets, and parenthesis even if the
Don’t 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.
Typographic
2 Classification
Typographic Classification 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” (Alessio, Making Sense of Type Classification; www. smashingmagazine.com).
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.
daniel lunk trabazz bruce mackenzie hemker
17
Classification History 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. These three main groups are humanist, which is closely connected to calligraphy or script. Transitional, which helped bridge the gap between humanist and modern, has more abstract qualities and a less organic style. Lastly, Modern or Decorative referring to type that has a specific use in mind, very abstract, wide variety of letters and sometimes not legible in smaller point sizes. Many designers and printers wanted to understand these styles so they wouldn’t use them incorrectly. For example, Black Letter was popularized in Germany because of its very ornate style. Later, sans-serif type style was developed, and was used as a rebellion against the decorative style of Black Letter. http://www.designishistory.com/1450/type-classification/
The History of Classification Systems Many classification systems have been proposed but most are similar to one another with only small variations. The primary “official” classification system is the Vox-A-Typl system. It was put together in 1954 by Maxmilien Vox, and then adopted in 1962 by Association Typographique Internationale. This system classifies typefaces in 11 general categories. 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. (Alessio, Making Sense of Type Classification; www.smashingmagazine.com).
http://www.myfonts.de/
18
type classification
Terminology Type Style
known as a typeface, is a set of letterforms created by a typographer that share similar design characteristics .
Type Family
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.
Fonts
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.
Classifying Type
Serif
Serif typefaces include semi-structural details on its contained letterforms. 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.
Old Style
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.
daniel lunk trabazz bruce mackenzie hemker
19
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 of a transitional
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 and Didot are examples of Modern typefaces.
Slab Serif
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. Clarendon is a good example.
Blackletter
Blackletter typefaces 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.
Sans-serif
Sans-serif typefaces date back to the 5th century but did not gain broad acceptance until the 20th century. As the name implies, Sans-serif typefaces have no serifs. Many sans-serif typefaces were modeled after serif typefaces, but with their serifs removed.
Humanist
Humanist typeface was modeled after the Old Style typeface, but without the serifs. The stroke of a humanist font is fairly uniform.
20
type classification
Geometric
Geometric typefaces have letterforms that are modeled after geometric forms.
Script
Script typeface were based of letterforms made with a flexible brush or pen. Script typefaces were associated closely with strokes of handwritten forms.
Pixel
Decorative
Pixel typefaces were based on the pixels seen on the screen of computers.
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. (http:// www.designishistory.com/1450/type-classification/ )
daniel lunk trabazz bruce mackenzie hemker
21
Best Practices for Working with Different Classifications 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 of 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. 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.
vf k s qge lcyf xi k frsk h e zm gbwltghnil or qi vs c v d h r p n emf tka json yqex yf x m z c p o v i w t gtgl lehoh zfi rrukp z v e f g w l q k h c p s q s u w n y x mmetgvufnl ohozigerlcyefehm i frks v x f k v e p s k q v k t w e f r r z v c s p s k i n q q i wgem w g w l n y x rwqLEGIBILITY e f c u g l s m k v h r i i o h r y x f e q c l g o s u g l e f t k c i k h r t y x e f h r g l p o s o z e f v k q n y x p s i n h r k v g w l o zm zgewlnfi nsikm z e f m s o h r n e k i o q v t r m u g l s m t v r z q i o g w l p o h r q w p m u g l u c v t w n h r t c i o h r q z i y x e u m p tgpnlphnrornm q y x c g o u g n gzyf xe z m tm w yq xoetm w m i o u g t p th r s s m u no q 1
&
3
k v h o l h v e f rwq c ktgipsl oh zi y x e f g l k n h r u o s e f m v e f k v s k z e f v t s i n r k gxiw lgestghlyfl xokr qip l rwvq c wiqges ulcyfm h r h k y x e f h p g l s h r e f n k cyq o s e f k h r m k v o s z e f v x s i o n n z v k s i g w l n b t z v m m g w l s i v n z h r y x e f k m i o p g w l r q i o m u g l vhfqtdtpunph rh qitgrpecnl m o owxuzirscyq xtghpuMEANING l k q y x a j o oenzgfm w yf nxkm rwlekhtm s o n t m o t n y x e f c m p s z p z wtg l zgiwlphtiupr owgtztggpulpwllehohi zfitrru n h pnuhm m u n n o u n m t tpo m p
&
Legibility and Meaning In order for designers to create content that is comprehensible and easy to read, they use a variety of different strategies all based on relationships, including, 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 easily readable, and understanding the best practices of dealing with issues such as widows and orphans. Without having a good understanding of these techniques, it would be overwhelming for a reader to comprehend the content. Therefore, being able to utilize all of these techniques while designing content is crucial to the design process.
sarah price alyssa wallace josh barrett kelly fish
25
Creating Hierarchy Between Words
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 greatly enhance communication with the desired audience. 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. These subtle shifts 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.
The Rule of Proximity 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.
Using Different Type Styles
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. Font is the variation of type. Typeface is the design of the characters- the look of the letters and so forth. Style (or Typestyle) is the design of the characters of a type family. Essentially, it’s the same as a typeface, but on a much broader scope.
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.
legibility and meaning
26
Using Different Type Styles Fonts Convey Meaning First, let’s discuss how fonts convey meaning. Now, we can divide a font into three main partsweight, 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 make the text quieter and pull it backwards, with Roman being an acceptable middle-ground. Obviously, weight is a great way to portray emphasis. Use a darker weight around light weights and boom; emphasis. 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.
Weight effects how words are read. Light
Medium
Book
Bold
Italic
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. MUSIC ANALOGY
Width
Weight of the text is like changing the volume
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.
Italics and obliques adjust the tone Width is the tempo, It tells us how quickly or how slowly the type reads Typeface is like the mood of a song or someone’s voice
sarah price alyssa wallace josh barrett kelly fish
27
Typeface
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? Let’s take a look at Baskerville, for example. It’s a classic, old, 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.
DO I LOOK LIKE I AM SAYING IMPORTANT YET INTERESTING FACTS? Baskerville Old Face
DO I LOOK LIKE I AM HAVING FUN AND LIKE TO BE PLAYFUL WITH THE READER? Segoe Print
DO I LOOK LIKE IM MAKING MY WORDS POP OFF THE PAGE AT YOU? Goudy Stout
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 meaning- not just pretty text.
Creating a Song // Layout Volume : Weight Tone : Italics/Olibques Tempo : Width Mood : Typeface
legibility and meaning
28
Detail of Use Kearning Kerning is an adjustment of the space between two letters in order to give a word a more aesthetically pleasing appearance. 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.
Metric Kearning Metric Kerning- 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.
Optical Kearning 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.
Normal (0 degrees)
Metric Kearning
Optical Kearning
Kern Kern Kern
sarah price alyssa wallace josh barrett kelly fish
29
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. 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.
-100 -50 0 50 100
Tracking Tracking Tracking Tracking Tra c k i n g
Leading Leading is the amount of space between the lines of text. 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.
The distance between two lines line spacing
determines the leading.
legibility and meaning
30
Best Practices 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. The ideal line length according to Robert Bringhurst: -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.
When is a line too narrow?
How wide is optimal?
sarah price alyssa wallace josh barrett kelly fish
31
Ragging
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. 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.
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.
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.
Widows & Orphans Many sources have differing opinions as to what a widow and orphan is. 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. 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. 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.
A G OR
4 G N I Z NI E P Y T
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, ultimately 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.
junjie ji gillian paige michael pogoloff blair sly
35
Grids A grid is 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.
http://www.berlinandmauer.com/blog/on/the-golden-grid
The 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), based on the Fibinacci sequence. Expressed numerically, the ratio for the golden section is 1 : 1.618. The golden section can be used to create various grids and page formats. You can use the golden ratio to designate the size and placement of content areas and sidebars:
Above is an example of how the golden section can be applied to the layout of a web page.
36
organizing type
Types of Grids
Single Column
Multi Column
Single column of text surrounded by margins. This is the simplest kind of grid, but it can have slight variations by adjusting the size of the margins.
Multi column grids provide flexible formats forpublications that have a complex hierarchy or that integrate text and illustrations. The more columns you create, the more flexible your grid becomes. You can use the grid to articulate the hierarchy of the publication by creating zones for different kinds of content. A text or image can occupy
a single column or it can span several. You can also specify a column just for captions, annotations and/ or images.
Hang Lines In addition to creating vertical zones with the columns of the grid, you can also divide the page horizontally. Titles and the body text will “hang� from a common line.
http://thinkingwithtype.com/contents/grid/
junjie ji gillian paige michael pogoloff blair sly
Modular 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.
http://chanpory.com/
37
38
organizing type
Baseline Baseline grids serve to anchor most layout elements to a common rhythm. This is an extention of the modular grid design.
http://thinkingwithtype.com/contents/grid/
Hierarchical This grid uses intuitive placement of elements that still conforms to the needs of the information. For example: web design.
junjie ji gillian paige michael pogoloff blair sly
39
Dividing Space
Grid Systems: Principles of Organizing Type, Kimberly Elam
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.
Apple
Courier
Apple
Times
The “L� in Times New Roman does not take up as much space because it is not fixed like in the Courier example.
40
organizing type
History In the Nineteenth century, the multi-columned, multimedia page of newspapers and magazines challenged the supremacy of the book and its insular edge. This make 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)
Syntax & Communication 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 space, visual hierarchy, ABA form, and grid systems. (Carter, Day, Meggs)
Dividing Space Based on the Grid 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.
The first photo uses a central focal point. The second photo has a focal point using the rule of thirds.
junjie ji gillian paige michael pogoloff blair sly
http://www.alibony.com/graphics/def_rule_of_thirds.html
41
organizing type
42
Grouping Grouping is a way to navigate and therefore of critical importance in visual communication. Grouping permits an element to have an immediate visual relationship with another element in close proximity. Both similar and dissimilar elements can be grouped to create rhythm and repetition as well as larger areas of texture. The composition is simplified by grouping— whitespace or negative space is enhanced, and a stronger sense of visual order is created.
Negative Space Negative space, or white space, is the space that is not occupied by the compositional elements. It has a direct impact on how the viewer will perceive the composition.
No Grouping: Complex Negative Spaces
No Grouping: Simple Negative Spaces
In this ungrouped composition there are at least nine rectangles of negative space, as shown by the outlines, making the composition appear chaotic and visually uninviting.
In this grouped composition there are five rectangles of negative space as shown by the outlines. These spaces are not only fewer in numbers but also larger and , therefore, more visually pleasing.
junjie ji gillian paige michael pogoloff blair sly
43
Passive Whitespace
Active Whitespace
Types of White Space Micro Whitespace: Space between smaller elements: lines, letters, and words, or between caption and an image . Abundant Whitespace: Can give a feeling of sophistication for example: perfume packaging design. Active Whitespace: When whitespace is used to lead a reader from one element to another. It is added to the composition to better emphasize or structure information. Passive Whitespace: Empty space around the outside of the page or blank areas inside the content.
44
organizing type
Hierarchy Hierarchy literally means order, ranking, or sequence. Typographic hierarchy is utilized with the purpose of establishing an order of importance within the data, allowing the reader to easily understand and navigate the content, where a section begins and ends, and isolate certain information based on the consistent use of style throughout a body of text. Each level of the hierarchy should be signaled by one or more cues, applied consistently across a body of text. (White)
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. Weak visual hierarchies provide little or no guidance about what is important.
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)
Strong visual hierarchies guide visual and logical progression by showing what is important.
junjie ji gillian paige michael pogoloff blair sly
Balance Balance can create a hierarchy of subject matter within a composition.
45
“The point where the canvas is divided is treated like a fulcrum and objects are places on either side to create the illusion, or feeling, of balance.� (Teare)
Symmetrical A composition is similar in arrangement and visual weight on both sides. Also called formal balance. (illustration)
http://rockpaperink.com/content/article.php?id=23114.jpg
organizing type
46
Asymmetrical A composition is balanced in visual weight but is not symmetrical in arrangement. Also known as informal balance. (illustration)
Below: Asymmetrical balance is common in web page design.
http://jayce-o.blogspot.com/2010/11/ balance-in-graphic-design.html
Above: An example of asymmetrical balance in a movie poster.
http://www.designmeltdown.com/chapters/balance/
junjie ji gillian paige michael pogoloff blair sly
Radial A composition that radiates from a center point. (illustration)
http://tympanus.net/codrops/2011/09/13/developing-balance-in-web-design/
http://dominoyesmaybe.blogspot.com/2012/09/principals-of-design-1-balance.html
47
organizing type
48
Terms to Know Alley The space between two columns of set type; sometimes also called a column gutter or column margin.
Header One or more lines of text appearing at the top of every page.
Footer One or more lines of text appearing at the bottom of every page.
Gutter The space between two facing pages (inside margins). The term is sometimes used to refer to the space between two columns (see alley).
Margins The area from the edge of the paper to the boundary of the layout area of the page. Margins not only frame parts within pages, they also contain supportive elements (marginalia) such as running heads, folios, and captions. Jan Tschichold has pointed out that this complex series of column-to-margin ratios, based on the golden section, is found in numerous medieval manuscripts. When columns, margins, and their interrelationships are clear and appropriate to content, the result is a printed page of distinction. Every problem demands a fresh approach, yet an ordered unity that is responsive to the meaningful blend of form and counter form is always the goal.
http://tex.stackexchange.com/questions/55502/modern-book-design-margins-andtyped-area
junjie ji gillian paige michael pogoloff blair sly
Leading (Pronounced ‘ledding’) The amount of vertical space between lines of type. The distance from the baseline of one line of type and the baseline of another line of type immediately above or below it; also known as line spacing and usually measured in points.
http://fastexposure.wordpress.com/2012/05/25/visual-aesthetics-iii-basics-of-typography/
* For other helpful terms, see: http://www.proximasoftware.com/fontexpert/terms
49
typograp
5
aphers
Typographers Typographers have played an important role in the evolution of design. This section will provide you with 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. Below are four subsections representing periods that correspond to this circle of how type is and was created and to the advancements in the technology and typography of that period.
thomas crocker meredith haake kendre mcnulty stephen minervino
Early Typographers Typography began with the invention of the Gutenberg press, and movable type. As time progressed, early printers progressed from emulating handwriting to producing typefaces specifically for print.
Johannes Gutenberg (1395 - 1468)
A German craftsman, and inventor 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. His experience in the metal crafts gave him the necessary knowledge to produce the movable type. His invention set off a new era in mass communication, as it allowed for books to be mass produced. He and the scribe Nicolas Jenson developed and cut the first typeface. A Black Letter font, it was meant to emulate the handwritten style of the scribes of the time. He eventually produced the Gutenberg Bible, which is the work that he is most known for, outside of his invention itself.
Nicolas Jenson (1420-1480)
He was the creator of Roman Type, which was 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 in his signature Roman style. His work is considered the break from Blackletter to Roman. His printing shop was very successful, due to the number of presses that could be run simultaneously.
53
54
typographers
Francesco Griffo (1450–1518)
Followed in the footsteps of Nicolas Jenson, improving on Roman type, pushing it farther from the handwritten blackletter. 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 publisher Aldus Manutius.
Claude Garamond (1490 – 1561)
A French publisher and typographer. His 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.
William Caslon (1692 - 1766)
Caslon was an engraver, gunsmith, type founder, and type designer. When printer John Watts became aware of Caslon’s work, Caslon was given the task of cutting type punches for various presses in London. 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.
thomas crocker meredith haake kendre mcnulty stephen minervino
John Baskerville (1706 - 1775)
Baskerville was an English businessman in japanning and papier-mâché, but he is best remembered for his work in printing, paper and 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.
Giambattista Bodoni (1740 - 1813)
Bodoni was an engraver, printer, type designer and publisher. Among many accomplishments, Charles III of Spain named Bodoni his court typographer in 1782. One of Bodoni’s publications, the Manuale Tipografico, contains 100 roman, 50 italic and 28 Greek minuscule types, and was later completed by his wife. Most significantly, Bodoni and Firmin Didot developed a style of type called New Face. This style uses letters that are cut 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.
Firmin Didot (1764-1836)
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 remains in many modern fonts.
55
56
typographers
Modernism There was much development in sans-serif typefaces in Germany as a revolt against the ornate lettering of the popular Blackletter styles, which lead to sans-serif typefaces based on geometric forms. This lead to Modernism and to many different styles: Gothic, Grotesque, Doric, Linear, Swiss and Geometric.
Robert Besley (1794 - 1876)
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. http://adeinnelson.homestead. com
Paul Renner (1878 - 1956)
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. Furtura’s geometry would be the starting point for many typefaces there after. Renner also designed two other fonts in his career, Plak and Tasse.
http://people.ku.edu
thomas crocker meredith haake kendre mcnulty stephen minervino
57
Eric Gill (1882 - 1940)
Starting to train as an architect in London in 1900, Gill came under the influence of Edward Johnston and began taking classes in masonry and calligraphy. He then pursued calligraphy, letter-cutting, and later masonry. Based off of Johnston’s London Underground sans-serif typeface, Gill developed what is now known as the Gill Sans 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.
http://www.traditioninaction. org
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 return to a more classical approach as the head of typography forPenguin Books.
http://image.linotype.com
Max Miedinger (1910 - 1980)
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.
http://image.linotype.com
58
typographers
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 (1928 - Present)
A Dutch graphic designer and typographer. Crouwel is famous for designing the New Alphabet, a typeface working within the limitations of the cathode ray tubes and phototypesetting equipment. 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, which is awarded to designers for contributions to the world of type, typography, and education.
http://resources21.kb.nl
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.
http://www.fontblog.de
thomas crocker meredith haake kendre mcnulty stephen minervino
59
Zuzana Licko (1961 - Present)
Zuzana Licko is a typeface designer based out of the San Francisco Bay Area who was born in Bratislava, Czechoslovakia. Licko came to the United States when she was a child along with her family. She studied architecture, photography and computer programming before earning a degree in graphic communications at the University of California at Berkeley. At school, Zuzana 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. http://www.emigre.com
Emigre Graphics
In the mid-1980s, Zuzana Licko and husband Rudy VanderLans founded Emigre, also known as Emigre Graphics. The magazine, 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. Licko was initially exposed to Macintosh computers with the first release in 1984. Apart from adding new typefaces as a form of content, Émigré was also created as a way to share the typefaces with other designers that liked and wanted to use Licko’s creations. As technology advanced, she moved from bitmap fonts to high-resolution designs and based the newer designs on the ones initially created for dot matrix printers. 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”.
60
typographers
Contemporary 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.
Neville Brody (1957 - Present)
http://static.dezeen.com
Neville was born in Britain, and studied graphic design at the London College of Printing. He designed record covers for the independent labels Still Records and Fetish Records. Brody eventually became art director of The Face, a British style magazine. From 1983-1990 he provided art direction for several other magazines, including City Limits, a London weekly guide, Arena, a style magazine, Per Lui and 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 in 1987. Brody has designed several popular typefaces including Arcadia, Industria, Insignia, FF Blur, and FF Harlem.
Stephen Farrell
http://www.stationhill.org
Stephen Farrell is recognized as much 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 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.
thomas crocker meredith haake kendre mcnulty stephen minervino
61
Eric Olson
Eric Olsen is the principal and lead designer of the Process Type Foundry. He was named as one of the New Visual Artists for 2004 by PRINT magazine. 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 retail and custom typefaces for contemporary designers with a specific emphasis on rigorous full-featured OpenType fonts. Custom clients include General Motors, Metropolis magazine, the Walker Art Center and the Design Institute at the University of Minnesota. Eric taught typography at the Minneapolis College of Art and Design (MCAD), had an assistant design fellowship at the University of Minnesota Design Institute.
http://processtypefoundry.com
Tobias Frere-Jones (1970- Present)
After attaining his BFA in 1992 from Rhode Island School of Design, Frere-Jones joined Font Bureau, Inc. in Boston. Throughout his seven years as Senior Designer, he produced a number of the typefaces that are Font Bureau’s best known, including Interstate and Poynter Oldstyle & Gothic. Next he became a professor at the Yale School of Art in 1996, where he continues to teach typeface design on the graduate level. In 1999, he left Font Bureau to return to New York, where he started work with Jonathan Hoefler. Since their collaboration, the two have worked together on projects for The Wall Street Journal, Martha Stewart Living, Nike, Pentagram, GQ, Esquire, The New Times, Business 2.0, and The New York Times Magazine.
http://graphics8.nytimes.com
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 and now appears everywhere as part of the Macintosh operating system. http://graphics8.nytimes.com
Font FOUN
6
NDRIES
Font 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. Soon after, in 1530, Claude Garamond began producing fonts for printers after establishing the first metal type manufacturing factory-this establishment led to the official divorce of typographic design from its original attachment to printing presses. Garamond became a master type carver and his work was sought after by printing presses all around England. 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.
ryan grady maggie briggs melissa richardson justin phillips
65
Indepdendent Type Foundries 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. Christian Schwartz explains why he decided to open an independent foundry in this day and age—coming to the decision by outlining the advantages and disadvantages of going through a distributor or a larger foundry. Christian Schwartz was a typographer working in England in the early two thousands when he received and email from a man named Paul Barnes about a font Schwartz had previously created. The two developed a working relationship and after working on several projects together developed the font family of “Guardian”. They felt that their font family was unique and deserved special care in its release. They felt that this family could be the start of a foundry, but they were hesitant to go that route.
Large type foundries can create and distribute many different types of fonts. Its very difficult to start and maintain an independent type foundry. Consider Independent Type foundries for a personal and experiemtnal touch.
There are drawback to creating your own independent foundry. Usually there is a very small number of people (in the case of Schwartz’s story two 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. (Scwartz) 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. In the end Schwartz and Barnes decided to join the family of independent foundries. They aren’t the only thriving contemporary independent foundry. While browsing font foundries, consider independent font foundries for a more personal and experimental touch.
66
foundries
Commercial Type 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.
Latinotype Latinotype is a digital type foundry based in Concepcion, Chile. Their goal is to create new quality typefaces that mix South American influences. The typeface featured here is Renia Sans Pro.
Lost Type Co-Op Lost Type Co-Op is a pay as you want type foundry, featuring a number of type artists and graphic designers. It was originally founded by Riley Cran and Tyler Galpin. The font featured here is Klinic Slab.
ryan grady maggie briggs melissa richardson justin phillips
67
Type Foundries vs Font Houses 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 onestop-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.
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.
Font houses are a one stop shop for designers. Free fonts are availible for anyone to use or even modify. Some fonts should still be purchased to support typographers.
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.
Font Houses
Free Fonts
Independent
Adobe.com Linotype Fonts.com Myfonts.com Fontshop Veer
Fontsquirrel
House Industries Émigré Hoefler-Frere Jones T26 Thirstype FontHaus
Hypefortype.com Lost type co-op Fontstruct.com
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 was created by a Typography class at North Carolina State University as a primer for students. It contains all the basic information one would want to know about Typography and how to use it. The students research and generated the content that makes up this book. They designed the page layouts for the content, the divider spreads, the cover, the title and title page, the table of contents, and this colophon. This typogrpahy book was composed in Adobe Indesign. It uses the Freight type family, primarily FreightSans. The contents were printed on laser paper. The physical book was constructed using perfect binding. Published: North Carolina State University, College of Design October 2013 Chapter Designers: Joshua Barrett, Elisa Huber, Kender McNulty, Gillian Paige, & Melissa Richardson Cover & Additional Elements: Kendre McNulty