Topography of Typography by Ksenija

What is Typography? Typography is the visual representation of a language. Its forms symbolize the spoken word, and they are a visual documentation of thought. Like anything visual, the aesthetic qualities rank highly in importance- but as something functional, typography must convey its message efficiently. Thus, good typography is the union of these two elements; where form follows function and function also follows form. A good book will implement the use of a typeface that is easy to read over a long period of time, and who’s form creates strong parallels that follow the flow of text. This is a good example of the form following the function. On the other side of the coin, a poster may use a visually engaging or “eye-catching” typeface that is legible, but focuses on the form to speak alongside the written words. Thus, typography is the visual representation of a languagein which the structures of the letterforms hang in a delicate balance. Form following function? Function following form? Good typography is knowing when to use what in order to make your message “heard.”

History of the Alphabet The history of typography begins its long journey in early human civilization. Itâ&#x20AC;&#x2122;s important to start this journey from the earliest form of symbolicvisual human communication, and to work our way up to the polished, refined letterforms we are familiar with today. From pen on paper to printing press, each development played a signifigant role in defining the visual representation of our languages.

Ancient Egyptian Hieroglyphics circa 3200 BCE Credited as the first documented, organized alphabet.

Ancient Cuneiform System circa 3000 BCE Named after its wedge-heavy use, Latin word cuneus.

Egyptian 3200 BCE

If they hadn’t done it, I may be crediting someone else from somewhere else for the creation of the written word. Using their logographically derived symbols, called hieroglyphics, the Egyptians were able to establish a system that took spoken word and organized it upon paper (or in their case, papyrus, limestone, etc.) Hieroglyphs were able to be silently read, interpreted and understood, allowing a thought, for the first time in history, to be documented eternally.

Cuneiform 3000 BCE

Cuneiform emerged almost simultaneously to the Egyptian Hieroglyphs. The symbols themselves were impressions left upon clay using a stylus made of reed. Some modern languages call cuneiform, in a literal translation, “clay writing.” The shape of the reed determined the appearance the of wedged forms in the symbolsand it is these wedges themselves that determined the name “cuneiform.” The cuneiform system was given much attention, and its forms were greatly transformed and stylized over time.

Phoenician 1050 BCE

The Phoenician alphabet was the first to create a union between sound and form. Each of the 22 “letters” had a unique sound, and a grouping of the letters would “spell” the word. This was unlike it’s predecessors, the Egyptian and Cuneiform systems, which instead assigned complex symbols to nouns, verbs and adjectives. The simplified nature of the Phoenician alphabet was so successful that it influenced many languages during its existence. There have been proven links between the Phoenician alphabet and the development of Hebrew, Aramaic and Greek. Early Hebrew was an abstracted interpretation of the Phoenician system. The Aramaic alphabet gave birth to the Arabic alphabet, the most commonly used alphabet system of the Middle East. Spoken Phoenician has the melodic, throaty and crisp sound of the Arabic language, unlike Greek. The Greeks were able to re-assign phonetic sounds to the letterforms, which over time developed into the Greek alphabet. Latin letters, today’s most commonly used letterform system, were birthed from Old Italic. Old Italic draws a direct influence from the ancient Greek alphabet, meaning that today’s letterforms can thank the Phoenicians. The Greek alphabet went on later to greatly influence the Cyrillic alphabet, a system currently used in 8 Eastern European countries and 4 Asian countries. There’s also reasonable speculation towards the influence of the Phoenician alphabet that reaches as far east as Korea. The Aramaic alphabet, with the influence of the Phoenician, helped form the Brāhmī script, which became the root of many Eastern Asian alphabets, like Mon (used in Burma), Javanese (used in Indonesia), Khmer (used in Cambodia) and Hangul (used in Korea.)

The Phoenician Alphabet circa 1050 BCE The root of alphabets still used today.

The Greek Alphabet circa 730 BCE These letters are still familiar to us today, as they influenced the Latin language.

Greek 730 BCE

If they hadnâ&#x20AC;&#x2122;t done it, I may be crediting someone else from somewhere else for the creation of the written word. Using their logographically derived symbols, called hieroglyphics, the Egyptians were able to establish a system that took spoken word and organized it upon paper (or in their case, papyrus, limestone, etc.) Hieroglyphs were able to be silently read, interpreted and understood, allowing a thought, for the first time in history, to be documented eternally.

The Latin Alphabet circa 1050 BCE The Latin alphabet has been developed greatly over timeand has become the most used alpahbet today.

Latin 700 BCE

The Latin alphabet is the most commonly used alphabet today. Even their earliest letterforms resemble the letters that we use today, and through a process of style evolution, we arrive upon the modern-day Latin/Roman alphabet. After much stylistic improvement, this alphabet is now used in several thousand different languages. The form of the Latin alphabet is now so versatile, that many languages transcribe their native language into Latin, so that it may be universally read.

The Roman Codex circa 100 CE An early example of a Roman “codex”- the earliest predecessor of modern books.

History of the Letterform The letterform began to rapidly evolve due to obvious reasons- it was an ideal way to communicate a message to a large array of people, retelling stories passed. The letterform has its beginnings in the early books and publications. From then on, stylistic variations were endless- especially in our day and age where digital fonts have become extremely easy for anyone and everyone to create.

Illuminated Manuscript 400 - 600 CE

The Latin alphabet had become widespread with their growing use of books. When the illuminated manuscripts – called so due to their use of “brightening” and “illuminating” metal leaf – became widespread, the Latin alphabet adopted the use of a miniscule form. Before, there just existed the Latin alphabet in the majuscule form, but these texts made the newly introduced miniscule widely used. The texts written in illuminated manuscript form also featured a new addition to the Latin alphabet: the calligraphic form, which introduced the concept of stylization to letterforms.

Bible of Borso d’Este circa 1455 - 1461 CE This document, taking 6 years to compelete, was a collaborative work between Taddeo Crivelli, Franco dei Russi, Guglielmo Giraldi and Girolamo de’Corradi. The work is a total of 1,230 pages.

The Gutenberg Bible 1452 - 1455 CE Details from the Gutenberg Bible, showing (above) two 42-line columns and (below) the ornamented elements featured intermittently.

The Printing Press(es) BĂ ShÄ&#x201C;ng 990 - 1051 CE

Bi Sheng lived during the Song Dynasty in China was the first to create a printing press in 1041 CE that used moveable type. His press used ceramic letter punches instead of metal, which was the natural evolution that occurred shortly after. These methods were not practical though- because the Chinese alphabet, which had been developing separate to Western alphabets, had more than 800 characters at the time.

Johannes Gutenberg 1398 â&#x20AC;&#x201C; 1468 CE

By the year 1450, Gutenberg had perfected and put into use his printing press. This was a pinnacle moment in the history of the communicated word in Europe, as documents and books could be printed, created and distributed at speeds that have never been experienced before. His Magnum Opus was the 42-Line Gutenberg Bible. It was praised due to its high quality and attention to aesthetic detail. The entire publication is written in 2 justified columns, each with 42 lines. Book and type design became a huge focusing point from them on in book and print publications.

garamond circa 1530 CE The Renaissance Roman Letter was reflective of Renaissance painting and music, with full letterforms and paced light and space. These forms were the benchmark for typefaces to come.

dante italic circa 1501 CE This Renaissance Italic typeface is closest to the earliest appearance of an italic typeface in the history of type. The italic letterform was the first form that considered hierarchy in the typeface- it created a contrast between a body copy in book.

janson circa 1685 CE The Mannerist Letter is like the Renaissance letter, save for the it features subtle exaggerations of length, angularity or tension.

fleischman circa 1738 CE Suprising in contrast to the Rococo period, which flourished in ornament and filligree, the typography of the time has been known to remain elegant. They feature blackletter and script types.

baskerville circa 1754 CE The Neoclassical Letter follow in the pattern of Neoclassical art: restrained and highly consistent. They are products of the Rationalist Era: frequently beautiful, calm forms, but forms oblivious to the more complex beauty of organic fact.

didot circa 1800 CE Romantic Letters have the characteristic of looking more drawn than written, and often feautre abrupt modulation of the stroke and thin and abrupt serifs.

akzidenz grotesk circa 1898 CE The Realist Letter is blunt and simple. Realist letters often have basic shapes with heavy slab serifs or no serifs at all. The stroke is uniform in weight.

futura circa 1924 CE Geometric Modernism is named so appropriately- due to its geometric forms. Futura is a typeface that showcases this perfectly, with the use of perfect circles and intersections at 90-degree angles.

preissig 1924 CE Preissig was designed during the Expressionist era, which is evident in the strokes of the type itself. Like a complete contrast to Futura, these strokes are â&#x20AC;&#x153;expressiveâ&#x20AC;? and show the hand of the designer.

esprit 1985 CE Postmodern Typefaces are highly self-conscious, but devoutly unserious, and they frequently recycle and revise Neoclassical, Romantic and other premodern forms...

officina serif 1990 CE .... At their best, they do so with an engaging lightness of touch and a fine sense of humor. The Postmodern Typeface also features a calligraphic energy, which is lively, playful and fun.

Normative Principles Itâ&#x20AC;&#x2122;s important to look at good typography as a creative formula. There are many rules that need to be respected, followed and understood- but they are rules that are intended for interpretation. These principles come together and result in a creative, effective and interesting study in the field of typography.

Kerning Kerning or letterspacing refers to the adjusting of the space between two letters. Gaps occur, for example, around letters whose forms angle outward or frame an open space (W, Y, V, T, L). In metal type, a kerned letter extends past the lead slug that supports it, allowing the two letters to sit more closely together. In the digital typefaces used today, the space between letters is controlled by a table of kerning pairs, which specify spaces between different letter combinations.

typography typography typography

unkerned

kerned

exact points

+20

+40

Kerning minion 75 pt roman An example of kerning - the first shows the type unaltered, and the bottom two show the type adjusted, with exact point measurements on the bottom example.

-40

-20

-40

-30

Thus, typography is the visual representation of a languagein which the structures of the letterforms hang in a delicate balance. Form following function? Function following form? Good typography is knowing when to use what in order to make your message “heard” loud and clear.

8.5 pt minion roman 408 pt column width This is considered a “loose” column with. There is about 90 characters per column.

Thus, typography is the visual representation of a languagein which the structures of the letterforms hang in a delicate balance. Form following function? Function following form? Good typography is knowing when to use what in order to make your message “heard” loud and clear.

8.5 pt minion roman 215 pt column width This is considered medium column width and it is easyto-read because it has a good width - with 60 characters per line.

8.5 pt minion roman 156 pt column width This is a narrow column width, which can be great to use, but sparingly. This column has 40 characters, on average, per line.W.

Column Width The length of a line depends, to a large extent, on the size of the type. Reading long lines of type causes fatigue: the reader must move his head when he reaches the end of each line to search for the beginning of the next. A good rule of thumb is to set a line about two and half alphabets long (65 characters). Studies have show that reading a line of 50 to 70 characters is the most comfortable.

Leading Linespacing refers to the distance from the baseling of one line of type to aother. It is also called leading, in reference to the strips of lead used to sepearet line sof metal type. The default setting in most layout and imaging software is slightly greater than the cap height of the ltters. Expanding this distance creates a text block with a lighter, more open colour. As the line spacing increases further, the lines of type become independent linear elements reather than parts of an overall texture.

8.5/8 minion roman This is called “set solid.” When lines are set this closely together, the ascenders and descenders begin to touch which results in an uncomfortable effect.

8.5/10.2 minion roman In most page layout programs, the default line spacing or leading is 120%, or slightly greater than the cap height.

8.5/12 minion roman This column is set with wider line spacing or leading that the standard default.

Thus, typography is the visual representation

8.5/16 minion roman As the line spacing becomes more extreme, the block of text begins to read as separate lines rather than a shade of grey.

of a languagein which the structures of the letterforms hang in a delicate balance. Form following function? Function following form? Good typography is knowing when to use what in order to make your message “heard” loud and clear.

Typography is what language looks like.

normal tracking

Typography is what language looks like. loose tracking

typography is what language looks like.

combined tracking

Tracking minion 22 pt roman This quote, said by Ellen Lupton, is a beautiful explaination of type. The bottom example uses all three effects of tracking to show how they might be effectively used and combined.

Tracking Letterspacing refers to the adjusting of spacing across a word, line or column of text. It is common practice to letterspace capitals and small capitals, which appear more regal when standing apart. By slightly expanding the tracking across a body of text, the designer can create a more airy field. Negative tracking is rarely desirable. This device should be used sparingly, to adjust one or more lines of justified type.

Alignment Alignment refers to the arrangement of text into colums with either hard or soft edges. Each basic style of alignment bring aesthetic qualities and potential hazards to the design of the page or computer screen.

8.5 pt minion roman - flush left / ragged right When it is good: Flush left/rag right settings respect the organic flow of language and it avoids the uneven spacing that plagues narrow columns of justified text. When it is evil: The flush left column loses its natural organic appearance when disgraced with a “bad rag.” Work hard to create the illusion of a random natural edge without much hyphenation.

8.5 pt minion roman - centered When it is good: Centered text is formal and classical. It invites the designer to break a line of text for sense and create an organic shape in response to the flow of content. When it is evil: Centered text is static and conventional. Used without care, it looks stodgy and mournful, like a tombstone.

8.5 pt minion roman - flush right / ragged left When it is good: Flush right text distinguishes captions and notes, suggesting affinities with other elements on the page. When it is evil: Flush right text can annoy cautious readers. Bad rags can threaten flush right text as they afflict flush left, with the difficulty that punctuation at the ends of lines can weaken the hard right edge.

8.5 pt minion roman - justified When it is good: Justified text makes a clean, figural shape on the page. Its efficient use of space makes it the norm for newspapers and books of continuous text. When it is evil: Ugly gaps can occur as text is forced into lines of even measure. Avoid this by making sure the line length is long enough in relation to the size of type. As the font gets smaller, more words will fit on each line.

fi fl ae oe

no ligatures

fi fl ĂŚ Ĺ&#x201C;

ligatures applied

Ligatures minion 98 pt roman Ligatures are often used when writing in Latin. Shown here are two colums of the pairsthe left without ligatures and the right with their respective ligatures applied.

Ligatures Ligatures refer to two or more letters ties to a single character. The sequences ffi, ff or fl, for example, form a ligature in most Latin text faces.

Rags Typographic rags refers to the shape created on either side of a column of text. In a flush left/ragged right text, the left edge is considered “hard” and the right edge is considered “soft”. A “good” rag looks pleasantly uneven, with no lines that are excessively long or short, and hyphenation kept to a minimum. A rag is “bad” when it looks too even (or too uneven), or when it begins to form regular shapes like wedges or diving boards.

8.5 pt minion roman Designers work hard in order to achieve a rag that is natural and soft. A bad rag is rough and visually distracting, taking attention away from the content of the words.

“To the average person, most typefaces look the same. But, if a typeface has a strong flavour, it calls attention to itself. It’s easy to recognize.” - Mark Simonson

“ To the average person, most typefaces look the same. But, if a typeface has a strong flavour, it calls attention to itself. It’s easy to recognize.” - Mark Simonson

Hanging Punctuation minion 18 pt Using hanging punctuation allows for the creation of a stronger alignment of type. In this example, this quote has a stronger alignment when the left alignment isn’t broken by the quotation mark.

Hanging Punctuation Hanging the punctuation is particularly important in larger sizes of text, such as headlines, or in quoted material, no matter what its size. By hanging the punctuation off the aligned edge, we eliminated any visual interruption of the text.

Tying in the Type... Hierarchy Is an organizational system for content, emphasizing some information and diminishing others. Hierachy helps readers scan text, knowing where to enter and exit and how to pick and choose among its offerings. A cue can be spacial (indent, line spacing, placement on page) or graphic (size, style, weight or colour of typeface).

Syntax Syntax is the process of arranging of elements into a cohesive whole; the rhythmic and dimension field in which typographic communication exists.

Structure Typography exists to honour content! Always consider the nature of the message when designing anything. What are we trying to express? What should we emphasize? How should the message be expressed graphically? Typography must draw attention to itself before it is read.

Visual Interest Effective communication employs legible typography that activates the page, making the message interesting and inviting. The page should possess a living energy, employing principles of balance, harmony, rhythm, movement, proportion and unity while communicating and particular message.

Employing the Principles The following examples feature examples of type telling the story of the content. This can be achieved either through creating narratives in the formatting of the text or even more effectively so, using appopriate imagery to set the tone and mood of your content.ff

Hierarchy + Syntax phase 1 The following 5 exercises show an exploration in syntax and hierarchy using Avenir in 8 pt in roman and bold weights.

Hierarchy + Syntax phase 2 The following 5 exercises show an exploration in syntax and hierarchy using Avenir in 8 pt and 11 pt font and roman and bold weights. Lines are also features to create visual flow and interest.

Hierarchy + Syntax phase 3 The following 5 exercises show an exploration in syntax and hierarchy using Avenir in 8 pt and 11 pt font and roman and bold weights. Lines are also features to create visual flow and interest. The entire composition is layed over a picture that emphasizes the intention of the quote.

Typography Done Right Good typography doesn’t happen accidentally- but when it does, it’s obvious. Even the untrained eye, when something looks good, it looks good- regardless if they can describe exactly what elements of the type are workign towards the aesthetic. On the same hand, when bad type happens, it’s easily identifiable. All it needs is careful scanning through and applying of the principles of typography. Here are some examples of what type can look like when done right.

Homage to the Stamp 2008 Gavin Protenza Stamp design for client Tiny Showcase. Norge 2008 Gavin Protenza Stamp design.

Hazel & Delt 2010 Perky Bros A business card that doubles as a tag, all-in-one. Perky + Richter 2009 Perky Bros Wedding Invitations for clients Sarah Richter & Jeff Perky

Avant Garde Living 2009 Anton Mwewa A poster showcasing Avant Garde, one of my personal favourite faces.

Whatâ&#x20AC;&#x2122;s Your Passion? 2009 Karoline Kwon A magazine spread as part of a series in playing with type, letterforms and colour.

Hard Gereden 2010 Brusatto Book cover and flyer design.

Chesil Smokery 2012 Big Fish Identity and packaging design for Chesil Smokery.

Fifty Stories 2008 Jennifer Lee Typographic spread design for HHMI Bulletin magazine.

Scribble Art 2012 Excites A piece of mounted cut-out custom type.

West Coast 2010 Brent Couchman 3D lettering done in mixed media, playful and fun.

Substance (Antoine-Laurent Lavoisier) 2011 Excites One from the series of posters created for the Internation Year of Chemistry 2011.

Elements (Dmitri Mendeleev) 2011 Excites One from the series of posters created for the Internation Year of Chemistry 2011.

Modern Architecture 2010 Morten Iveland One of a series of many for a set of personal bookcovers.

Works Cited & Further Reading If it werent for so many people ducomenting and respecting the field of typography, I would not have been able to share this book with. All of my knowledge in this subject has been passed down from people who are clearly masters in their feild. The following are texts that are both for crediting those whose words went into this book and those who I would recommend, should you be curious about finding out more for yourself.