Microaesthetics, Part Deux: typeface design and semantic effects

Elaine M. Guidero, U.S. Geological Survey @elaineguidero
Cynthia A. Brewer, The Pennsylvania State University @colorbrewer
NACIS 2016
Microaesthetics, part deux

Ack(nowledgments)
Drs. Cynthia Brewer, Deryck Holdsworth,
Anthony Robinson, Sarah Rich
Dr. Alexander Klippel
Dr. Doug Baldwin
Kristin Fishburn
Department of Geography at Penn State

For more information
please download a PDF of my dissertation (free!) at:
https://etda.libraries.psu.edu/catalog/ht24wj40p

Typeface and semantic effect
The lazy dog and quick fox

Rhetoric
= an argument through design

Rhetoric
created by map colors, symbols, arrangement
(Muehlenhaus 2012)

Rhetoric
(Muehlenhaus 2012)
also created by typography: type is not neutral

Rhetoric
(Muehlenhaus 2012)
also created by typography: type is not neutral
mismatch between rhetoric of type and rhetoric of brand

US Topo
1970s–2011
Rhetoric and national maps
USGS

US Topo
2012–
Rhetoric and national maps
USGS

Why do this research?
Change the way cartographers look at typefaces

Create new guidelines for choosing typefaces based on
aesthetics

aesthetics
Use microaesthetics instead of typefaces as the
basis for guidelines

aesthetics
Use microaesthetics instead of typefaces as the
basis for guidelines
Avoid the blandscape (Kent 2008)

highlighted sections = letterform elements
variations in them = microaesthetics
A type anatomy lesson

Microaesthetics
Univers Baskerville Adobe Jenson

Microaesthetics terminal

earMicroaesthetics

So what?
Little guidance on how to choose a typeface for a map

So what?
Visual variables of type exist, but are inconsistent

So what?
Visual variables of type exist, but are inconsistent
These variables mix up label properties with
typeface attributes

Label properties ≠ typeface attributes
Labels: describe map features
have properties external to the typeface
Typefaces: have a coherent design
have inherent properties that determine
semantic effect

Label properties (macroaesthetics)
1. spline or tilt
2. kerning/tracking
3. point size
(not x-height)
Deeb et al. 2012
Caroga Lake Caroga Lake
I t h a c a Ithaca
Bear Meadow Bear Meadow

Typeface attributes (microaesthetics)
Ithaca Ithaca
Bear Meadow Bear Meadow
Childers & Jass 2002; Koch 2012
1. serif style
2. terminal style
3. x-height
Caroga Lake Caroga Lake

Macroaesthetics: visual variables of type
typeface..................................
kerning/tracking....................
word spacing..........................
leading.....................................
tilt/spline of baseline.............
posture....................................
weight......................................
compression...........................
case.........................................
hue...........................................
value........................................
Univers, Garamond, Comic Sans
tight to l o o s e
narrow to wide
tight to loose
straight, angled, curved
roman or italic (or oblique)
thin, light, regular, bold, black
condensed, regular, extended
UPPER, lower, Title, small caps
hue
value
tight
leading
loose
leading

Research outline
goal: link microaesthetics to semantic effects
1. Sample of typefaces...

Research outline
2. Sample of semantic effects...

Research outline
3. Gather data on semantic effects of type on maps (survey)...

Research outline
3. Gather data on semantic effects of type on maps (survey)...
4. Sample of microaesthetics...

Arial
Avenir
Bau
Cabin
Camphor
Adobe Caslon
Century Schoolbook
Chaparral
Cisalpin
DIN
Farnham
Futura
Georgia
Gill Sans
Glypha
Helvetica Neue
Johnston
Karmina Sans Basic
Klinic Slab
Meta
Meta Serif
Museo Sans Condensed
Myriad Pro Condensed
News Gothic
Step 1: Sample of typefaces (36)
Optima
PT Sans
Roboto Sans Condensed
Sabon
Scala
Souvenir
Tablet Gothic SemiCondensed
Titillium
Trebuchet
Univers
Utopia
Verdana

Step 2: Sample of semantic effects (8)
corporate
cheap
whimsical
neutral
bland
serious
modern
friendly

Step 3: Survey design
3 different map styles to avoid bias due to landscape
preference (Raposo & Brewer 2014)
Participants: typographers, designers (n=12)
Each participant answered 36 questions (one map/
one typeface)
$$

Step 3: Survey materials (maps)
Outdoor recreation, Mt. Hood Wilderness, or
1:37,000

Topographic, Ithaca, ny
1:20,000

Urban tourism, Des Moines, ia
1:5,500

Step 4: Compile microaesthetics
Find most “salient” letters in common between three maps
Uppercase letters: J, G, W, C, R, M
Lowercase letters: g, a, y, t, r, e, o
Mackiewicz (2005)
Perfect & Rookledge (1983)

Step 4: Compile microaesthetics
choose letterform elements, then list all of their variations
(microaesthetics)
choose most “salient” microaesthetics visible at 12 pt on
screen

Uppercase microaesthetics
J J J J J
G G G G G
Uppercase G
Uppercase J
Uppercase W
W W W W W
CC C
Uppercase C
Uppercase R
1c
1a
1b
4a 4b 4c 4d
1d2a 2b 3a 3b3c
5a
5b5c 5d
6a6b 6c
10a 11a
10b
11b
10c
6d
7b, 9a 9e
8a
8b
7c
9b
7a
9c 9d
W W W W W
CC C
Uppercase C
R RR R
Uppercase R
Uppercase M
R
M M M
10a 11a
10b
11b
10c
12a
14b
12b
14a 13a13b
15b
16a
18a
15a
16b
18b 18c
17a 17b
12c 12e 12d
7c 7a

Lowercase microaesthetics
Lowercase g
Lowercase a
Lowercase y Lowercase t
Lowercase r Lowercase e
g g g g g g
a a a a a a a
g
y y t t t t
r r r
t
e e
19a, 20c,
21c
20b
20b
25a
27a27c
25d
26c27b27d
29b29a
28b
30d30c30b
31a
32b, 33b
31c 31d31b
33a
35b
36a 36b
34b34a
37b37a
35a
28a
30a
32a, 33c
26a 26b
24b, 25b
24a, 25c
22f 23b 23a 22b 22e22a22c22d
21b
21a
19b, 20a
Lowercase r Lowercase e
Lowercase o
r r r e e
ooo
38c38b
31a
32b, 33b
31b
33a
36a 36b
34b34a
3737a
35a
38a
32a, 33c

Whole letter microaesthetics
Character width: visual width
Serif style
mmm
b b b b b
Stroke contrast
bcbcbc
X-height (as percentage of cap height): visual height
HayHayHay
39a 39b 39c
40a 40b 40c 41a
42e
41c41b
42a 42b 42c 42d

Microaesthetics in table form
Letter Letterform element Microaesthetic ID
Uppercase J
Style of terminal (el1)
Ball 1a
Even 1b
Serif 1c
Tapered 1d
Position on baseline (el2)
At 2a
Below 2b
Length of tail (el3)
Long 3a
Medium 3b
Short 3c
Style of stem ending (el4)
Serif 4a
Flag 4b
Incised 4c
Sans 4d
Uppercase G
Placement of serif or bar on throat (el5)

Balanced 5a
Imbalanced 5b
Inside 5c
None 5d
Style of spur/junction (el6)
Pointed 6a
Rounded 6b
Straight (spur) 6c
Tapered (spur) 6d
Uppercase W
Style of apex (el7)
Cropped 7a
Joined 7b
Overlapped 7c
Height of apex (el8)
Cap height 8a
Midline 8b
Style of apex ending (el9)
Angled 9a
Flat 9b
Incised 9c
Pointed 9d
Serif 9e
Uppercase C
Shape of bowl (el10)
Asymmetric 10a
Round 10b
Squared 10c
Aperture opening (el11)
Narrow 11a
Wide 11b
Letter Letterform element Microaesthetic ID
Lowercase g
Number of stories (el19)
One 19a
Two 19b
Style of loop (el20)
Closed 20a
Open 20b
None 20c
Angularity of link (el21)
Curved 21a
Pointed 21b
None 21c
Shape of ear (el22)
Angled 22a
Ball 22b
Curved 22c
Flat 22d
Pointed 22e
Straight 22f
Axis of upper bowl (el23)
Angled 23a
Straight 23b
Lowercase a
Number of stories (el24)
One 24a
Two 24b
Angle of top of bowl (el25)
Angled 25a
Concave 25b
Convex 25c
Flat 25d
Shape of counter (el26)
Round 26a
Teardrop 26b
Two-pointed 26c
Style of spur (el27)
Angled 27a
Curved 27b
Serif 27c
Vertical 27d
Lowercase y
Shape of tail (el28)
Curved 28a
Straight 28b
Style of vertex (el29)
Gapped 29a
Joined 29b
Lowercase t
Style of stem ending (el30)
Angled 30a
Flat 30b
Sheared Curved 30c
Sheared Straight 30d
Style of terminal stroke (el31)
Even 31a
None 31b
Serif 31c
Tapered 31d

Analysis (eeeeek)
1. Descriptive statistics/Multidimensional scaling
2. Matrix decomposition methods
2a. Categorical pca: finds ideal number of dimensions
2b. Duality diagram: links semantic effects to
microaesthetics
handles mixed data types

1. Multidimensional scaling
shows difference
between typefaces
by sums of survey
scores

2a: Categorical pca
17.21%
9.3%
8.65%
provides number of
dimensions to input
to duality diagram

2b: Duality diagram
constructs “dimensions” or super-variables onto which
variables (microaesthetics and semantic effect
scores) load at different weights

2b: Duality diagram
cannot describe IVs and DVs

2b: Duality diagram
cannot describe IVs and DVs
useful for describing typefaces, microaesthetics, and
semantic effects like species, characteristics, and
habitats

2b: Scatterplot of D1+D2
−0.5
0.0
0.5
1.0
1.5
−0.25 0.00 0.25 0.50
Dim.1
Dim.2
el1.a
el1.b
el1.c
el1.d
el2.a
el2.b
el3.a
el3.b
el3.c
el4.a
el4.b
el4.c
el4.d
el5.a
el5.b
el5.c
el5.d
el6.ael6.b
el6.c el6.d
el7.a
el7.b el7.c
el8.a
el8.b
el9.a
el9.b
el9.c
el9.d
el9.e
el10.a
el10.b
el10.c
el11.a
el11.bel12.a
el12.b
el12.c
el12.del12.e
el13.a
el13.b
el14.a
el14.b
el15.a
el15.b
el16.a
el16.b
el17.a
el17.b
el18.a
el18.b
el18.c
el19.a
el19.b
el20.a
el20.b
el20.c
el21.a
el21.b
el21.c
el22.a
el22.b
el22.c
el22.d
el22.e el22.f
el23.a
el23.b
el24.a
el24.b
el25.a
el25.b
el25.c
el25.d
el26.a
el26.b
el26.c
el27.a el27.b
el27.c
el27.d
el28.a
el28.b
el29.a
el29.bel30.a
el30.b
el30.c
el30.d
el31.a
el31.b
el31.c
el31.d
el32.a
el32.b
el33.ael33.b
el33.c
el34.a
el34.b
el35.a el35.b
el36.a
el36.b
el37.a
el37.b
el38.a
el38.b
el38.c
el39.a
el39.b el39.c
el40.a
el40.b
el40.c
el41.a
el41.b
el41.c
el42.a
el42.b
el42.c
el42.d
el42.e
corporate
whimsicalneutral
bland serious
modern
friendly
cheap

2b: Scatterplot D1+D3
el1.a
el1.b el1.c
el1.d
el2.a
el2.b
el3.a
el3.b
el3.c
el4.a
el4.b
el4.c
el4.d
el5.a
el5.b
el5.c
el5.d
el6.a
el6.b
el6.c
el6.d
el7.a
el7.b
el7.c
el8.a
el8.b
el9.a
el9.b
el9.c
el9.d
el9.e
el10.a
el10.b
el10.c
el11.a
el11.b
el12.a
el12.b
el12.c
el12.d
el12.e
el13.a
el13.b
el14.a
el14.b
el15.a
el15.b
el16.a
el16.b el17.a
el17.b
el18.a
el18.b
el18.c
el19.a
el19.b
el20.a
el20.b
el20.c
el21.a
el21.b
el21.c
el22.a
el22.b
el22.c
el22.d
el22.e
el22.f
el23.a
el23.b
el24.a
el24.b el25.a
el25.b
el25.c
el25.d
el26.a
el26.b
el26.cel27.a
el27.b
el27.cel27.d
el28.a
el28.b
el29.a
el29.b
el30.a
el30.b
el30.c
el30.del31.a
el31.b
el31.c
el31.d
el32.a
el32.b
el33.a
el33.b
el33.c
el34.a
el34.b
el35.a
el35.b
el36.a
el36.b
el37.a
el37.b
el38.a
el38.b
el38.c
el39.a
el39.b
el39.c
el40.a
el40.b
el40.c
el41.a
el41.b
el41.c
el42.a
el42.b el42.c
el42.d
el42.e
−0.5
0.0
0.5
1.0
1.5
−0.2 0.0 0.2 0.4
Dim.1
Dim.3
corporate
cheap
whimsical
neutral
bland
serious
modern
friendly

Dimension 1: high-inertia variables
Dimension 1 positive Dimension 1 negative
ID Semantic effect/Microaesthetic ID Semantic effect/Microaesthetic
whimsical modern
serious neutral
36a e_Height of crossbar _High 22d g_Shape of ear_Flat
7c W_Style of apex_Overlapped 38c o_Roundness _Low
8b W_Height of apex_Midline 27d a_Style of spur_Vertical
22b g_Shape of ear_Ball 20c g_Style of loop _None
21b g_Angularity of link _Pointed 21c g_Angularity of link _None
41a Stroke contrast_High 12a R_Style of terminal on leg_Flat
1a J_Style of terminal_Ball 42e Serif style_Sans
9e W_Style of apex ending_Serif 19a g_Number of stories_One
33a r_Style of branch/terminal_Ball 18a M_Style of apex endings_Flat
40a Character width_High 4d J_Style of stem ending_Sans
42a Serif style_Bracketed 33b r_Style of branch/terminal_Even
5a G_Placement of serif or bar on throat_Balanced 1b J_Style of terminal_Even
30d t_Style of stem ending_Sheared Straight 5c G_Placement of serif or bar on throat_Inside
4a J_Style of stem ending_Serif 31a t_Style of terminal stroke_Even
18c M_Style of apex endings_Serif 41c Stroke contrast_Low
12d R_Style of terminal on leg_Serif 9b W_Style of apex ending_Flat
39c x-height _Low
6d G_Style of spur/junction_Tapered
31d t_Style of terminal stroke_Tapered
2b J_Position on baseline_Below
23a g_Axis of upper bowl_Angled
25a a_Angle of top of bowl_Angled
20a g_Style of loop _Closed
19b g_Number of stories_Two
27b a_Style of spur_Curved
D1 +
J G W R M
g rt e
Hay m bc b
g
whimsical, serious
ag
M
D1 –
J G R
g a t r
bc b
modern, neutral
o
W

Dimension 2: high-inertia variables
friendly
4c J_Style of stem ending_Incised 12b R_Style of terminal on leg_Hook
9c W_Style of apex ending_Incised 30c t_Style of stem ending_Sheared Curved
12c R_Style of terminal on leg_Incised 22b g_Shape of ear_Ball
42d Serif style_Incised Sans 6d G_Style of spur/junction_Tapered
18b M_Style of apex endings_Pointed 11a C_Aperture opening_Narrow
5d G_Placement of serif or bar on throat_None 3a J_Length of tail_Long
9d W_Style of apex ending_Pointed 40a Character width_High
24a a_Number of stories_One 6c G_Style of spur/junction_Straight
26a a_Shape of counter_Round 1a J_Style of terminal_Ball
31b t_Style of terminal stroke_None 33a r_Style of branch/terminal_Ball
1d J_Style of terminal_Tapered 13a R_Shape of leg_Curved
33c r_Style of branch/terminal_Wedge 26b a_Shape of counter_Teardrop
10a C_Shape of bowl_Asymmetric 17b M_Angle of legs_Vertical
14b R_Style of leg-bowl junction_Single 2a J_Position on baseline_At
40c Character width_Low 22d g_Shape of ear_Flat
20b g_Style of loop _Open
17a M_Angle of legs_Angled
29a y_Style of vertex_Gapped
41b Stroke contrast_Medium
2b J_Position on baseline_Below
3c J_Length of tail_Short
28b y_Shape of tail_Straight
11b C_Aperture opening_Wide
13b R_Shape of leg_Straight
6a G_Style of spur/junction_Pointed
22c g_Shape of ear_Curved
G
g
M
t rg
D2 –
J J
m
R R
G C
a
W
ta
R
friendly
r
D2 +
b
J MG W
y
C
g
bc
y
m

Dimension 3 : high-inertia variables
friendly bland
cheap
9d W_Style of apex ending_Pointed 20b g_Style of loop _Open
24a a_Number of stories_One 29a y_Style of vertex_Gapped
26a a_Shape of counter_Round 1d J_Style of terminal_Tapered
31b t_Style of terminal stroke_None 22c g_Shape of ear_Curved
31c t_Style of terminal stroke_Serif 3c J_Length of tail_Short
6b G_Style of spur/junction_Rounded 2b J_Position on baseline_Below
18b M_Style of apex endings_Pointed 37b e_Length of tail_Short
30c t_Style of stem ending_Sheared Curved 21a g_Angularity of link _Curved
39c x-height _Low 40b Character width_Medium
38a o_Roundness _High 6a G_Style of spur/junction_Pointed
40c Character width_Low 19b g_Number of stories_Two
1a J_Style of terminal_Ball 38b o_Roundness _Medium
27d a_Style of spur_Vertical
40a Character width_High
3b J_Length of tail_Medium
22d g_Shape of ear_Flat
33a r_Style of branch/terminal_Ball
37a e_Length of tail_Long
19a g_Number of stories_One
20c g_Style of loop _None
21c g_Angularity of link _None
22b g_Shape of ear_Ball
g e
J
D3 –
G
g
bland, cheap
y
m o
g e
W M
t
o
J G
a
D3 +
Hay
t rg
J
bm
friendly

Framework (result!): microaesthetics
D1+ D1– D2+ D3+ D3–
whimsical modern friendly friendly bland
serious neutral cheap
1a 1b 1d 1a 1d
2b 2b 3b 2b
3c 3c
4a 4d 4c
5a 5c 5d
6d 6a 6b 6a
7c
8b
9e 9b 9c, d 9d
10a
11b
12d 12a 12c
13b
14b
17a
18c 18a 18b 18b
19b 19a 19a 19b
20a 20c 20b 20c 20b
21b 21c 21c 21a
22b, c 22d 22c 22b, d 22c
23a
24a 24a
25a
26a 26a
27b 27d 27d
D1+ D1– D2+ D3+ D3–
28b
29a 29a
30d 30c
31d 31a 31b 31b, c
33a 33b 33c 33a
36a
37a 37b
38a 38b
39c 39c
40a 40c 40a, c 40b
41a 41b
42a 42d

Framework: derived typefaces
D1 + D1 – D2 + D2 – D3 + D3 –
Sabon Univers Optima Century Futura Meta
Scala Helvetica Meta Helvetica DIN Meta Serif
Caslon
Tablet Gothic
SemiCond.
Meta Serif
Tablet Gothic
SemiCond.
Camphor Cabin
Farnham Arial Futura Bau Verdana Optima
Century Camphor Cabin Glypha Univers Utopia
Georgia DIN Klinic Slab Univers Museo Sans Cond. Scala
Meta Serif Cisalpin Scala Arial Souvenir Klinic Slab
Chaparral Museo Sans Cond.
Karmina Sans
Basic
Farnham
Utopia Museo Sans Cond. Caslon
Klinic Slab Roboto Sans Cond.
Verdana
Avenir
Futura
Remember: the analysis is of microaesthetics, not whole typefaces. These are
merely helpful representatives of microaesthetics associated with each dimension.

whimsical,
serious
modern,
neutral
friendly not-friendly bland, cheap
a glove
Sabon
a glove
Farnham
a glove
Klinic Slab
a glove
Univers
a glove
Tablet Gothic
a glove
Camphor
a glove
a glove
a glove
Cabin
Futura
Din
Museo Sans
Optima
a glove
Century Sch.
a glove
Helvetica Neue
a glove
Bau
a glove
Meta
Meta
a glove
Meta Serif
a glove
Utopia
Framework: type specimens

Critiques
too complex to be described solely by duality-diagram
analysis

Critiques
analysis
sense of semantic effects differ, esp. on “modern,”
“whimsical”

0 100 200 300 400 500 600
corporate
cheap
whimsical
neutral
bland
serious
modern
friendly
Topo Hiking Urban

Critiques
analysis
sense of semantic effects differ, esp. on “modern,”
“whimsical”
larger sample of typefaces, microaesthetics, participants,
semantic effects, map types

Final thoughts
type is more than what “looks ok”...

Final thoughts
...because type on a map is one part of a whole semiotic
and rhetorical system

Final thoughts
good type: legible, matches the map’s rhetorical goals

Final thoughts
good type: legible, matches the map’s rhetorical goals
type matters: and here is a new way to look at it

Enough of this ****. I’m gonna go
get hammered with Papyrus.
–Comic Sans

©2010 Mike Lasher, McSweeney’s Internet Tendency
fin

3dumb by Tension Type
Amaticbold by Vernon Adams
Roboto Condensed by
Christian Robertson
R199 G3 B31
R236 G199 B201
R102 G97 B97
R40 G36 B36
Palette

Microaesthetics, Part Deux: typeface design and semantic effects

Recommended

Recommended

More Related Content

Similar to Microaesthetics, Part Deux: typeface design and semantic effects

Similar to Microaesthetics, Part Deux: typeface design and semantic effects (13)

More from nacis_slides

More from nacis_slides (20)

Recently uploaded

Recently uploaded (20)

Microaesthetics, Part Deux: typeface design and semantic effects