The Joy of Typography:

The Joy of Typography:

An overview of typography elements and issues

Jennifer Bowie

Typography and Type Elements

Typography exisits to honor content

Typography exisits to honor content

Typography exisits to honor content

Typography exisits to honor content

#1 one thing to remember:

Typography and Type Elements:

There are four basic font classifications:• Serif: the oldest type, has serifs on the end of letter to

guide reader’s eye, also has thick and thin strokes, considered more “readable” than sans serif. Gives a more formal and traditional feel to documents. Good body text or contrast text. Serif includes Oldstyle, Modern, and Slab Serif categories. Examples: Times, Garamond, Georgia, Goudy Old Style, Book Antiqua, and many more.

• Sans Serif: “without serif,” only about 100 years old, has stokes that have little to no variation in width, looks more modern and technical, used a body text in Europe. Makes a good body text or contrast text. Includes: Arial, Helvetica, Verdana, Tahoma, Century Gothic (and other Gothics), Trebuchet, and many more.

Font Classifications

Typography and Type Elements:

•Script: fonts that look they they are hand lettered, can connect or not. Should be used in small amounts for fancy documents (invitations), occasionally for headings, titles, logos, and drop caps. Most should never be set in long bodies of text. Use as a display font, or rarely a contrast. Includes: Comic Sans, Gigi, Brush Script (and other scripts), Forte, and more

• Decorative: fun, distinctive fonts. Should never be used in long bodies of text. Best used as display fonts. Very powerful so use sparingly. Includes: Goudy Stout, Impact, Algerian, Juice ITC, Bauhaus 93, and many more.

Font Classifications con.

Categories TableCategory Larger

Category

Structure Readability

Legibility

Voice-over

Oldstyle Serif •Mod think/thin transitions•Diagonal stress•Slanted [bracketed] serifs

Very good Good Traditional, calm, formal

Modern Serif •Radical think/thin transitions•Vertical stress•Serifs thin and horizontal

Poor Good/fair Cold, elegant, dazzling

Slab Serif Serif •Little/no think/thin transitions•Vertical stress•Horizontal and think slab serifs

Very good Good Straight-forward, plain, clean, athletic

Sans Serif Sans Serif •No/little thick/thin transitions (monoweight)•No stress•No serifs

Good Very Good

Modern, technical, clean,

Script Script • looks like handwriting• Letters may connect or not

Often poor Often poor to fair

Varies

Decorative Decorative •Structure varies greatly•Fun, distinctive, strong faces

Often poor Often poor to fair

Varies

Grunge or Distressed

Decorative •Structure varies greatly•Distorted, trashed, schizophrenic, ugly, distinctive

Often poor Often poor to fair

Varies

Typography and Type Elements:

Type is used for different things. General categories are:• body text- readable in long blocks of text and

smaller sizes 9-12 pts for print, 12-14+ for screen. Can be Sans Serif or Serif fonts

• display text- less readable and not designed to be read in long blocks. Used in advertising, for title or logo, and other display uses. Can be Script or Decorative fonts

• contrast text- meant to contrast with your body text. Good for headings, subheadings, titles, and smaller blocks of text. Normally will be Serif or Sans Serif (opposite of body font) but can more more legible Script or Display fonts

General Categories

Typography and Type Elements:

Leading: (space between lines) should be at least 120% for serifed fonts, and 135-140% for sans serif.• greater is better than lesser for body text• display fonts can handle little or even negative leading• typefaces with small x-heights do not need greater

leading, but those with large may• leading should increase proportionally as line length

increases• Auto leading for most programs is ~20%

Type Setting

Leading ExamplesAfford, old jiggly quarrel panhandle that farm gonna.Soap hayseed her simple showed gal fer.If chitlins rat, lament shed jig landlord frontporch drinkin' cold her sherrif salesmen, that.Rat, mashed city-slickers frontporch go em knickers jiggly buckshot neighbor's coonskin.Ain't hootch jail poor skinny shiney sam-hell greasy rockinchair, rat marshal ya come caboose.

Afford, old jiggly quarrel panhandle that farm gonna.Soap hayseed

her simple showed gal fer.If chitlins rat, lament shed jig landlord

frontporch drinkin' cold her sherrif salesmen, that.Rat, mashed

city-slickers frontporch go em knickers jiggly buckshot neighbor's

coonskin.Ain't hootch jail poor skinny shiney sam-hell greasy

rockinchair, rat marshal ya come caboose.

Afford, old jiggly

quarrel panhandle that

farm gonna.Soap

hayseed her simple

showed gal fer.If

chitlins rat, lament

shed jig landlord

frontporch drinkin' cold

her sherrif salesmen

that.Rat, mashed city-

slickers.

0.5 leading

1.5 leading

Typography and Type Elements:

Justified left: flushed left and jagged right, this is the most readable for long segments of body text

Justified right: flush right, jagged left, highly unreadable, use rarely.

Justified: flush left and right so the text forms a box. Can cause rivers in the text.

Centered: ragged both sides. Use rarely and in small amounts, very unreadable.

Justification

Rivers?This is an example of fully justified text. Can you find the rivers:

Neo odio tation lobortis ne wisi nimis duis elit ludus ratis consequat.Diam et fere nulla, caecus sagaciter in abbas importunus ad molior.Wisi commodo aliquam iriure si eros duis aliquip quidem, velit reprobo letalis, volutpat consequat.Neque caecus enim genitus et ingenium tation, vereor te caecus facilisi occuro.Adipiscing cogo regula quis esse gemino, mauris commoveo ventosus diam praesent, nutus praesent comis.Mauris aliquip olim quibus ex aptent ut nullus foras, tation ullamcorper, ulciscor, nostrud.Enim ad voco capto suscipit accumsan ex.Saepius vereor vero tamen caecus melior mara blandit delenit.Bis, nibh adsum duis lucidus utrum interdico tation wisi epulae ideo, secundum.Praesent neo consequat damnum incassum, pneum voco.

Vocab:

Type family: a generic term for all the faces in a family• Example: Franklin Gothic, which includes Franklin Gothic ,

Franklin Gothic Demi, Franklin Gothic Heavy, and variations like italics

Typeface or face: a specific category of type, includes all variations within that category like bold and italics. So, the typeface Franklin Gothic would include all variations of that particular face including italics and bold

Font: specific type in a type family with specific characteristics, like bolding or italic. Like Franklin Franklin Gothic HeavyGothic Heavy ShadowShadow or Franklin Gothic italics

Vocab:

Type size: measured in points Point: 1/72 of an inch Kerning: space between letters

Anatomy Vocab:

image from: http://graphicdesign.spokanefalls.edu/tutorials/process/type_basics/default.htm

More Vocab

Stress

Weight: thickness of strokes, area to contrast

Oblique, or angled, stress

Semi-oblique stress

Vertical stress

Enim ad voco capto suscipit accumsan ex.Saepius vereor vero tamen caecus melior mara blandit delenit.Bis, nibh adsum duis lucidus utrum interdico tation wisi epulae ideo, secundum.Praesent neo consequat damnum incassum, pneum voco.

Enim ad voco capto suscipit accumsan ex.Saepius vereor vero tamen caecus melior mara blandit delenit.Bis, nibh adsum duis lucidus utrum interdico tation wisi epulae ideo, ecundum. Praesent neo consequat damnum incassum, pneum voco.

Even More Vocab Italics: Right slanted flowing for of a face, looks more like

handwriting Roman: Normal non-slanted, straight up and down style

of a face High-ratio and low-ratio typefaces: based on ratio of

x-height to capital letters. High-ratio is a high x-height, low-ratio is low

Width: length of letter• Monospaced fonts: Each character (letter) has the same width Courier is one example

• Proportional fonts: different letters take up different amounts of space– like the i and the m. Goudy Old Style is one example, but most fonts are like this

Line quality: includes thick/thinness of lines and whether lines vary in width or are constant

Clarity: legibility— “ease with which readers can pick up information in the text” Kostelnick & Roberts)• Example: good clarity poorer clarity

Yet More Vocab Readability: how easy reading extended amounts of text is, such as

paragraphs of text. Important for basal/body text. If the typeface is noticeable is it less readable. The Crystal Goblet theory prefers readable faces.

Legibility: how instantly recognizable short bursts of text are. Important for headings, titles, signs.

Usability: measure of how well readers can use a document to complete a task. Includes both legibility and readability.

Concordant Relationship: only use one face with limited variations in size, weight, and style. Creates a harmonious, sedate, and even dull look.

Conflicting Relationship: combination of similar typefaces, often from the same category, and style, size, and weight. Similarities are distributing because they are not different or similar enough. Looks like a mistake and is sloppy.

Contrasting Relationship: combination of very different typefaces, from different categories, and different styles, sizes, and weights. Result is clearly distinct differences and a visually appealing and exciting design.

Contrasts Types Size: big vs. little, make it obvious Weight: Contrast based on weight (thickness of

strokes), creates value differences Structure: how built, includes thick/thin

transitions and stress, contrast different categories

Form: Shape of letters, contrasts include all caps vs. regular, italics/script vs. roman

Direction: direction of all type elements, can be vertical, horizontal, or slanted. Contrast long lines with short, columns and rows,…

Have fun and Design wellThe End

Information from Sims 10, Guark & Lannon 8, and Web Typography, Kostelnic & Roberts

Jennifer Bowie

TypeTypeType