Behind The Letters by Simone Hummel

Behind the Letters Designing with Typography

Simone Hummel

Designed and Written Simone Hummel

Ontario College of Art and Design University GDES 2B06 Typography 2: Structures Derwyn Goodall Printed in Toronto, Canada. Bound by Don Taylor. Novemeber 2012.

TABLE OF CONTENTS What is Type

p.2-5

Typographic Recap Prehistoric Creation of Alphabets Movable Type Old Style Transitional Modern

p.6-21

Phase 1: Normative Studies Kerning Column Width Leading Tracking Alignment Ligatures Rags Hanging Punctuation Final Recommendation

Phase 2: Syntax Studies Study One Study Two Study Three

p.22-41

pg.42-59

Phase 3: Industry Examples

pg.60-73

INT

Introduction

WHAT IS TYPE?

TRO The Authors perspecive

on the purpose of typography and the intention of this book.

Introduction Typography is more than tool for communication. A tool serves a single purpose while typography serves multiple levels of communication. It continues the mood of a design while providing readable information. Typography when designed for display can carry the mood and message by itself. It is an essential componenet to Graphic Design because the best designs can fall short if the typography is off. In order to use typography effectively, a thorough knowledge about typeâ&#x20AC;&#x2122;s history and structure is required. The purpose of this book is to provide fellow designers and typographers with extended knowledge and ideas about type so that we can continue to serve the industry in a positive manor.

HISTORY OF

TYPO O

HISTORIC RECAP A brief historic overview of how symbol writing developed into our modern type.

Prehistoric Origin

Even though typography has evolved numerous

times, itâ&#x20AC;&#x2122;s original purpose still remains as a communicator of information from one person to the next. The earliest known paintings can be found within the caves of southern France and Spain that date back to the early Paleolithic and Neolithic era(15000-20000 BCE). These rudimentary paintings depict local animals and surrounding environments. There are opposing theories of their purposes but they all represent the early homosapiens desire to communicate and share information.

y the Bronze Era of 2000-1000BCE, increasing population requires a way or organizing and recording information. These early recording systems devices are referred to as proto-writing that include, various notches, knots, and tokens. In Middle Eastern Mesopotamia(present-day Iran) remains some of the earliest forms of writing called cuneiforms, pictographs representing words or syllables with similar sounds to the object depicted. The Mesopotamian king Hammurabi had a Steele carved with densely packed cuneiforms describing the expectations of behavior and the results of misconduct. With distinct rules, The Code of Hammurabi helped maintain his authority and organize society. From cuneiforms developed ideographs which substitute symbols and abstractions for pictures of events. A symbol of a star represented the heavens or a peace pipe represented peace. Native Americans, Egyptians, and ancient Chinese all used ideograms. However cuneiforms do have their limitations since every new idea requires a new symbol making it difficult to complete.

Image 1(Top)

Lascaux Cave Paintings. Image 2(Middle) : Egyptian Hieroglyphics Image 3 & 4(Bottom): Code of Hammurabi stele with close up of writing.

Image 5(Left)

Administrative tablet with cylinder seal impression of a male figure, hunting dogs, and boars, 3100â&#x20AC;&#x201C;2900 BCE.

Image 6(Left) A chart

showing the development of Ancient alphabets from Hieratic to Hebrew.

Alphabets The Development

For the Middle-Eastern Phoenicians, their commerce needed a writing system that could easily adapt new ideas as their sea routes lead them to new encounters. The Phoenicians developed early North Semitic alphabet of 22 abstract characters that represented consonant sounds instead of strictly images. As they traveled the seas, they spread their alphabet Westward to the Greeks and Romans. These cultures were quick to adapt and develop the system as seen in the chart. They applied geometric structure to the letter forms and converted a few characters to vowels. Their civilizationâ&#x20AC;&#x2122;s successful longevity (1-500CE) allowed their system to be widespread and adopted as a norm.

Image 7(Above) Roman capitals on ancient Roman Trajan columns.

Unifying Alphabets

By the middle of the 8th century, the Holy Roman empire was established by King Charlemange. He developed a strong interest in education for all levels of his society. With large variances in writing styles, it became difficult to read important documents. To restore legibility throughout his empire, Charlemagne became to standardize form and he did this by combining elements from Roman Trajan capitals and introducing his new miniscules. His scribes started by creating a consistent structureâ&#x20AC;&#x201C;one majuscule letter would start a sentence while miniscule letters would complete it. Miniscule letters would have a consistent height (now referred to as x-height) and were all placed along the same line(start of baseline) which allowed for smoother reading. As his empire expands, these standard letter structures are spread throughout Europe as well.

Image 8(Left) Front page

of the Book of Durrow using Charlemagneâ&#x20AC;&#x2122;s script.

King of the frank Charlemagne unified writing Script(Above) Modern

replica of Carolingian script, Omnia LT Std.

Black Letter

As Charlemagneâ&#x20AC;&#x2122;s script spread through Europe, it was adapted particularly quickly from around 1150 until the 1800â&#x20AC;&#x2122;s. During this time the calligraphic style developing in Germany is referred to as Black Letter or Gothic style. The term Gothic was first used to describe this script in 15th-century Italy, in the midst of the Renaissance, because Renaissance Humanists believed it was barbaric. Gothic was a synonym for barbaric. Characteristics

The Black Letter can be identified by its calligraphic appearance as it has thin strokes and very wide thicks. It has a hand written look and pointed terminals. Textura

Developed in Northern Europe 1100-1500, Textura is characterized by its condensed letter forms and with its angular terminals, it has been referred to appear like a picketed fence.

Rotunda

Developed in northeastern Europe 1100-1500. Rotunda has a rounder appearance because of its rounded terminals and wider letter forms.

Schwabacher

Developed in western Europe 1100-1500. Schwabacher retains some roundness but has elongated, pointed descenders and ascenders.

Movable Type Image 9(Above-Left)

The idea of movable type is admired for its diversity in the sense that it is easy to use, reusable, and is much faster than traditional manuscripts. By the mid fifteenth century, there were a few Germans experimenting in attempt to create movable type. Laurens Coster of Harlem was a block printer and started reusing his movable type by cutting out words and letters he used frequently. It was a start to movable type but it was preliminary and still limited. Then came a highly skilled engraver and metal worker named Johannes Gutenberg. He is often referred to as the Father of movable type and the printing press because of his numerous contributions to the development of type and printing.

Metal Type in Textura font.

Image 10(Above-Left)

Metal Type in Textura font.

Below are a few of Johannes Gutenberg’s inventions that contributed to the development of printing methods and technology. 1.The Printing Press

The mechanics derived from wine and cheese presses, it was essentially a large screw lowering & raising a plate which allowed for large body text to be printed multiple times. 2.Type Metal

Regular lead was too soft to hold it’s shape overtime so he created a unique alby of 80% lead, 15% tin, and 5% antimony that retained its shape during the heating and cooling process as well as during prints.

3. Mass Production of Letters

By creating a letter mold or matrix, Gutenberg was able to create a surplus of these sturdy metal letters. He reproduced the script used at the time (German Black letter, Textura). 4. Viscous Ink

Standard ink would pool within the letter forms and create blotchy marks on the substrate. Gutenberg gave giving it thicker consistency allowing it to stick. Even though Gutenberg’s inventions reduced the printing time, completion was still long because book illustrations and colouring were still done by hand. Printing supplies were still expensive so they relied on subscriptions where buyers paid money upfront to fund the completion of the work, which was initially church indulgences and then Gutenberg’s forty-two line Bible.

Image 11(Left) American

metal punches within their two case system and a type setter.

Venetian Old Style Guttenbergâ&#x20AC;&#x2122;s inventions continued to be used with minor modifications. In 1465, The printing technology was brought from Germany to Italy by Conrad Sweynheym and Arnold Pannartz. They found copies of what they thought to be authentic Roman classics but were really a copy of Carolingian miniscules. They used their ancient findings to create the first Roman metal type. To bring consistency to the letters, they added serifs to their miniscule letters. Sweynheym and Pannartz created the first roman type that would influence typography for the next two centuries. Conrad Sweynheym & Arthur Pannartz

Their roman type was immediately accepted due to the Italian Renaissance, a period that was deeply interested in classical Roman and Greek literature. As scholars searched for a deeper knowledge through inquiry, it sparked the Humanist movement. It defined man as capable of using reason and scientific study to develop understanding and self meaning. Nicolas Jenson

Nicolas Jenson continued the Roman style to create type with extreme legibility by carefully adjusting the space between and within his letters. It allowed for an even tone throughout the page and very easy on the eyes to read. These elements contributed to his high level of success as he printed over 150 books, more than any type founder before and during his time. Aldus Manutius

Scholar and printer Aldus Manutius and his punch cutter Francesco Griffo designed type known as Venetian or Aldine Old Style. Griffoâ&#x20AC;&#x2122;s type was the first to create type with an even tone and consistent visual elements. In 1501, Manutius also introduced the first compact, travel size books with the first type to mimic handwriting called Cancelleresca. Image 16(Above)

Roman Capitals that Venetian typographers aimed to replicate.

Image 12(Left) Printing

from Sweynheym & Pannartz from 1465.

Image 13(Left) Nicolas

Jenson work from “Noctium Atticarum” in 1472.

Image 14(Left) Aldus

Manutius’ page from Eleganze. Printed in Venice,

Image 15(Left)

Page using Aldus Manutius’ Chancelleresca, a type made to replicate handwriting.

Image 17(Left)

Louis Simmoneau’s grid for the letter M in Roman du Roi.

Transitional Style

Moving away from the thicker strokes of Old style, a slight contrast of thick and thin strokes within the letters is identified as Transitional style. The axis that the letterforms are writing on still remains on an angle with tapering, a smooth gradient from the terminal to serif. By the turn of the eighteenth century in France was the Rococo period, a fanciful French style with flourishes and ornate decorations. From a prominent family of printers and type founders same their son, Pierre Simon Fournier le Jeune who excelled at the Rococo style. King Louis XV called him and numerous scholars to design a type face exclusively for the Imprimerie Royale. Using “scientific” principles, the roman capital letters were designed according to a sixty-four unit grid. After mechanical implications, the finals were editing by the eye to create the type called Roman du Roi.

John Baskerville

In the middle of the century, England found an influential type founder named John Baskerville who developed the printing press technology and started a newer Roman style. His letters possessed a new elegant lightness. Baskerville increased the letter width giving a higher contrast from thin to thick strokes. He also placed the transition from thick to thin in different areas while giving a smooth flow from the terminal to serifs. To add to the lightness of type, Baskerville was deeply interested in spacious page layout and generously used white space.

Image 18(Right)

Printed by John Baskerville, Esop’s Fables became a classic by the 1600’s. 18

Modern Style

By the 1770’s Giambattista Bodoni took type in a new direction. He rejected the ornate decoration of Rococo style and focused on the regularity of type. Bodoni focused on designs with cleanness and the repetition of forms. He took the transitional typeface to the extreme. He made the thin strokes approach hairlines while removing the tapering from the terminal to the serif. This created a high contrast of forms giving this new approach to type a new category, Modern style. Bodoni’s type was so new to type founders that it received a high level of criticism, as some claimed it painful to the eye and hard to read. However it did give a great visual interest and played a major role in the development of type. Others French type founders such as Fournier le Jeune and Francois-Ambroise Didot continued Bodoni’s modern type until the end of the century.

Image 19 (Above) Giambattista Bodoni’s Manuale of Typography using his Modern style type.

Industrial Typography

Come the nineteenth century, the Industrial revolution era is causing increasing production and consumption rates. As the middle-class began having a choice between companies, advertising played an important role. With advertising and branding, came in the invention of numerous display types. Typography became an asset to visual appearance and multiple experiments with letter forms began. Vincent Figgins was the first slab serif typeface with exaggerated widths and serifs.

Image 20 (Left) Vincent Figgins’ slab serif typeface called ancient Egyptian(1814).

In 1816, it was the fourth son of typographer William Caslon to create a typeface without serifs. When comparing it to the Egyptian slab serif faces, critics say that he based his type of slab serifs and then removed the serifs. In contrast, William Caslon IV claims he created the typeface before the slab serifs arrival. Whatever the cause, Caslon’s sans-serif type created a new division of type that allowed for modern day typographers to continue to explore letter forms.

Image 21 (Left) William Caslon IV’s sans serif typeface “Egyptian.”

Phase 1

BUILDING A TYPOGRAPHIC FORMULA Setting the standard

by using these important principles that contribute to the readability of text.

Kerning is amount of space in between individual

letters or within a title. It is essential to a visually attractive title.

The auto-spacing in digital fonts can leave uneven spaces between letters that may begin to separate your words. By kerning your letters, you take control of the spaces and allow for optimal readability.

quality quality quality Typefaces: Helvetica,

Garamond, Ludica. 72pt.

qu ali -10 kerning

Letter Spacing

Even though these letters appear to have the same s pacing, they each have a different amount of spacing.

-5 kerning

0 kerning

Too Long

Column width makes a big difference in the readability of body text. When column widths are too wide, it puts strain on the eye and makes it difďŹ cult for the reader to follow and understand. Good

Its important that designers pay attention to column width. A good column width increases text ďŹ&#x201A;ow which makes it easier for the reader to follow along to the information. Too Short

If a column width is too thin large bodies of text can overwhelm the reader or become confusing with lots of hyphenation. Smaller column widths should be reserved for small amounts of text such as captions or subheadings.

Column Width can literally make or break a readers

experience. For maximum readability, stick to using 55-65 characters per line. If a line exceeds peripheral vision, readers will tend to lose their spot–and interest.

“Leadership means sharing the results of our research and development with the public and expanding the knowledge and understanding of our strategies amongst investors.” As we introduce new ideas, managers and companies into our group, each will be demonstrably the best in its field. “As industry pioneers, we embrace the new and the unconventional.”

Specifics:

Column width 21p2 Garamond Regular 10.5pt 27

Leading is the space in between lines of type. Leading

space is measured from a texts baseline to the next baseline. Letter forms should not be touching each other but should not so far that are difficult to associate as an entire entity. Make sure there is sufficient space so that lines are identifiable but not so far that they appear independent.

Specifics:

Column width 21p2 Garamond Regular 10.5pt Leading 13pt 28 16

The quick brown fox 48 pt

120pt leading too far because lines begin to form their own titles.

jumps over the lazy dogâ&#x20AC;&#x201C;in well spaced leaps. 48 pt

72 pt

77 pt

L a c k i n g Lacking pack Lacking packing Lacking packing itâ&#x20AC;&#x2122;s called tracking.

Tracking identifies the space between the letters within a word or body text. Tracking is used within large bodies of text instead of kerning each of the individual letters. If the forms appear to melt into one another, then use tracking to restore legibility to each letter form. It can assist in removing orphans and hyphenation in columns. Careful though, the letters still need to be close enough to form words.

Specifics:

Garamond Regular 10.5pt Leading 13pt Tracking 0 pt 31

The arrangement of text or images to form Flush Right where lines

alight on the right side..

a corresponding line is called alignment. Centre is aligns lines

within the middle of their designated width.

Also referred to as text or type justification,

JustiďŹ ed creates lines that are flush left and right by creating wider spaces between words.

there are four styles at our disposal. Flush Left

Alignment(top) is how the lines are arranged to form a straight line, or visual flow. The four types of alignment are flush left, flush right, center and justified. The opposite of the alignment is called the rag. The paragraph below recommends flush left, rag right for optimal readability.

Specifics:

Garamond Regular 10.5pt Leading 13pt Tracking 0 pt Flush Left, Rag Right

33 33

Ligatures is the term applied when letters are joined

to form a single glyph. They can be used to save space in large bodies of text or for aesthetic purposes. From auto-spacing letters will sometimes touch, ligature allows both letter features to still be visible.

Specifics:

Garamond Regular 10.5pt Leading 13pt Tracking 0 pt Flush Left, Rag Right Ligatures Included 34

fish office fish

æro

office

æro

hip means sharing the results of our and development with the public and expanding the e and understanding of our strategies nvestors.” As we introduce new ideas, managers and s into our group, each will be demonstrably n its ſield. “As industry pioneers, we embrace the new nconventional.”

p means sharing the results of our research and nt with the public and expanding the knowledge anding of our strategies amongst investors.” duce new ideas, managers and companies into each will be demonstrably the best in its ſield. “As oneers, we embrace the new and the unconventional.”

Hard Rag

Hard rags are abrupt line length variations and should be avoided at all costs. It prevents text from being easily read and gets distracting.

Soft Rags

Soft rags also limit readability because a read can easily to lose their spot on the page. If lines are too similar, it becomes tedious and straining to read.

Best Rags

p means sharing the results of our research pment with the public and expanding the and understanding of our strategies amongst As we introduce new ideas, managers and nto our group, each will be demonstrably the eld. “As industry pioneers, we embrace the e unconventional.”

For optimal reading, rags should provide readers with varying lengths to keep interest but subtle enough that they aren’t too distracting.

Rags are the irregular endings at the opposite side of

alignment. In centered text, rags can be found at both ends and refer to the empty spacing at the end of lines. With extreme variances the ending space, the spaces form shapes that distract the reader.

“Leadership means sharing the results of our research and development with the public and expanding the knowledge and understanding of our strategies amongst investors.” As we introduce new ideas, managers and companies into our group, each will be demonstrably the best in its ſield. “As industry pioneers, we embrace the new and the unconventional.”

Specifics:

Garamond Regular 10.5pt Leading 13pt Tracking 0 pt Flush Left, Rag Right Ligatures Included

Without Hanging Punctuation

“Let’s be honest here. Now that you’re aware of punctuation,

“ Make sure that you With Hanging Punctuation

apply it to your work!”

Hanging Punctuation is the way of arranging

punctuation such as quotation marks and hyphens outside of the margins to avoid disrupting the flow of text.

“ Leadership means sharing the results of our research and development with the public and expanding the knowledge and understanding of our strategies amongst investors.” As we introduce new ideas, managers and companies into our group, each will be demonstrably the best in its ſield. “As industry pioneers, we embrace the new and the unconventional.”

Specifics:

Garamond Regular 10.5pt Leading 13pt Tracking 0 pt Flush Left, Rag Right Ligatures Included Hanging Punctuation

Final Product

By combining all the previous principles we can create text that is non-straineous to read with optimal readability. Our sample paragraph has developed to be text that is visually attractive and easy to read. Be sure to remember the typographic principles and use them to your advantage when dealing with typography.

Specifics:

Column width 21p2 Garamond Regular 10.5pt Leading 13pt Tracking 0 pt Flush Left, Rag Right Ligatures Included Hanging Punctuation

“Leadership means sharing the results of our research and development with the public and expanding the knowledge and understanding of our strategies amongst investors.” As we introduce new ideas, managers and companies into our group, each will be demonstrably the best in its ſield. “As industry pioneers, we embrace the new and the unconventional.”

Phase 2

FORMING THE SYNTAX Layout Examples

Showing various approaches to organizeinformation and create levels of hierarchy.

What is Syntax? Typographic Syntax referes to the process of rearranging elements to create a cohesive whole. These elements include text, images, and linear component to form positive space while empty spaces of paper are called negative space. The arrangement or interaction of the negative and positive spaces are what make up typographic syntax. The following pages provide various approaches to typographic syntax. Each study introduces a new element to create another level of hierarchy. Hierarchy is used to create different levels of information. It is imporant to syntax because it can be used direct the audiences eye across the page.

Study One

The aim is to explore typographic layout while limited to one font and two attributes(regular and bold). The typeface used throughout is Futura Std in 8.5 point.

Study Two

In addition to text layout and bold attribute, a new contrasting size and linear element are added to the hierartic scale.

Study Three

This study adds an image to the two font sizes, bold attribute, and linear elements. The image used is of Paul Renner, the designer of Futura, the type used in the examples and to create the image.

INSP INSPI

Phase 3

TYPOGRAPHIC BEAUTY Principles Applied

Examples in the design industry that are effectively using the typographic principles.

IRED

Glyph Type

Moshik Nadav Purpose: Typography

Framed Poster

Zag Designs WeAreGlad.com

Typeface Poster

Jacqueline Wong JacquelineWong.ca

Portfolio

Henrik Karlsen Hskarlsen.com

Tesco Typographic Mugs

Glad Designs WeAreGlad.com

Portfolio Magazine

Studio Gris Studio-Gris.com

Ligatures Poster

Morten Iveland Client: The Infamous Press

Muscian Poster

Joey Faccio Client: Southern Tongues 69

PACT Magazine

Von Kunst und Wissenschaft Labord.de

Website

enRoute enRoute.com

PACT Magazine

Von Kunst und Wissenschaft Labord.de

Evolution of Typography

Patrick Silverthorne Silverthornz.deviantart.com