Typography – Important Points to Remember There are six basic groups of type: Serif (fonts with a finishing terminal - stroke)

Garamond: The quick brown fox jumps over the lazy dog. Times New Roman: The five boxing wizards jump quickly. Sans Serif (French word for “without.” Fonts without a finishing terminal)

Helvetica: The quick brown fox jumps over the lazy dog. Futura: Jim just quit and packed extra bags for Liz Owen.

Script (never set in all caps!)

Shelley: Brawny gods just flocked up to quiz and vex him. Fresh Script: William Jex quickly caught five dozen Republicans. Old English (never set in all caps!)

Cloister Black: The vixen jumped quickly on her foe barking with zeal.

Blackletter 686 BT: Harry jogging quickly, axed zen monks with beef vapor. Decorative Skaterdudes: Five or six big jet planes zoomed quickly by the tower. Shuriken Boy: Six big devils from Japan quickly forgot how to waltz. Calligraphy...

Apple Chancery: The quick brown fox jumps over the lazy dog. Arkona: Big July earthquakes confound zany experimental vow.

...or Handwriting Christina: We have just quoted on nine dozen boxes of gray lamp wicks. Emperor©s Scrawl: The quick brown fox jumps over the lazy dog.

A font is a complete assortment of type in one face, weight and style A typeface (aka font family) is a set of characters based on a specific design (example: Arial Bold, Arial Italic, Arial Bold Italic) A type family consists of all the styles, weights, and other versions of a specific typeface. Light Light Italic (Oblique) Regular (Roman or Book) Italic (Oblique) Bold Bold Italic (Oblique) Ultra Bold (Black) Ultra Bold Italic (Black) Extended (can also include light, regular, italic, bold, bold italic, ultra bold, etc.) Condensed (can also include light, regular, italic, bold, bold italic, ultra bold, etc.) Type is measured in points. Inches are not used for measuring type. Before the point system, each foundry had different systems of measuring type, leading to mass confusion. The ATF adopted the point system in 1886. 12 points = 1 pica 6 picas = 1 inch 72 points = 1 inch Standard size of type is available in sizes ranging from 5/6 points to 72 points. Body text or body copy is type that is 14 points or smaller. Display size of type are sizes above 14 points are mostly used for headlines. Ornaments should not overpower the type. Bullets, stars, brackets, etc. should not distract from the type style used.

BASIC TYPE ANATOMY

❶

❹

Father xylophone is a funny name. ➋

➌

❻

❼

The distance between the baseline and the top of the lower case letters ➌ x-height: (excluding ascenders or descenders), or the height of the letter “x” The part of some lowercase letters with an upward vertical stem (like “b” and ➋ ascender: “h”) that extends above the x-height The part of some lowercase letters (like “g” and “j”) that extends below the ❼ descender: baseline The imaginary line on which a line of text rests. Descenders fall below this ❺ baseline: line. The baseline is the point from which some elements of type are measured including x-height and leading.

height: The size of most uppercase characters in a font. Measured from the ascender ❶ cap line to the baseline. The space between lines of ❻ leading: Leading examples: text. Pronounced ledd-ing, its name comes from the practice of using metal strips (usually lead) of varying widths to separate lines of text in the days of metal type. Leading may also be called line spacing. Leading amount is measured from baseline to baseline. The type size and amount of leading you choose will enhance or detract from readability. Leading is dependent upon the size of type. The larger the size of type, the more leading that is required between the lines. Allow at least 20% of the point size for the leading – set leading for 120% (i.e. 10 pt type should have 12 pts of leading)

10 points of type / 10 points of leading

Gather material and inspiration from various sources and bring them together. Examine other cultures and draw inspiration from diverse styles, imagery, and compositional structures. Go to the movies, look at magazines, listen to comedians, read humorists’ works, watch music videos, look at all graphic design.

10 points of type / 11 points of leading

Gather material and inspiration from various sources and bring them together. Examine other cultures and draw inspiration from diverse styles, imagery, and compositional structures. Go to the movies, look at magazines, listen to comedians, read humorists’ works, watch music videos, look at all graphic design.

10 points of type / 12 points of leading

Gather material and inspiration from various sources and bring them together. Examine other cultures and draw inspiration from diverse styles, imagery, and compositional structures. Go to the movies, look at magazines, listen to comedians, read humorists’ works, watch music videos, look at all graphic design.

❺

❹type size: From the top of the ascender to the bottom of the descender letterspacing: The spacial interval between individual letters

wordspacing: Adjusting space within and between words when necessary. kerning: Selective letterspacing - the adjustment of space between pairs of letters. Some pairs of letters create awkward spaces, so a designer might add or subtract space between those letters Adjusting the letterspacing between individual letters is called kerning.

needs Kerning • has Kerning

tracking: Overall letterspacing – the adjustment of space for groups of letters and entire blocks of text. Tracking can change the overall appearance and readability of the text, making it more open and airy or more dense. Adjusting the spacing between all the letters of a word is called tracking.

needs Tracking • has Tracking alignment: Lining up (or not) the edges of text. Type arrangement or alignment should enhance readability. Type that is flush left with a ragged right is the easiest to read. Break lines in natural places to enhance meaning. Choose a proper line length. Long line lengths are hard to read. Paragraphs that are too long are difficult to read. Hyphenation: When words are too long to fit on a single line, hyphenation splits the word and places the latter half on the next line of type. If you use hyphenation, limit hyphens to no more than three in a row. Some people limit to one or two. Do not hyphenate the last word in a paragraph. This creates a widow/orphan situation. Do not hyphenate headlines or headings. Hyphens (-), En (–) and Em (—) dashes: What’s the - symbol? It’s a hyphen. What’s an “en” dash? It’s a dash that is approximately the length of the letter “N” from “foot” to “foot” What’s an “em” dash? It’s a dash that is approximately the length of the letter “M” from “foot” to “foot” Don’t believe me? See for yourself:

N–

M—

Alignment examples: Flush Left / Ragged Right Gather material and inspiration from various sources and bring them together. Examine other cultures and draw inspiration from diverse styles, imagery, and compositional structures. Go to the movies, look at magazines, listen to comedians, read humorists’ works, watch music videos, look at all graphic design, observe human behavior. Ragged Left / Flush Right Gather material and inspiration from various sources and bring them together. Examine other cultures and draw inspiration from diverse styles, imagery, and compositional structures. Go to the movies, look at magazines, listen to comedians, read humorists’ works, watch music videos, look at all graphic design, observe human behavior. Justified Gather material and inspiration from various sources and bring them together. Examine other cultures and draw inspiration from diverse styles, imagery, and compositional structures. Go to the movies, look at magazines, listen to comedians, read humorists’ works, watch music videos, look at all graphic design, observe human behavior. Centered Gather material and inspiration from various sources and bring them together. Examine other cultures and draw inspiration from diverse styles, imagery, and compositional structures. Go to the movies, look at magazines, listen to comedians, read humorists’ works, watch music videos, look at all graphic design, observe human behavior.

widow: Widow: A short line at the end of a paragraph or column. It is considered “poor typography” because too much white space is left between paragraphs. Lessens readability. orphan: A single word or short line that appears at the beginning of a column or page.

Widows

Orphans

Wants pawn term dare worsted ladle gull hoe lift wetter murder inner ladle cordage honor itch offer lodge, dock, florist. Disk ladle gull orphan worry Putty ladle rat cluck wetter ladle rat hut, an fur disk.

Ladle.

Wan moaning, Ladle Rat Rotten Hut’s murder colder inset. Ladle Rat Rotten Hut, heresy ladle basking winsome burden barter an shirker cockles. Tick disk ladle basking tutor cordage offer groinmurder hoe lifts honor udder site offer florist. Shaker lake! Dun stopper laundry wrote! Dun stopper peck floors! Dun daily-doily inner florist, an yonder nor sorghum stenches, dun stopper torque wet strainers!” “Hoe cake, murder,” resplendent Ladle Rat Rotten Hut, an tickle ladle basking an stuttered oft. Honor wrote tutor cordage offer groin-murder,

Widowed line

“Wail, wail, wail!” set disk wicket woof. “Evanescent Ladle Rat Rotten Hut! Wares are putty ladle gull goring wizard ladle basking?” “Armor goring tumor groin-murder’s,” reprisal ladle gull. “Grammar’s seeking bet. Armor ticking arson burden barter an shirker cockles.” “O hoe! Heifer gnats woke,” setter wicket woof, butter taught tomb shelf, “Oil tickle shirt court tutor cordage offer groin-murder. Oil ketchup wetter letter, an den--O bore!” Soda wicket woof tucker shirt court, an whinny retched a cordage offer groin-murder, picked inner window, an sore debtor pore oil worming worse lion inner bet. Inner flesh, disk abdominal woof lipped honor bet, paunched honor pore oil worming, an garbled erupt. Den disk ratchet ammonol

Use “en” or “em” dashes instead

Type Formatting

• Don’t indent paragraphs by pressing the TAB key. • DO use your Paragraphs palette to do your indents for you. • Don’t use two spaces after each sentence – one will do. • Don’t press an extra return between paragraphs. • DO use the “Space Before” option in your Paragraphs palette, if you need to.

DO

Wants pawn term dare worsted ladle gull hoe lift wetter murder inner ladle cordage honor itch offer lodge, dock, florist. Disk ladle gull orphan worry Putty ladle rat cluck wetter ladle rat hut, an fur disk raisin pimple colder Ladle Rat Rotten Hut. Wan moaning, Ladle Rat Rotten Hut’s murder colder inset. Ladle Rat Rotten Hut, heresy ladle basking winsome burden barter an shirker cockles. Tick disk ladle basking tutor cordage offer groin-murder hoe lifts honor udder site offer florist. Shaker lake! Dun stopper laundry wrote! Dun stopper peck floors! Dun daily-doily inner florist, an yonder nor sorghum stenches,

DON’T

Wants pawn term dare worsted ladle gull hoe lift wetter murder inner ladle cordage honor itch offer lodge, dock, florist. Disk ladle gull orphan worry Putty ladle rat cluck wetter ladle rat hut, an fur disk raisin pimple colder Ladle Rat Rotten Hut. Wan moaning, Ladle Rat Rotten Hut’s murder colder inset. Ladle Rat Rotten Hut, heresy ladle basking winsome burden barter an shirker cockles. Tick disk ladle basking tutor cordage offer groin-murder hoe lifts honor udder site offer florist. Shaker lake! Dun stopper laundry wrote! Dun

Rivers In particularly narrow columns like this exaggerated example, justification forces disturbingly artificial word spacing, which results in “rivers” of white space flowing inside the column. Gaps inhibit smooth reading. In particularly narrow columns like this exaggerated example, justification forces disturbingly artificial word spacing, which results in “rivers” of white space flowing inside the column. Gaps inhibit smooth reading.

Legibility vs. Readability Many things contribute to readability: letterspacing, word spacing, line spacing, line breaks, line length, typeface, type style, type width, weight, capitals and lowercase letters, type alignment, italics, and color. Always ask yourself, “Can I read it with ease?” If people have difficulty reading something, they will probably will lose interest! Always judge the letterspacing optically! Word spacing and line spacing establish a rhythm, a pace at which the viewer reads the message. Space between letters, between words, between lines must be carefully considered if you want your design to be legible and memorable. Once you lose legibility, you lose meaning! Type Legibility: How recognizable is a short burst of text; The visual distinction between individual letters or groups of letters

Type Readability: How easy a large amount of text is to read; The speed at which the words are perceived

Contents

Introduction..........................................9 Furry.Tells..........................................17 Ladle.Rar.Rotten.Hut.....................19. Guilty.Looks..................................21 Center.Alley...................................27 Noiser.Rams.......................................33 Marry.Hatter.Ladle.Limb...............35 Sinker.Sucker.Socks.Pants............37 Effervescent...................................39 Oiled.Mudder.Harbored.................40 Fey-Mouse.Tells.................................41 Casing.Adder.Bet...........................43 Violate.Huskings............................47 Lath.Thing.Thongs!...........................57 Fryer.Jerker....................................58 Hormone.Derange..........................59

Contents

Introduction......................................9 Furry Tells........................................17 Ladle.Rar.Rotten.Hut.....................19. Guilty.Looks..................................21 Center.Alley...................................27 Noiser Rams...................................33 Marry.Hatter.Ladle.Limb...............35 Sinker.Sucker.Socks.Pants............37 Effervescent...................................39 Oiled.Mudder.Harbored.................40 Fey-Mouse Tells.............................41 Casing.Adder.Bet...........................43 Violate.Huskings............................47 Lath Thing Thongs!.......................57 Fryer.Jerker....................................58 Hormone.Derange..........................59

Legibility Type legibility and readability affect how the reader perceives the layout of a printed piece. The legibility and readability of a typestyle are determined by the shape and size of the x-height, ascender, and descender. tall x-height = more legible moderate length of ascenders/descenders = more legible

Wants pawn term dare worsted ladle gull hoe lift wetter murder inner ladle cordage honor itch offer lodge, dock, florist. Disk ladle gull orphan worry Putty ladle rat cluck wetter ladle rat hut, an fur disk raisin pimple colder Ladle Rat Rotten Hut. Wan moaning, Ladle Rat Rotten Hut’s murder colder inset. Ladle Rat Rotten Hut, heresy ladle basking winsome burden barter an shirker cockles. Tick disk ladle basking tutor cordage offer groin-murder hoe lifts honor udder site offer florist. Shaker lake! Dun stopper laundry wrote! Dun stopper peck floors! Dun daily-doily inner florist, an yonder nor sorghum stenches, dun stopper torque wet strainers!” “Hoe cake, murder,” resplendent Ladle Rat Rotten Hut, an tickle ladle basking an stuttered oft. Honor wrote tutor cordage offer groinmurder, Ladle Rat Rotten Hut mitten anomalous woof. “Wail, wail, wail!”

set disk wicket woof. “Evanescent Ladle Rat Rotten Hut! Wares are putty ladle gull goring wizard ladle basking?” “Armor goring tumor groin-murder’s,” reprisal ladle gull. “Grammar’s seeking bet. Armor ticking arson burden barter an shirker cockles.” “O hoe! Heifer gnats woke,” setter wicket woof, butter taught tomb shelf, “Oil tickle shirt court tutor cordage offer groinmurder. Oil ketchup wetter letter, an den--O bore!” Soda wicket woof tucker shirt court, an whinny retched a cordage offer groin-murder, picked inner window, an sore debtor pore oil worming worse lion inner bet. Inner flesh, disk abdominal woof lipped honor bet, paunched honor pore oil worming, an garbled erupt. Den disk ratchet ammonol pot honor groin-murder’s nut-cup an gnat-gun, any curdled ope inner bet. Inner ladle wile, Ladle Rat Rotten Hut a raft attar cordage, an ranker dough ball. “Comb ink, sweat

hard,” setter wicket woof, disgracing is verse. Ladle Rat Rotten Hut entity bet rum, an stud buyer groin-murder’s bet. “O Grammar!” crater ladle gull historically. “Water bag icer gut! A nervous sausage bag ice!” “Battered lucky chew whiff, sweat hard,” setter bloat-Thursday woof, wetter wicket small honors phase. “O Grammar, water bag noise! A nervous sore suture anomalous prognosis!” “Battered small your whiff, doling,” whiskered dole woof, ants mouse worse waddling. “O Grammar, water bag mouser gut! A nervous sore suture bag mouse!” Daze worry on-forgernut ladle gull’s lest warts. Oil offer sodden, caking offer carvers an sprinkling otter bet, disk hoardhoarded woof lipped own pore Ladle Rat Rotten Hut an garbled erupt. Mural: Yonder nor sorghum stenches shut ladle gulls stopper torque wet strainers.

Wants pawn term dare worsted ladle gull hoe lift wetter murder inner ladle cordage honor itch offer lodge, dock, florist. Disk ladle gull orphan worry Putty ladle rat cluck wetter ladle rat hut, an fur disk raisin pimple colder Ladle Rat Rotten Hut. Wan moaning, Ladle Rat Rotten Hut’s murder colder inset. Ladle Rat Rotten Hut, heresy ladle basking winsome burden barter an shirker cockles. Tick disk ladle basking tutor cordage offer groin-murder hoe lifts honor udder site offer florist. Shaker lake! Dun stopper laundry wrote! Dun stopper peck floors! Dun daily-doily inner florist, an yonder nor sorghum stenches, dun stopper torque wet strainers!” “Hoe cake, murder,” resplendent Ladle Rat Rotten Hut, an tickle ladle basking an stuttered oft. Honor wrote tutor cordage offer groinmurder, Ladle Rat Rotten Hut mitten anomalous woof.

“Wail, wail, wail!” set disk wicket woof. “Evanescent Ladle Rat Rotten Hut! Wares are putty ladle gull goring wizard ladle basking?” “Armor goring tumor groin-murder’s,” reprisal ladle gull. “Grammar’s seeking bet. Armor ticking arson burden barter an shirker cockles.” “O hoe! Heifer gnats woke,” setter wicket woof, butter taught tomb shelf, “Oil tickle shirt court tutor cordage offer groinmurder. Oil ketchup wetter letter, an den--O bore!” Soda wicket woof tucker shirt court, an whinny retched a cordage offer groin-murder, picked inner window, an sore debtor pore oil worming worse lion inner bet. Inner flesh, disk abdominal woof lipped honor bet, paunched honor pore oil worming, an garbled erupt. Den disk ratchet ammonol pot honor groin-murder’s nut-cup an gnat-gun, any curdled ope inner bet. Inner ladle wile, Ladle Rat Rotten Hut a raft attar

cordage, an ranker dough ball. “Comb ink, sweat hard,” setter wicket woof, disgracing is verse. Ladle Rat Rotten Hut entity bet rum, an stud buyer groin-murder’s bet. “O Grammar!” crater ladle gull historically. “Water bag icer gut! A nervous sausage bag ice!” “Battered lucky chew whiff, sweat hard,” setter bloat-Thursday woof, wetter wicket small honors phase. “O Grammar, water bag noise! A nervous sore suture anomalous prognosis!” “Battered small your whiff, doling,” whiskered dole woof, ants mouse worse waddling. “O Grammar, water bag mouser gut! A nervous sore suture bag mouse!” Daze worry on-forgernut ladle gull’s lest warts. Oil offer sodden, caking offer carvers an sprinkling otter bet, disk hoard-hoarded woof lipped own pore Ladle Rat Rotten Hut an garbled erupt. Mural: Yonder nor sorghum stenches shut

Readability Readability is all about blocks of text • Body text should be set at 11 to 9 points. The 12 point default on computers is optimal for screen viewing – it is too big for print! As a general rule...

Serif fonts are the most readable. Sans Serif fonts are the most legible.

Mama

Papa

Sister

MaMa

PaPa

SiSter Brother

Brother

Is this word Mama, Papa, Sister, or Brother? Does this shape represent the word cat, dog, or garbage?

’ . .

How do we read? From the left to the right.

This is the easiest to read. This Is Harder To Read.

This is easy to read.

THIS IS EVEN HARDER TO READ. You can easily decipher these words by seeing only their tops but it is much harder to recognize the words by their bottoms.

This is much harder to read.

The eye defines a word composed of lowercase characters more readily than a word composed of uppercase characters because the shape of the lowercase word is easier to identify than the box shape of the uppercase word. The shapes of lowercase words are easier to identify than those of uppercase words. When we read quickly or for an extended period, we read by recognizing the shapes of the words.

This is (almost) i m p o s s i b l e t o r e a d .

A few last things... Type is usually designed with other visual elements, such as photographs, illustrations, and graphics (elemental visuals – rules, patterns or textures). When the relationship between type and visuals is cooperative, the design becomes a cohesive unit. Layout is the process of arranging the text on the page. Text can be laid out in different ways. The arrangement, which makes the text readable and creates formal qualities, can be achieved by spacing. When designing a layout, try to create a layout that is original enough so that viewers will remember it and recognize it when they encounter it again. Italics are best used for emphasis – large blocks of italicized text may be difficult to read. Use the correct typeface (think of type as the clothes that words wear). No single typeface can serve all purposes at once! Don’t try to make it! “Connect” the typography to the context or content. Where will the type be read and how closely will it be read?

Design type in a visual hierarchy. People tend to read the biggest elements first (headlines or titles); subheads or pull quotes second; then captions; and finally the text type. Typefaces with too much thick / thin contrast may be difficult to read if they are set very small (the thin strokes may seem to disappear) Condensed or expanded letters are more difficult to read because the recognizable forms of the letters change Type set in capitals is generally more difficult to read. Use uppercase (all-CAPS) sparingly. Think about the letterforms as having positive / negative space relationships. Color should enhance the communication and expression, not hinder readability. When mixing typefaces, think about appropriateness to the message, contrast, weights, visual hierarchy, and scale. Principles of Design applies to Typography! Emphasis – type can be your focal point

Match the weight of the type to the voice of the message. Fonts should be appropriate for the message and audience. Typography should enhance the reader’s experience.

Rhythm – Can be created by text flow (moving the reader’s eyes from element to element so that they get all the necessary information and messages.

Typefaces that are too light or too heavy may be difficult to read, especially in smaller sizes.

Unity – Choose typefaces that complement each other visually.

Space considerations? Need to fill space?

Some fonts take up more room. (ITC New Baskerville 24 pt) Some fonts take up more room. (Adobe Garamond Pro 24 pt) Cramped for space?

Some fonts take up less room. (Gill Sans 24 pt) Some fonts take up less room. (Frutiger 24 pt) Mix fonts to add interest and structure. • Fit the typeface personality to your project! • Choose 2 to 3 fonts • No more than three • Pick fonts that have obvious differences • Pick fonts that go well with each other... Easy: One serif and one sans serif font Hard: Two sans serif fonts Really Hard: Two serif fonts

Font Personalities

Use the right characters! Here are a few last things to consider... • Ligatures (not: ffl, fi but ffl, fi) • Small caps (Small Caps) • Ornaments and bullets (%)3E♥✪❝ ) • Swashes and alternative characters (n or > ) • Real quotes and apostrophes, not prime marks (not these ' ̎ but these “ ”)

Sources include: Larry Lavendel, Ikitomi Design