Typography Guide

Typography&Digital Publishing

TY P

G

R

A

P

O

Y H

ABCDEFGHIIIII Table Designing of Contents with Type 2 JKLMNOPQRS TUVWXYZ1234 567891011121314 151617181920212 %$%&*()!><,.?/{} Families of Type

Old Style: Garamond Transitional: Baskerville Modern: Didot

1

3 4 5

Contemporary Display: Zapfino History of Type

6 7 8 9

Serifs San Serifs

16

Egyptian: Bookman

Contemporary: Avant Garde

Leading

15 17

Kerning

18 19

Tracking

20

Widows & Orphans

21

Ligatures

23

X-height

Font Families Drop Caps Lists

24 26 27

Families of Type 3

4 2 {}

Garamond

Baskerville

Didot

Century

Helvetica

Zapfino

Old Style 1617

Transitional 1757

Modern 1788

Egyptian 1894

Contemporary

Contemporary Display

1957

1998

There are six categories that most type fits into. Old Style, Transitional, Modern, Egyptian, San Serif and Display.

Old Style

Old Style type began with designs of the punchcutter Francesco Giffo, who worked for the famous Venetian scholar-printer Aldus Manutius during the 1490s. Giffo’s designs evolved from earlier Italian type designs. His Old Style capitals were influenced by carved Roman capitals; lowercase letters were inspired by fifteenth-century humanistic writings, bases on earlier Carolingian minuscules. Old style letterforms have the weight stress of rounded forms at an angle, as in handwriting. The serifs are bracketed (that is, unified with the stroke by a tapered,

curved line). Also, the top serifs on the lowercase letters are at an angle. Other famous old style fonts are Jenson and Garamond (shown)

Transitional

During the 1700’s, typestyles gradually evolved from Old Style to Modern. Typefaces from the middle of the eighteenth century, including those by John Baskerville, are called Transitional. The contrast between thick and thin strokes is greater than Old Styles faces. Lowercase serifs are more horizontal and the stress within the rounded forms shifts to a less diagonal axis. Transitional characters are usually wider than old style characters.

Families Designing ofwith Type Type Modern

Late in the 1700s, typefaces termed Modern evolved from Transitional styles. These typefaces have extreme contrasts between thick and thin strokes Thin strokes are reduced to hairlines. The weight stress of rounded characters is vertical. Serifs are horizontal hairlines that join the stems at right angle without bracketing. The uppercase width is regularized; wide letters such M and W are condensed and other letter such a P and T are expanded. Modern-style typefaces have strong geometric quality projected by rigorous horizontal, vertical, and circularforms.

Egyptian or Slab Serif

In 1815, the English typefounder Vincent Figgins introduced slab-serif typestyles under the name Antique. At the time, there was a mania for ancient Egyptian artifacts, and other typefounders adopted the name Egyptian for their slab-serif designs. Others believe the origin is Napoleonâ&#x20AC;&#x2122;s occupation of Egypt when soldiers wishing to communicate across large expanses of dessert created letterforms with black heavy serifs These typefaces have heavy square or rectangu-

4

lar serifs that are usually unbracketed. The stress of curved stokes is often minimal. In some slab-serif typefaces, all strokes are the same weight.

Sans Serif

The first sans serif typestyle appeared in an 1826 specimen book of the English type founder William Caslon IV (great grandson of William Caslon). The most obvious characteristic of these styles is, as the name implies, the absence of serifs. In many sans serifs typefaces, strokes are uniform, with little or no contrast between thick and thin stokes. Stress is almost always vertical. Many sans serifs typefaces are geometric in their construction; others combine both organic and geometric qualities.

Display

Display fonts are usually ornate with embellishments that make them a distinctive quality. These qualities are usually so wild as to prevent them from being read as body copy so are used as headlines or signs.

Old Designing Style --with Garamond Type

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWYXYZ 1234567890!@#$%^&*() abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWYXYZ 1234567890!@#$%^&*()

5

Traditional -- Baskerville

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWYXYZ 1234567890!@#$%^&*() abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWYXYZ

6

Modern -- Didot

7

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWYXYZ 1234567890!@#$%^&*() abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWYXYZ 1234567890!@#$%^&*()

Egyptian -- Bookman

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWYXYZ 1234567890!@#$%^&*() abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWYXYZ 1234567890!@#$%^&*()

8

Display -- Zaphino 9 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWY XY Z 1234567890!@#$%^&*()

History of Type Basics of Typography

Typography, the art of designing with type, began in the West around 1455 when Johannes Gutenberg perfected the craft of printing from individual pieces of type.

From this early technology we draw a great deal of our current terminology. This section introduces the origins of the alphabet, defines the terms and measurements that will form the basis of your typographic vocabulary, and examines how we read. Once you are familiar with this information, you will be able to communicate your ideas clearly and work efficiently with type.

The alphabet is composed of symbols, each representing sounds made in speech. The symbols we use today are derived from those used thousand of years ago. However, the ancient form did not represent sounds but were pictures of things or symbols for ideas.

Pictographs

At some point in time, people began to communicate visually. They made simple drawings of the things that existed in their

10 world: people, animals, weapons, and so forth. These images, called pictographs, are symbols representing an object.

Ideographs As the need developed to communicate more abstract thoughts, the symbols began to take on broader meanings: ox, for example, could also mean food. Abstract thoughts could also be communicated by combining different pictographs: a pictograph of a woman and that of a child could combine to mean happiness, for instance. Now the symbols no longer represent objects, but ideas.

These symbols are called ideographs. A more contemporary example of the ideograph is the warning symbol for poison. The skull and crossbones are not seen for what they are, but for what they could represent: death, pirates, or poison.

This evolution in visual communication from pictographs to ideographs represented a major step in the development of a written language. There were, however, disadvantages to this system: not only were the symbols complex, but their numbers ran into the tens

History of Type of thousands, making learning more difficult and writing slow.

Phoenician Alphabet

As a nation of traders and merchants, the Phoenicians needed a simplified writing form that would allow them to keep ledgers and write business messages with a minimum of fuss. Around 1200 B.C., a new concept in writing communication evolved: using symbols to represent the sounds made in speaking rather than using symbols to represent ideas or objects.

To better understand how this change came about, let’s look at the first two letters of our alphabet, A and B, and see how they evolved. 0ne of the primary spoken sounds the Phoenicians wished to record was “A.” This sound occurred at the beginning of their word aleph, meaning ox. Instead of devising a new symbol for this sound, they simply took the existing symbol for the object. They did the same for the sound “B,” which was found in their word beth, meaning house.

Again, they took the existing symbol for the object and applied it to the sound. In

11 this way, by using a different symbol for each of the recognizable spoken sounds, the Phoenicians developed their alphabet. As this system had far fewer symbols than the older picto-ideograph system, it was easier to learn, and the simplified letterforms made rapid writing possible.

Greek Alphabet

The Greeks began to adopt the Phoenician alphabet around 800 B.C. They saw something quite different in the potential of this new system: to them it was a means of preserving knowledge. Along with the alphabet, the Greeks took the Phoenician names for the letters and made them Greek. For example, aleph became alpha, beth became beta. From these two letters we derive our word alphabet.

The alphabet the Greeks acquired had no vowels, only consonants. Words would have looked similar to our abbreviations—Blvd., Mr., St. Although this might work very well for business ledgers; its broader use was limited. Therefore, the Greeks added five vowels. They also formalized the letterforms, and

History of Type 12 in 403 B.C., a revised alphabet of only capital letters was officially adopted by Athens.

Roman Alphabet

Just as the Greeks had modified the Phoenician alphabet, the Romans adopted and modified the Greek alphabet. Thirteen letters were accepted unchanged from the Greek: A, B, E, H, I, K, M, N, 0, T, X, Y, Z. Eight letters were revised: C, D, G, L, P, R, S, V. Two letters were added: F and Q. This gave the Romans a total of twenty-three letters, all that were needed to write Latin. The Romans also dropped the Greek designation for the letters, such as alpha, beta, gamma, for the simpler A, B, Câ&#x20AC;&#x2122;s that we know today. This gave the Romans a total of twenty-three letters. The Romans also dropped the Greek designations for the letters, such as alpha, beta, and gamma, and substituted simpler sounds to represent the letters, such as our A, B, Câ&#x20AC;&#x2122;s of today. The letters U and W were added to the alphabet about a thousand years ago, and J added five centuries later.

Uncial is a majuscule script commonly used from the 3rd to 8th centuries AD by Latin

and Greek scribes. From the 8th century to the 13th century the script was more often used as a display script in headings and titles.Early uncial script most likely developed from late Roman cursive. Early forms are characterized by broad single stroke letters using simple round forms taking advantage of the new parchment and vellum surfaces, as opposed to the angular, multiple stroke letters which are more suited for rougher surfaces, such as papyrus. In the oldest examples of uncial, such as the De bellis macedonicis manuscript in the British Library, all of the letters are disconnected from one another, and word separation is typically not used. Word separation, however, is characteristic of later uncial usage.

As the script evolved over the centuries, the characters became more complex. Specifically, around AD 600, flourishes and exaggerations of the basic strokes began to appear in more manuscripts. Ascenders and descenders were the first major alterations, followed by twists of the tool in the basic stroke and overlapping. By the time the more compact minuscule scripts arose circa AD 800, some of the evolved uncial styles formed the basis

Designing with Type for these simplified, smaller scripts. Uncial was still used, particularly for copies of the Bible, tapering off until around the 10th century. There are over 500 surviving copies of uncial script, by far the largest number prior to the Carolingian Renaissance.

Small Letters

13

800 and 1200. Codices, pagan and Christian texts, and educational material were written in Carolingian minuscule throughout the Carolingian Renaissance. The script developed into Blackletter and became obsolete, though it forms the basis of more recent scripts.

Capital (majuscule) letters where the only letters till the forth century. Small (minuscule) letters were a natural outgrowth of writing and rewriting capital letters with a pen. At first only a few minuscules were consistently written, but eventually a full set of majuscules and minuscules was being used. As writing became common, greater economy was desired, and letters were compressed so that more words could fit on a line. These dense letters are called Gothic or Black Letter.

Prior to Gutenbergâ&#x20AC;&#x2122;s invention of printing from movable type in the mid-fifteenth century, there were two popular schools of writing in western Europe: Black Letter in Germany and the North and the round Humanistic hand in Italy. It was the Black Letter forms that were used as the models for the typeface designed by Gutenberg in 1455. The Humanistic hand was a revival of the Carolingian minuscule of the ninth century and is the basis of our small letters. A flowing form of this same hand is the basis of our italic.

Carolingian or Caroline minuscule is a script developed as a writing standard in Europe so that the Roman alphabet could be easily recognized by the small literate class from one region to another. It was used in Charlemagneâ&#x20AC;&#x2122;s empire between approximately

Punctuation

In early Greek and Roman writing, there was no punctuation, as we know it. Words were either run together or separated with a dot or slash. This can be seen in the handwritten specimens of the Rustica, Half-Uncials, and

History of Type 14 Carolingian minuscules. It was not until the fifteenth century, with the advent of printing, that the rules of punctuation began to become formalized.

Designing with Type

15

Aa

Serif Fonts

Times Roman is a classic serif font.

16

Aa

Sans Serif Fonts

Times Roman is a classic serif font.

17

Leading Cient maion ratiatemos aut etur anduciumquas dioremp oreptatati dolupit aturestrum hicieni ipis endunt exere, optatur?

Inis ex exped ea cuptatur antiam Times 10/10 Cient maion ratiatemos aut etur anduciumquas dioremp oreptatati dolupit aturestrum hicieni ipis endunt exere, optatur?

Inis ex exped ea cuptatur antiam Times 10/11 Cient maion ratiatemos aut etur anduciumquas dioremp oreptatati dolupit aturestrum hicieni ipis endunt exere, optatur?

Inis ex exped ea cuptatur antiam Times 10/12

Cient maion ratiatemos aut etur anduciumquas dioremp oreptatati dolupit aturestrum hicieni ipis endunt exere, optatur?

Inis ex exped ea cuptatur antiam Times 10/13 Cient maion ratiatemos aut etur anduciumquas dioremp oreptatati dolupit aturestrum hicieni ipis endunt exere, optatur?

Inis ex exped ea cuptatur antiam Times 10/14 Cient maion ratiatemos aut etur anduciumquas dioremp oreptatati dolupit aturestrum hicieni ipis endunt exere, optatur?

Inis ex exped ea cuptatur antiam Times 10/15

18 Cient maion ratiatemos aut etur anduciumquas dioremp oreptatati dolupit aturestrum hicieni ipis endunt exere, optatur?

Inis ex exped ea cuptatur antiam Helvetica 10/10 Cient maion ratiatemos aut etur anduciumquas dioremp oreptatati dolupit aturestrum hicieni ipis endunt exere, optatur?

Inis ex exped ea cuptatur antiam Helvetica 10/11 Cient maion ratiatemos aut etur anduciumquas dioremp oreptatati dolupit aturestrum hicieni ipis endunt exere, optatur?

Inis ex exped ea cuptatur antiam Helvetica 10/12

Cient maion ratiatemos aut etur anduciumquas dioremp oreptatati dolupit aturestrum hicieni ipis endunt exere, optatur?

Inis ex exped ea cuptatur antiam Helvetica 10/13 Cient maion ratiatemos aut etur anduciumquas dioremp oreptatati dolupit aturestrum hicieni ipis endunt exere, optatur?

Inis ex exped ea cuptatur antiam Helvetica 10/14 Cient maion ratiatemos aut etur anduciumquas dioremp oreptatati dolupit aturestrum hicieni ipis endunt exere, optatur?

Inis ex exped ea cuptatur antiam Helvetica 10/15

X-height

19

xph xph Compare the X-height of the Didot (right) to Verdana (left). Both fonts are 100 points high but note the difference in the height including ascenders and descenders. The height of the Verdana is

much higher making the letterforms themselves much more open and easier to read. Verdana was designed for the internet by Matthew Carter.

Designing with Type

Pratt Pratt

20

Designing with Type

Pratt Institute -100 Pratt Institute -75 Pratt Institute -50 Pratt Institute -25 Pratt Institute Pratt Institute +25 Pratt Institute +50 Pratt Institute +75 Prat t Inst it u t e + 1 0 0

21

Widows Designing & with Orphans Type Widows and Orphans.

Words or short lines at thebeginning or end of a paragraph,which are left isolated at the top or bottom of a column, separated from the rest of theparagraph.

Old Style type began with designs of the punchcutter Francesco Giffo, who worked for the famous Venetian scholarprinter Aldus Manutius during the 1490s. Giffoâ&#x20AC;&#x2122;s designs evolved from earlier Italian type designs. His old style capitals were influenced by carved Roman capitals; lowercase letters were inspired by fifteenthcentury humanistic writings, bases on much earlier Carolingian

22 minuscules.

Wrong: One word isolated at the top of a paragraph

Old Style type began with designs of the punchcutter bases on earlier Carolingian Francesco Giffo, who worked minuscules. for the famous Venetian Corrected: Two lines of type scholarprinter Aldus Manutius during the 1490s.

Giffoâ&#x20AC;&#x2122;s designs evolved from earlier Italian type designs.

His old style capitals were influenced by carved Roman capitals; lowercase letters were inspired by fifteenthcentury humanistic writings,

Font Designing Families with Type Type face

Light Regular

Arial

Bold Italic Bold Italic

♦

♦

♦

♦

♦

♦

♦

♦

Baskerville ♦

♦

♦

♦

♦

♦

♦

♦

♦

♦

♦

♦

♦

♦

♦

Century Schoolbook ♦

♦

♦

Arial Narrow Bodoni

♦

Bookman Caslon Pro

Copperplate

23

♦

♦

♦

♦

♦

♦

♦

♦

♦

♦

♦

♦

♦

♦

♦

♦

♦

♦

♦ ♦

♦

♦

Helvetica Neue

♦

♦

♦

♦

Franklin Gothic Futura Garamond Pro Gill Sans Impact

♦

Palatino ♦ Rosewood Trajan

♦

♦

♦

♦

♦

♦

♦ ♦

♦

♦

♦

♦

♦

♦

♦

♦

Verdana ♦

♦

♦

♦

Times Roman ♦ Skia

Zaphino ♦

♦

Condensed

♦

Initial Caps

D

ae. Xeribea dolore pernam fugia velende liquide bisite sa quo dolorem porem. Ut inctasit, quat lantiur reperi officit fugias secat doluptas venienimpel ipsum et quiderae pratiat iunt. Tin consequae plis des et reptam est untus, offic tem fugitiunt Etur sitissus dolupti beriaep uditendis ditati con cusdaerro qui solorio quid quas at ut volupta simperibus nullataes audipsam quas sequis id evelibea se vel evelique offictur, seditem eture soluptat endit dolorum fuga.

Et voluptatur? Il mi, acere es quia venis archil molore comnis ma volorit, et ut dolorio nempor adi volorpost et por alitatior sum invendae atem harupta acias atem

D

ae. Xeribea dolore pernam fugia velende liquide bisite sa quo dolorem porem. Ut inctasit, quat lantiur reperi officit fugias secat doluptas venienimpel ipsum et quiderae pratiat iunt. Tin consequae plis des et reptam est untus, offic tem fugitiunt Etur sitissus dolupti beriaep uditendis ditati con cusdaerro qui solorio quid quas at ut volupta simperibus nullataes audipsam quas sequis id evelibea se vel evelique offictur, seditem eture soluptat endit dolorum fuga.

Et voluptatur? Il mi, acere es quia venis archil molore comnis ma volorit, et ut dolorio nempor adi volorpost et por alitatior sum invendae atem harupta acias atem

24 Dae. Xeribea dolore pernam fugia velende liquide bisite sa quo dolorem porem. Ut inctasit, quat lantiur reperi officit fugias secat doluptas venienimpel ipsum et quiderae pratiat iunt. Tin consequae plis des et reptam est untus, offic tem fugitiunt Etur sitissus dolupti beriaep uditendis ditati con cusdaerro qui solorio quid quas at ut volupta simperibus nullataes audipsam quas sequis id evelibea se vel evelique offictur, seditem eture soluptat endit dolorum fuga.

Et voluptatur? Il mi, acere es quia venis archil molore comnis ma volorit, et ut dolorio nempor adi volorpost et por alitatior sum invendae atem harupta acias atem errum remqui omniene volor alia nonsequi omni none

Initial Caps

D

ae. Xeribea dolore pernam fugia velende liquide bisite sa quo dolorem porem. Ut inctasit, quat lantiur reperi officit fugias secat doluptas venienimpel ipsum et quiderae pratiat iunt. Tin consequae plis des et reptam est untus, offic tem fugitiunt Etur sitissus dolupti beriaep uditendis ditati con cusdaerro qui solorio quid quas at ut volupta simperibus nullataes audipsam quas sequis id evelibea se vel evelique offictur, seditem eture soluptat endit dolorum fuga.

25 Dae. Xeribea dolore pernam fugia velende liquide bisite sa quo dolorem porem. Ut inctasit, quat lantiur reperi officit fugias secat doluptas venienimpel ipsum et quiderae pratiat iunt. Tin consequae plis des et reptam est untus, offic tem fugitiunt Etur sitissus dolupti beriaep uditendis ditati con cusdaerro qui solorio quid quas at ut volupta simperibus nullat-

Dae. Xeribea dolore pernam fugia velende liquide bisite sa quo dolorem porem. Ut inctasit, quat lantiur reperi officit fugias secat doluptas venienimpel ipsum et quiderae pratiat iunt. Tin consequae plis des et reptam est untus, offic tem fugitiunt Etur sitissus dolupti beriaep uditendis ditati con cusdaerro qui solorio quid quas at ut volupta simperibus nullataes audipsam quas sequis id evelibea se vel evelique offictur, seditem eture soluptat endit dolorum fuga.

Et voluptatur? Il mi, acere es quia venis archil molore comnis ma volorit, et ut dolorio nempor adi volorpost

Lists

26

After the introduction of computer fonts based on fully scalable outlines, a broader definition evolved. Font is no longer size specific, but still refers to a single style.

Bulmer regular, Bulmer italic, Bulmer bold and Bulmer bold italic are four fonts, but one typeface.

After the introduction of computer fonts based on fully scalable outlines, a broader definition evolved. Font is no longer size specific, but still refers to a single style.

Bulmer regular, Bulmer italic, Bulmer bold and Bulmer bold italic are four fonts, but one typeface.

Contents 1 Metal type 2 Font characteristics

Contents ❖ Metal type ❖ Font characteristics

Weight

2.1 Weight 2.2 Slope 2.3 Width 2.4 Optical size 2.5 Metrics 2.6 Serifs 2.7 Proportion

3 Etymology 4 References

Slope Width

Optical size

Metrics Serifs Proportion

❖ Etymology ❖ References

After the introduction of computer fonts based on fully scalable outlines, a broader definition evolved. Font is no longer size specific, but still refers to a single style.

Bulmer regular, Bulmer italic, Bulmer bold and Bulmer bold italic are four fonts, but one typeface.

Contents ❖ Metal type ❖ Font characteristics Weight Slope Width

Optical size

Metrics Serifs

Proportion

❖ Etymology ❖ References