Transcript A Quick Look at Graphic Design:

The Joy of Typography:
An overview of typography elements and
issues
Jennifer Bowie
Typography and Type Elements
#1 one thing to remember:
Typography exisits to honor content
Typography exisits to honor content
Typography exisits to honor content
Typography exisits to honor content
Typography and Type Elements:
Font Classifications
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.
Typography and Type Elements:
Font Classifications con.
• 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.
Categories Table
Category
Larger
Category
Structure
Readability
Legibility
Voiceover
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
Straightforward,
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:
General Categories

Type is used for different things. General categories
are:
• body text- readable in long blocks of text and smaller sizes 912 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
Typography and Type Elements:
Type Setting

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%
Leading Examples
Afford, old jiggly quarrel
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.
gonna.Soap hayseed her
0.5 leading
cold her sherrif salesmen
1.5 leading
panhandle that farm
simple showed gal fer.If
chitlins rat, lament shed jig
landlord frontporch drinkin'
that.Rat, mashed city-slickers.
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.
Typography and Type Elements:
Justification

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.
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 Gothic Heavy Shadow
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
Oblique, or angled, stress

Semi-oblique stress
Vertical stress
Weight: thickness of strokes, area to contrast
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,…
Type
Type
Type
Have fun and Design well
The End
Information from Sims 10, Guark & Lannon 8, and Web
Typography, Kostelnic & Roberts
Jennifer Bowie