Typeface_Pairing - ART316 Typography II

ART 3 1 6
Typeface
Pairing
Typeface
Classifications
Old Style or Humanist
15th/16th century
Garamond
Emulated classical calligraphy and hand movement.
Moderate thick/thin strokes.
Diagonal stress.
Slanted + humanist serifs.
Curved bracket.
Calisto
Goudy Old Style
Janson
Bembo
Sabon
Source: Thinking with Type, Lupton
Transitional
early 18th century
Baskerville
Considered shocking due to high contrast.
More exaggerated thick/thin strokes.
Diagonal stress.
Mechanical, refined, sharper serifs.
Curved bracket.
Bookman
Cambria
Mrs Eaves
Times New Roman
Perpetua
Source: Thinking with Type, Lupton
Modern
late 18th century
Bodoni
Extreme thick/thin strokes.
Vertical stress.
Flat serifs.
No brackets.
Didot
Bernhard Modern
Surveyor
Aster
Playfair
Source: Thinking with Type, Lupton
Sans Serif
early 19th century
Gill Sans
Mostly even strokes.
Vertical stress.
Geometric form.
No serifs.
No brackets.
Humanist: Gill Sans (1928) Eric Gill
Calligraphic variations in line weight.
Transitional: Helvetica (1957) Max Miedinger
Uniform, upright character.
Geometric: Futura (1927) Paul Renner
Based on geometric forms.
Source: Thinking with Type, Lupton
Slab Serif (Egyptian)
mid 19th century
Rockwell
Introduced for use in advertising.
Mostly even strokes.
Vertical stress.
Geometric form.
Heavy serifs.
Minimal or no brackets.
Clarendon
Courier
Egyptienne
Arvo
Josefin Slab
Source: Thinking with Type, Lupton
Scripts
15th century
Mistral
Script-like strokes.
Linked or joined lowercase letters.
No serifs.
No brackets.
Edwardian Script
Kuenstler Script
Allura
Dancing Script
Black Jack
Display
19th century
Rosewood
Use for headlines only.
30 points or larger.
Broadway
Cooper Black
Peignot
Willow
Umbra
Type Mixing
How do you select
+ mix typefaces?
Limit Typefaces
Every time you introduce a new typeface,
there is a potential for conflict.
Each choice should serve a function, and
work well together.
Avoid creating “type soup”.
avoid
creating
typesoup
Source: Typography Essentials, Ina Saltz
Too many fonts (sizes,
weights, and styles)
can create the feeling
of chaos.
Source: inspire.adobe.com
Selecting Typefaces
Consider (read) your Content:
How much variety exists in the content?
Determine needs: posture, weight, width,
ligatures, numeral styles, small caps.
Consider your Audience:
Who are you trying to communite to?
Consider your Medium:
Will it be viewed on screen? from a distance?
small-scale?
Rules of Thumb
01. Typefaces too similar in design, but
not from the same family.
02. Utilize a strong typographic contrast.
03. Avoid combining digitally modified
styles with their originals.
04. Serifs + Sans-Serifs pair nicely
together.
05. Avoid pairing similar classifications.
06. Stick with two fonts—three max.
07. Mix typefaces with similar x-heights
and glyph widths.
08. Use complementary moods.
09. Listen to your intuition.
10. There are no rules.
Sans-Serif + Serif
One of the more popular methods for
mixing typefaces.
More challenging to get wrong.
}
similar x-height
Source: smashingmagazine.com
Avoid Similar Classifications
Clarendon Bold (slab serif) + New
Baskerville (transitional): Wider glyphs
pairs with heavier slab serifs. Allows
Clarendon’s personality to take lead.
}
wider glyphs
Source: smashingmagazine.com
Example of Weak Pairing
Didot + Rockwell
Hello
Why? Both have a dominant appearance and seem to compete.
Source: bonfx.com
Assign Different Roles
Rather than arbitrarily
place each typeface,
give each font a
distinct role to play.
Source: Thinking with Type, Lupton
Create Contrast
Typeface choices need to have
enough contrast to work best.
Create hierarchy.
Consider use of typographic color.
Gotham + Adobe Jenson offers
sans + serif, contemporary +
classic, and bold + light.
Source: bonfx.com/
MIXINGTYPEFACES
big + light:
glypha thin, designed by
Adrian Frutiger, 1979. The
large scale of the letters is
counterbalanced by the fine line
of the stroke.
small + heavy:
egyptian bold condensed,
a Linotype font based on a
typeface from 1820. This quirky,
chunky face has been used
intermittently at New York
Magazine since the publication
was first designed by Milton
Glaser in the 1970s.
the word: new york magazine Design: Chris Dixon, 2010.
This content-intensive page detail mixes four different type families
from various points in history, ranging from the early advertising
face Egyptian Bold Condensed to the functional contemporary sans
Verlag. These diverse ingredients are mixed here at different scales to
create typographic tension and contrast.
,OOKFORCONTRASTWHENMIXINGTYPEFACES
Consider the Personality
A strong, extroverted personality (such as Clarendon) might pair well
with a neutral, reserved, trustworthy personality (such as Garamond).
Source: inspire.adobe.com
Consider the Type Foundry/Designer
Try combining typefaces from the
same foundry or designer.
Typefaces such as Museo + Museo
Sans, or Stone Serif + Stone Sans
were designed to complement each
other.
Example: Eric Gill designed
Perpetua + Gill Sans
Source: inspire.adobe.com
Consider the Historical Classification
One way to pair typefaces
is to choose two typefaces
from the same period­—or
choose a typeface that is
historically appropriate for
the subject matter.
Jenson (top)
Industria (bottom)
Source: inspire.adobe.com
Consider the Characteristics
Pay careful attention to strokes,
x-heights and cap heights.
Aim to align x-heights. Slightly
reduce the size of the font with
the larger x-height.
Example: Bodoni + Futura,
similarity in vertical stress
Source: inspire.adobe.com
One Type Family
Some type families
contain a wide variety
of weights/styles.
Use contrast to create
hierachy.
Inherently harmonious
by proportion and
form.
Book Design
Designer: Francesca Messina
Client: Workman Publishing
Source: Typography Essentials, Ina Saltz
MIXINGTYPEFACES
MRSANDMREAVES
-IXINGSTYLESWITHINONEFAMILYISAGOODPLACETOSTART
Creamy and Extra Crunchy O Differences w
H2DMC
MIXINGTYPEFACES
=2D6C
wwxzy~su‚n€yp{•
F=EC23
xz{r‚€u{ƒpywz}‚z‚}~z}xz{r‚€su}wz}‚z
?E@7E96AC:>2CJ7@?E92D366?
D>2==
:?6ME36EE6C2D:7H6H@F=5?E
:?E96
9E2AA62CD@?E963@EE@>=:?6
4XFFU$IJMEPG.*/&O%JGGFSFODFTXJUIJ
jx~}€~~y€‚ƒxu~€~z}{y~u{wjx~}€~~y~zsu}
Noodles with Potato Sauce O Bla
p‚ur‚y{w~z‚x‚t‚}{xt~z}p‚ur‚y{w~z‚x‚su}
MULTIPLEFAMILYMIXES
TYPECRIME
+96D6EJA67246D2C67C@>E96
D2>672>:=J3FEE96J2C6E@@
4=@D6:?H6:89EE@>:IH6==
r‚€u~
@6N6
4@>>
$:==6C
*ACK3PRATANDHISvoluptuous wifeO
yp‚{‚€{n‚my€~u{ƒpy~z}r~ƒ€xz}‚}su}
MIXINGTYPEFACES
7HATARETHECHARACTERISTICSOFEACHMODEOFALIGNMENT
4RILOGYISA±SUPERFAMILY²WITH3ANS%GYPTIANAND&ATFACESTYLESINSPIREDBYTHCENTURYADVERTISING
Typefaces to Avoid?
The topic of whether or not to use
certain typefaces is one of debate.
Different designers have typefaces
they typically steer clear of using.
Common reasons for avoiding:
01. Overused/Accessible to many.
02. Not used correctly by many.
03. Poor form.
04. Kitschy/Inauthenticity.
http://www.webdesignerdepot.com/2011/02/10-iconic-fonts-and-why-you-should-never-use-them/
Image Source: webdesignerdepot.com
Limit Display Typefaces to One
Designer: Charlie Nix
Client: Barnes & Noble
Contrast distinct with neutral.
Source: Typography Essentials, Ina Saltz
Mixing Typefaces
9Xl_Xlj
9\dYf
9f[fe`
9ffbdXe
:Xjcfe
:\eklip
:_\ck\e_Xd
=iXebc`e>fk_`Z
=lkliX
>XiXdfe[
>`ccJXej
?\cm\k`ZX
BXY\c
Bfi`eeX
Hlfild
Fgk`dX
GXcXk`ef
Jflm\e`i
K`d\jE\nIfdXe
Le`m\ij
QXg]9ffb
8mXek>Xi[\>fk_`Z
(
(
(
(
(
(
(
(
*
(
(
)
*
(
(
(
)
(
(
(
*
(
9Xl_Xlj
*
(
(
(
(
(
(
(
)
)
(
)
)
)
(
)
(
)
(
(
*
(
9\dYf
(
(
*
(
(
)
)
(
(
)
)
)
(
(
)
(
(
)
(
)
(
(
9f[fe`
(
(
(
(
(
)
)
(
(
(
(
(
(
)
*
)
(
(
(
)
(
*
9ffbdXe
(
(
(
(
(
(
)
)
(
(
(
(
(
(
)
)
(
(
)
(
(
)
:Xjcfe
(
)
)
)
(
(
)
)
(
)
)
(
(
(
*
)
(
)
(
)
(
)
:\eklip
(
)
)
)
)
)
(
(
(
)
)
(
(
(
*
)
(
)
(
*
(
)
:_\ck\e_Xd
(
(
(
(
)
)
(
(
(
(
)
(
(
(
(
)
(
)
)
(
(
)
=iXebc`e>fk_`Z
*
(
(
(
(
(
(
(
(
(
(
)
*
(
(
(
(
(
(
(
*
(
=lkliX
*
*
(
(
(
(
(
(
)
(
(
*
*
)
(
*
(
)
(
(
*
(
>XiXdfe[
(
)
*
(
(
)
)
)
(
)
(
(
(
(
)
)
(
)
)
)
(
(
>`ccJXej
)
)
(
(
(
(
(
(
)
(
(
(
)
(
(
(
)
)
(
(
*
(
?\cm\k`ZX
*
(
(
(
(
(
(
(
*
(
(
)
(
(
(
(
(
(
(
(
*
(
BXY\c
)
*
(
(
(
(
(
(
*
*
(
*
*
)
(
)
(
)
(
(
*
(
Bfi`eeX
(
(
(
)
)
(
(
*
(
(
(
(
(
(
(
(
)
(
)
(
(
)
Hlfild
)
)
(
(
(
(
(
(
(
(
(
)
(
(
*
(
(
(
)
(
)
(
Fgk`dX
)
(
(
(
(
(
(
(
(
(
(
)
(
(
(
(
(
(
(
(
(
)
GXcXk`ef
(
)
*
(
(
)
)
)
(
*
)
)
(
(
)
)
(
(
(
)
)
(
Jflm\e`i
(
(
(
(
)
(
(
)
(
(
)
(
(
(
(
(
(
(
(
(
(
)
K`d\jE\nIfdXe
(
)
)
)
(
)
*
(
(
)
)
)
(
(
)
)
(
)
(
(
(
)
Le`m\ij
*
*
(
(
(
(
(
(
*
*
(
*
*
*
(
)
(
)
(
(
(
(
QXg]9ffb
(
(
(
*
)
)
)
)
(
(
(
(
(
(
)
(
)
(
)
)
(
(
K\ok
;`jgcXp
8mXek>Xi[\>fk_`Z
D`o`e^Kpg\]XZ\jJ\gk\dY\i(00)
(%:fdY`e\Xkn`ccÇ)%EfkXZfej\imXk`m\Z_f`Z\Ç*%K_`ebX^X`e
N_XkËjk_\gifYc\dn`k_ZfdY`e`e^j`d`cXi[\j`^ej6
Kpg\jkpc\jk_XkXi\Zcfj\`e[\j`^e#Ylkefk]ifdk_\jXd\]Xd`cpZi\Xk\Xm`jlXc[`jZfi[XeZ\%Flij\ej`Y`c`k`\j
Source:
j\\dkfi\hl`i\\`k_\ijkife^kpgf^iXg_`ZZfekiXjkÇfiefe\XkXcc%Kfjfd\[\^i\\k_`j_Xj\m\eY\\egifm\e
`e c\^`Y`c`kp jkl[`\j% I\j\XiZ_\ij _Xm\ ]fle[ k_Xk kpg\]XZ\j Xe[ kpgf^iXg_`Z XiiXe^\d\ekj n_`Z_ Xi\
International Journal of Typography, 1992