typography 1 overview (intro to gd, wk 4)

A B R I E F O V E R V I E W O F T Y P E H I S T O R Y & T E R M S

cuneiformMesopotamia, c 3150 B.C.

Sumerians created the first written language based on abstract signs around 3000 B.C.E. Imprints of the signs, called cuneiform, were made by pressing a wedge-shaped stylus into wet clay.

This marked the emergence of an abstract writing system out of a set of pictographic symbols. The symbols were largely descriptive.

The map below shows the current-day archaeological sites of Mesopotamia.

PHonetic alPHabet1500 B.C.

A phonetically based alphabetic system, in which the sound of spken language are represented by a scheme of abstract marks, was developed by the Phoenicians from 1500 B.C. The influence of the Phoenicians as a trading culture introduced teh idea of a full, non-representational writing system across the Mediterranean and formed the basis for successive Greek, Etruscan and Roman alphabets.

The Phoenician alphabet was based on the principle that one sign represents one spoken sound. In the illustration to the left, each sign is shown its sound value, name and meaning. Reads from right to left.

Greek alPHabet

The Ionic version of the Greek alphabet, officially adopted by the Athenians in 403 B.C.E.

roman alPHabet

Trajan column inscription cut in 114 CE. The letterforms are considered to be the finest surviving examples or early Roman capitals. Shown below is a closeup of the fourth line from the top.

scribes & calliGraPHy

Humanistic formal script, favored by the Renaissance scholars, was based on the Carolingian script and the inspiration for Nicholas Jensen’s typefaces.

Humanistic cursive, Cancelleresca Corsiva, was a popular writing style and the model for italic typefaces.

uncials & Half uncials

Carolingian manuscript showing the writing style approved by Charlemagne for adoption throughout the Holy Roman Empire (c.800 C.E.). The letterforms became the model for the our lowercase letters.

oriGins of movable tyPe

Woodblock printing on paper, whereby individual sheets of paper were pressed into wooden blocks with the text and illustrations carved into them, was first recorded in Chinese history, and the oldest surviving printed book to be documented, a copy of the Buddhist Diamond Sutra, is dated 868 AD. As a method for printing patterns on cloth the earliest surviving examples from China date to before 220,[1] and from Eygpt to the 4th century.[2] By the 12th and 13th centuries, many Chinese libraries contained tens of thousands of printed volumes.

Around 1040, the first known movable type system was created in China by Bi Sheng out of porcelain. Metal movable type was first invented in Korea during the Goryeo Dynasty (around 1230). Neither movable type system was widely used, one reason being the enormous Chinese character set.

JoHannes GutenberGc. 1397–1468

Movable type began in the West with Johannes Gutenberg in fifteenth-century Germany.

In 1455 Gutenberg published his 42-line Bible, commonly known as the Gutenberg Bible. About 180 were printed, most on paper and some on vellum. His typography took cues from the dark, dense handwriting of the period, called “blackletter.”

Gutenberg’s technique of making movable type remains unclear. In the following decades, punches and copper matrices became standardized in the rapidly disseminating printing presses across Europe. Whether Gutenberg used this sophisticated technique or a somewhat primitive version has been the subject of considerable debate.

blackletter

The letters in Gutenburg’s 42-line bible were designed to replicate the calligraphic Textura Blackletter forms used in German illuminated manuscripts of the time.

Blackletter, also known as Gothic script or Gothic minuscule, was a script used throughout Western Europe from approximately 1150 to 1500. It continued to be used for the German language until the twentieth century. Fraktur is a notable script of this type, and sometimes the entire group of faces is currently known as Fraktur.

( )

metal tyPe

While the details of Gutenbergs working methods were closely guarded during his life and remain the subject of speculation and research, but the casting of his type is likely to have followed a process that came to be widely adopted across Europe.

While this process underwent considerable refinement between the 15th and 20th centuries, it remained at the core of typefounding for some 400 years.

linotyPe and monotyPe

In the 1880’s, two American engineers independently designed machinery to automate type composition. In both cases, this was achieved by assembling the matrices for casting text ready for printing. The process came to be known as hot metal, because the lines of text are created by fresh casting rather than the manual arrangement of previously cast (cold-metal) type.

The development of the Linotype and Monotype machines were closely followed by the invention of the punchcutting machine in 1884, by Linn Boyd Benton. The machine alloed a punch to be created as a direct, unmediated transcription of a drawing, which eliminated the type designers dependence on the punchcutter, and consequently became a less specialized practice, embraced by designers, illustrators, and architects.

PHototyPesettinG

Typesetters used a machine called a phototypesetter, which would quickly project light through a film negative image of an individual character in a font, through a lens that would magnify or reduce the size of the character onto film, which would collect on a spool in a light-tight canister. The film would then be fed into a processor, a machine that would pull the film through two or three baths of chemicals, where it would emerge ready for paste up.

Phototypesetting (sometimes referred to as “cold type”) dates back to the 1940s, but the technology became popular in the early 1970s when it replaced metal typesetting as offset lithography printing grew in popularity.

tHe diGital aGe

Stay tuned for pt 2!

T Y P E C L A S S I F I C AT I O N

General ClassifiCation

serif/sans serif

serifsans-serif

General ClassifiCation

Display/text

Optimism is a strategy for making a better future.

Because unless you believe that the future can be better, it’s unlikely you will step up and take respon-sibility for making it so. If you assume that there’s no hope, you guarantee that there will be no hope. If you

assume that there is an instinct for freedom, there are opportunities to change things,

there’s a chance you may contribute to making a better world.

The choice is yours.

–—Noam Chomsky

QUICK BROWN

JUMP

Vox systemMaximillien Vox, 1954

Maximillian Vox (1894-1974), a French typographer, developed the Vox Type Classification System in early 1950s-it consists of 9 general type categories and is used primarily in Europe.

The first four Vox categories are historically defined, mapping the development of type forms from the Venetian Humanist letter through the Garalde and Transitional forms to the Didones. Subsequent categories are based upon characteristics of appearance: slab serif and sans serif types (termed Slab Serif and Lineale respectively), with some recognition of subgenres within these categories. Finally, the terms Glyphic, Script, and Graphic are used to categorize a range of faces outside the typographic mainstream, according to the processes and tools that inform their design.

Typeface example English French Description

Pastonchi Humanistic Humanes First roman characters.

Garamond Garaldic Garaldes "Garamond + Aldus"16–17th century originsBetter thick/thin contrast.

Baskerville Transitional Réales Bridge between Garaldic and Didones. More upright, delineated contrast.

Bodoni Didonic Didones "Didot + Bodoni"High contrast between thick and thin lines.

Giza Mechanistic Mécanes Geometric and Industrial from the 19th century.Egyptian-type faces.

Gill Sans Lineal Linéales Sans serif with uniform lines of varying thicknesses:Ultra thin to bold weights.

Trajan Incised Incises Resembles a Latin inscription. Titling fonts, devoid of lowercase.

Shelley Andante Script Scriptes Imitates cursive writing.Letters may or may not conjoin.

Bolide Manual Manuaires Evocative of hand-rendered letters.

Vadstenakursive Black Letter Fractures "Gothic" or "Fraktur" faces.Used particularly in Germany.

¤Бксцч (Tatlin Cyrillic)

Times Greek (Times Greek)

Non-Latins Non-Latines Typeface that uses a non-Latin alphabet.

Adapted from: Ponot, René. “Maximilien Vox, Le Typographe.” Maximilien Vox:Un Homme et les Lettres (Paris: Agence Culturelle de Paris, 1994), 87–89.

Appendix C: ATYPI-Vox Typeface Classification System

Vox aDapteD

The author of our textbook adapts the Vox system into more useful and accurate categories.

The Vox classification is useful in that it describes a clear, linear progression of typographic development. However, since Vox’s time, type design has continued to change and evolve. Advances in communication media and font design technology (especially, the advent of digital type founding) have resulted in literally thousands of new types. Some of these types defy description, let alone classification. While attempts have been made to expand the original Vox system by creating new or hybrid categories (for example, Neo-Clarendon or Demi-Didone), these classifications are not universally understood or accepted.

1 Humanist2 Garalde3 Transitional4 Didone

5 SlabSerif6 HumanistSans7 Grotesque8 Neo-grotesque9 Geometric10 Glyphic11 Script,Italic,andChancery12 Decorated/Ornamental

13 Blackletter14 BeyondClassication

Oldstyle

Transitional

Modern

Sans Serif

Slab Serif

Graphic

Transitional

Aa Bb Cc Dd Ee Nn Gg Ss Qq

higher contrast strokes • near vertical axis • larger x-height sharper serifs • larger counters

Garmond Baskerville Times

Modern

Aa Bb Cc Dd Ee Nn Gg Ss Qqextreme stroke contrast • vertical axis • no brackets

flat serifs • geometric counters

Didot Bodoni Modern

HUMANIST SANS

classical proportionsminimal contrast, with some variation at junctionsmed x-heightlight weight

AaBbCc

type iDentifiCation (sans serifs)

GROTESqUE

variable contrastvariation at junctionswide set

AaBbCc

NEO-GROTESqUE

little variation of stroke widthslightly condensed formhigh x-heightminimal contrastwell-defined counters

AaBbCcGEOMETRIC

geometric constructionrigorous monoline stroke widthno contrastcircular counters

AaBbCc

San Serif


no serifs • flat terminals • uniform contrast upright axis • generous x-height

Helvetica Ak. Grotesque Gil Sans

Oldstyle


low contrast strokes • angled stress • small x-height

pear-shaped terminals • small counters

Bembo Centaur Caslon

Slab Serif


hybrid of serif & sans • consistent stroke weight

very wide • heavy serif

Clarendon Rockwell Courier

Graphic


Display-only • illustrative, conceptual includes scripts

Snell Poplar trajan

boDoni?

L E T T E R T E R M I N O L O G Y

typeface vs font

Quartz

Quartz

Quartz

Quartz

Quartz

Quartz

Quartz

ABCDEFGHIJKL NOPQRSTUV

abcdefghijkl nopqrstuvwxyz

0123456789

!@#$%^&*()_+?”><:;,./’;[]{}

typicaL fonts of a typeface

Quartz Adobe Garamond Regular

Quartz Adobe Garamond Italic

Quartz Adobe Garamond Bold

Quartz Adobe Garamond Bold Italic

additionaL fonts

Quartz Additional weights (Adobe Garamond Semibold)

Quartz Additional widths (Grotesque MT Bold Extended)

QUARTZ Swash characters (Adobe Garamond)

quartz 0123456789 Small Caps (Adobe Garamond Small Caps and Oldstyle Figures)

Quartz Special caps (Adobe Garamond Titling Capitals)

speciaL characters/fonts

fl fi Ligatures (Adobe Garamond)

QUARTZerclxLn Dingbats (Zaph Dingbats)

quartadw Type Ornaments (Minion Ornaments)

Æ œ œ Dipthongs

Cochin

ITC Goudy Sans

Futura

true vs fake itaLics

I am a true italic.I am a fake italic.



Cochin

ITC Goudy Sans

Futura

type terminoLoGy

stress

In a curved letter, the thickening of curved strokes and the position or angle of this thickening in relationship to the vertical axis. An important design feature of most typeface and lettering styles, stress is derived from a related feature in writing created with a broad-edged writing instrument. Stress is typically

described as either diagonal (oblique or biased), as in a typeface such as Sabon, or vertical as in Century Schoolbook however, horizontal stress is also possible

(as in P.T. Barnum or Branding Iron). The characters of a typeface may all share the same angle of stress or may have slightly varying angles; sometimes

capitals and lowercase letters in the same typeface are designed to have different angles of stress. Also called curve stress; a curved letter may also be

said to have an inclined or tilted axis.

o o o o d

type terminoLoGy

color

The overall value of lightness or darkness that is created by words, lines, paragraphs, or pages of type when viewed against their background. The combination of typographic factors that contribute to the color of a text

include the typeface design, weight, size, x-height in relation to capital height, line length, leading, word spacing, and character spacing. Some authors use

this term to refer to the overall appearance of a typeface.

Rilisi blandreros alis nisi.Doloreet iusto doloreet venim dolore tat loreet lortisi.Idunt nulla at. Gait veliquatum deliquat dolutatie ea acin velenim ali-sim nit am del iniat luptat.Olenibh eum digna feu faci tet nis alit am dionsequi endipit prat. Tis nonsequat atie velit, quate feugueros dolestionsed dolor alisit, quat.Utat nisisis ametum dunt ad tet la feugue.

Rilisi blandreros alis nisi.Doloreet iusto doloreet venim dolore tat loreet lortisi.Idunt nulla at. Gait veliquatum deliquat dolutatie ea acin velenim alisim nit am del iniat luptat.Olenibh eum digna feu faci tet nis alit am dionsequi endipit prat. Tis nonsequat atie velit, quate feugueros dolestionsed dolor alisit, quat.Utat nisisis ametum dunt ad tet la feugue.

Helvetica 12/14 Mrs. Eaves 12/14

Type Terminology

Contrast

The contrast refers to the thickness difference between vertical and horizontal strokes. The difference between the thicker and the thinner part of the

character. Bodoni and Didot are very contrasted type designs.

o A o A

type terminoLoGy

body height

Like most type terminology, the point system is based in the traditions of hand-set metal type, and the point size originally referred to the dise of the “body” upon which the letterform was cast. This body was of a height to accomodate

both the highest ascender and the deepest descender in the alphabet, and to leave some additonal body clearance necessary to prevent ascenders and descenders from touching. For this reason, a 12-point (12pt) capital letter is not 12 points in height, and 12pt letters in come typefaces may appear

considerably larger than others despite being the same point size. This variation is due to differences in body clearance and, primarily, to differences in x-height.

All TypeBody

Hei

ght

Body Clearance

Cap Height

X-height (mean line)

Baseline

Body Clearance

Side Bearing

Type Terminology

The point System

A unit used to measure type, typically applied to the vertical height or size of typefaces and characters and to the space between baselines (line spacing or interlinear space). Traditionally equal to roughly 1/72 inch but varies in size among different countries and manufacturers. In the Anglo-American point system, one point typically equals .01383 inch (.351282 millimeter); in the

Didot (French) system, it equals .01483 inch (.376682 millimeter).

72 pts = 1 in

6 picas = 1 in

12 pts = 1 pica

1p6 = .25 in

1p6 = “one pica, six points”

The em: A unit of measurement equal to the current type size, e.g., an em in 12-point type is equal to 12 points. Originally derived from the width of the upper-case M.

anatomy of a Letterform

stroke

The term stroke is applicable to any straight or curves line used to define a major structural portion of a letter. Any single linear element in a character.

N R


stem

Vertical, full-length stroke in upright characters like T or L; also called Main stroke

k T L


descender

Part of a lowercase letter projecting below the baseline.

p y q


ascender

ortion of a lowercase character extending above the height of a lowercase x (e.g., b, d, f, h, k, l).

x h b l


shoulder

Curved stroke aiming downward from a stem (h, m, n)

h m n


serif

The beginning or terminal stroke drawn at right angle or obliquely across the arm, stem, or tail of a letter.

B R


apex

The apex of a font character is the join of two strokes at the highest point of the letter - for example the tip of the capital letter ‘A’.

A


Loop

Small stroke extending from the upper-right side of the bowl of lowercase g; also appears in the angled or curved lowercase r. Might also

just be referred to as a bowl.

g


spine

The central curved stroke of the letter S.

Ss


arm

Short horizontal or oblique strokes projecting from a stem, as in the letters E, F, L, T, and Y and the upper right strokes of K and k. Some authors use this term to refer only to horizontal strokes projecting from a stem. In font terminology, the arm of a letter is a short stroke that is free at one or both

ends.

E F L T k Y


Leg

Short, descending portion of a letter (e.g., k, R)

k R


crossbar (bar)

horizontal stroke that connects two strokes in capital letters such as A or H.

Afe


terminal

T he end of a stroke that does not include a serif.

a


ball terminal (ball)

A circular ‘blob’ shape at the end of a stroke on certain letterforms of some serif fonts. The ‘a’ in Times is one example.

a


finial

The part of a letter known as a finial is usually a somewhat tapered curved end on letters such as the bottom of C or e

e e e


counter

The white space enclosed by a letterform, whether wholly enclosed, as in d or o, or partially, as in c or m.

D o e C m


bracket

The joining of the stem of a letter to the serif. This is also referred to as a fillet. The term bracket is, however, readily understood in the sense

of its meaning as a support.

A I


ear

Small stroke extending from the upper-right side of the bowl of lowercase g; also appears in the angled or curved lowercase r.

g r


Link

The stroke connecting the bowl and the loop of the lowercase g.

u h g


spur

Seriflike extensions projecting from arms and curved strokes on such letters as C, E, F, G, S, T, and Z; also sometimes on letters such as a, c, and f. Also

known as a spur serif. Alternatively, some authors reserve the term spur for the small projection at lower right on the G in some typefaces and use beak for

projections on the other letters.

S b G

S PA C I N G

SpacinG

Tracking — The average space between characters in a block of text. Sometimes also referred to as letterspacing.

Kerning — In metal type, any part of a character created by the typefounder to overhang (extend beyond) its allocated space on the surface of its metal block, as in the italic f. This extension is necessary to create appropriate spacing between some character pairs. In contemporary usage, a verb, indicating the selective removal or addition of small increments of space between individual character pairs (for example, to kern a pair of letters)

The letters of the alphabet, the characters of a typeface,are building blocks. Besides being symbols to construct a written language, they can be used to compose any visual impression imaginable.


The letters of the alphabet, the characters of a typeface,are building blocks. Besides being symbols to construct a written lan-guage, they can be used to compose any visual impression imaginable.

Tr TrTracking

Kerning

Good

Good SpacinG

Excellent letter spacing makes the difference between good type and great type, and it displays the difference between a good designer and a great designer. Inappropriate or unconscious letter spacing can make type difficult to read, difficult to comprehend, and difficult to respect.

The objective of kerning is to acheive the appearance of equal spacing on either side of each character. Thankfully, the majority of your kerning needs are addressed by InDesign’s automatic kerning methods, of which there are two kinds: Metrics and Optical

Bad

kerninG

Certain pairs of letters always need kerning, such as “To” or “Va.” A well-designed face has the kerning built into the font metrics so that when you type certain character combinations, they tuck into each other nicely. These typefaces include a number of these “kern pairs.” In fact, a font might have anywhere from 50 to several thousand kern pairs.

InDesign applies these kern pairs by default, as you can tell by the Kerning field in the Character palette, which typically says “Metrics.” This means that it’s using the font metrics and applying the kerning value built into the font. That’s why, when you click the insertion point between two characters, this same Kerning field displays a number in parentheses—that’s the kerning value of the auto pair. (That’s also why type automatically looks better in InDesign than it does in most word processors, which don’t usually apply the kern pairs.)

LA P. To Tr Ta Te Ty

Wa WA We Wo Ya Yo

Common kerning pairs

manual kerninG

What we mean by manual kerning is adjusting the space between two characters, which is the most important letter-spacing feature as it’s the only one dependent on your eyes. Manual kerning is what you’ll use to fine-tune your text after all other options have been adjusted.

When you use keyboard shortcuts to kern, InDesign applies the amount that you set in the Preferences dialog box at the beginning of this article. Say, for example, when you’re using the Type tool in InDesign, if you place the insertion point between two characters and use the keyboard shortcut Option-Left Arrow (PC: Alt-Left Arrow), each tap of the left arrow removes 5/1000 em. Option-Right Arrow (PC: Alt-Right Arrow) increases the space 5/1000 em.

If you hold down the Command key in addition to the Option and Arrow keys (PC: Ctrl-Alt-Arrow key) to remove or increase the kerning, this will remove or increase 25/1000 em instead of 5/1000.

Any manual kerning you apply is added to the kern pair that might be built into the two characters. The Kerning field then displays the total amount of the kern pair and any manual kerning you apply.

Note: The kerning value is always applied to the character to the left of the insertion point. You can copy-and-paste that character and the kerning value will go with it. If you delete the character, then the character and kerning are deleted.

When to use manual kerning:

1. Headlines & display type

2. Drop Caps

3. Combined fonts (especially roman/italic combinations)

4. Script typefaces

word SpacinG

The space between words has traditionally been based upon a space equivalent to the body width of a lowercase i. This space can be adjusted manually for display and title setting. In text setting, it can be specified either as a constant — in the case of flush, or ranged, type — or as a maximum and minimun — in the case of justified type. The majority of digital type media give a generous space between words, and th appearance and readibility of text can in many cases be improved by reducing the word spacing, giving greater continuity and less interruption to the flow of the sentence.

The letters of the alphabet, the characters of a typeface,are building blocks. Besides being symbols to construct a writ-ten language, they can be used to compose any visual impres-sion imaginable.


Auto

Plus 20%


Minus 5%

creative SpacinG

typography 1 overview (intro to gd, wk 4)

Design

known movable type system

metal movable type

abstract writing system

b r i e f o v e r v

gothic script

gutenberg bible

carolingian script

notable script