microaesthetics, part deux: typeface design and semantic effects
TRANSCRIPT
Elaine M. Guidero, U.S. Geological Survey @elaineguideroCynthia 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 informationplease 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
The lazy dog and quick foxThe lazy dog and quick foxThe lazy dog and quick fox
The lazy dog and quick fox
Rhetoric= an argument through design
Rhetoric= an argument through designcreated by map colors, symbols, arrangement (Muehlenhaus 2012)
Rhetoric= an argument through designcreated by map colors, symbols, arrangement (Muehlenhaus 2012)also created by typography: type is not neutral
Rhetoric= an argument through designcreated by map colors, symbols, arrangement (Muehlenhaus 2012)also created by typography: type is not neutralmismatch 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
Why do this research?Change the way cartographers look at typefacesCreate new guidelines for choosing typefaces based on aesthetics
Change the way cartographers look at typefacesCreate new guidelines for choosing typefaces based on aesthetics
Use microaesthetics instead of typefaces as the basis for guidelines
Why do this research?
Why do this research?Change the way cartographers look at typefacesCreate new guidelines for choosing typefaces based on aesthetics
Use microaesthetics instead of typefaces as the basis for guidelines
Avoid the blandscape (Kent 2008)
highlighted sections = letterform elementsvariations in them = microaesthetics
A type anatomy lesson
Microaesthetics
Univers Baskerville Adobe Jenson
Microaesthetics terminal
Univers Baskerville Adobe Jenson
earMicroaesthetics
Univers Baskerville Adobe Jenson
So what?
So what?Little guidance on how to choose a typeface for a map
So what?Little guidance on how to choose a typeface for a mapVisual variables of type exist, but are inconsistent
So what?Little guidance on how to choose a typeface for a mapVisual variables of type exist, but are inconsistentThese variables mix up label properties with typeface attributes
Label properties ≠ typeface attributesLabels: 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 typetypeface..................................kerning/tracking....................word spacing..........................leading.....................................tilt/spline of baseline.............posture....................................weight......................................compression...........................case.........................................hue...........................................value........................................
Univers, Garamond, Comic Sanstight to l o o s enarrow to widetight to loosestraight, angled, curvedroman or italic (or oblique)thin, light, regular, bold, blackcondensed, regular, extendedUPPER, lower, Title, small capshuevalue
tightleading
looseleading
Research outlinegoal: link microaesthetics to semantic effects
1. Sample of typefaces...
Research outlinegoal: link microaesthetics to semantic effects
1. Sample of typefaces...
2. Sample of semantic effects...
Research outlinegoal: link microaesthetics to semantic effects
1. Sample of typefaces...
2. Sample of semantic effects...
3. Gather data on semantic effects of type on maps (survey)...
Research outlinegoal: link microaesthetics to semantic effects
1. Sample of typefaces...
2. Sample of semantic effects...
3. Gather data on semantic effects of type on maps (survey)...
4. Sample of microaesthetics...
ArialAvenirBauCabinCamphorAdobe CaslonCentury SchoolbookChaparralCisalpinDINFarnhamFutura
GeorgiaGill SansGlyphaHelvetica NeueJohnstonKarmina Sans BasicKlinic SlabMetaMeta SerifMuseo Sans CondensedMyriad Pro CondensedNews Gothic
Step 1: Sample of typefaces (36)OptimaPT SansRoboto Sans CondensedSabonScalaSouvenirTablet Gothic SemiCondensedTitilliumTrebuchetUniversUtopiaVerdana
Step 2: Sample of semantic effects (8)corporatecheapwhimsicalneutral
blandseriousmodernfriendly
Step 3: Survey design3 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, or1:37,000
Step 3: Survey materials (maps)
Topographic, Ithaca, ny1:20,000
Step 3: Survey materials (maps)
Urban tourism, Des Moines, ia1:5,500
Step 4: Compile microaestheticsFind 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 microaestheticschoose letterform elements, then list all of their variations (microaesthetics)choose most “salient” microaesthetics visible at 12 pt on screen
Uppercase microaestheticsJ J J J J
G G G G GUppercase G
Uppercase J
Uppercase W
W W W W W
CC CUppercase C
R RR RUppercase R
Uppercase M
R
M M M
1c
1a
1b
4a 4b 4c 4d
1d2a 2b 3a 3b3c
5a5b5c 5d
6a6b 6c
10a 11a
10b
11b
10c
12a
14b
12b
14a 13a13b
15b16a
18a
15a
16b
18b 18c17a 17b
12c 12e 12d
6d
7b, 9a 9e8a8b
7c
9b
7a
9c 9d
J J J J J
G G G G GUppercase G
Uppercase J
Uppercase W
W W W W W
CC CUppercase C
R RR RUppercase R
Uppercase M
R
M M M
1c
1a
1b
4a 4b 4c 4d
1d2a 2b 3a 3b3c
5a5b5c 5d
6a6b 6c
10a 11a
10b
11b
10c
12a
14b
12b
14a 13a13b
15b16a
18a
15a
16b
18b 18c17a 17b
12c 12e 12d
6d
7b, 9a 9e8a8b
7c
9b
7a
9c 9d
Lowercase microaestheticsLowercase g
Lowercase a
Lowercase y Lowercase t
Lowercase r Lowercase e
Lowercase o
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
ooo
19a, 20c, 21c
20b
20b
25a
27a27c
25d
26c27b27d
29b29a
28b
38c38b
30d30c30b
31a
32b, 33b
31c 31d31b
33a35b
36a 36b
34b34a
37b37a
35a
28a
38a
30a
32a, 33c
26a 26b
24b, 25b24a, 25c
22f 23b 23a 22b 22e22a22c22d
21b21a
19b, 20a
Lowercase g
Lowercase a
Lowercase y Lowercase t
Lowercase r Lowercase e
Lowercase o
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
ooo
19a, 20c, 21c
20b
20b
25a
27a27c
25d
26c27b27d
29b29a
28b
38c38b
30d30c30b
31a
32b, 33b
31c 31d31b
33a35b
36a 36b
34b34a
37b37a
35a
28a
38a
30a
32a, 33c
26a 26b
24b, 25b24a, 25c
22f 23b 23a 22b 22e22a22c22d
21b21a
19b, 20a
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
HayHayHay39a 39b 39c
40a 40b 40c 41a
42e
41c41b
42a 42b 42c 42d
Microaesthetics in table formLetter Letterform element Microaesthetic ID
Uppercase J
Style of terminal (el1)
Ball 1aEven 1bSerif 1cTapered 1d
Position on baseline (el2) At 2aBelow 2b
Length of tail (el3)Long 3aMedium 3bShort 3c
Style of stem ending (el4)
Serif 4aFlag 4bIncised 4cSans 4d
Uppercase G
Placement of serif or bar on throat (el5)
Balanced 5aImbalanced 5bInside 5cNone 5d
Style of spur/junction (el6)
Pointed 6aRounded 6bStraight (spur) 6cTapered (spur) 6d
Uppercase W
Style of apex (el7)Cropped 7aJoined 7bOverlapped 7c
Height of apex (el8) Cap height 8aMidline 8b
Style of apex ending (el9)
Angled 9aFlat 9bIncised 9cPointed 9dSerif 9e
Uppercase CShape of bowl (el10)
Asymmetric 10aRound 10bSquared 10c
Aperture opening (el11) Narrow 11aWide 11b
Letter Letterform element Microaesthetic ID
Lowercase g
Number of stories (el19) One 19aTwo 19b
Style of loop (el20)Closed 20aOpen 20bNone 20c
Angularity of link (el21)Curved 21aPointed 21bNone 21c
Shape of ear (el22)
Angled 22aBall 22bCurved 22cFlat 22dPointed 22eStraight 22f
Axis of upper bowl (el23) Angled 23aStraight 23b
Lowercase a
Number of stories (el24) One 24aTwo 24b
Angle of top of bowl (el25)
Angled 25aConcave 25bConvex 25cFlat 25d
Shape of counter (el26)Round 26aTeardrop 26bTwo-pointed 26c
Style of spur (el27)
Angled 27aCurved 27bSerif 27cVertical 27d
Lowercase yShape of tail (el28) Curved 28a
Straight 28b
Style of vertex (el29) Gapped 29aJoined 29b
Lowercase t
Style of stem ending (el30)
Angled 30aFlat 30bSheared Curved 30cSheared Straight 30d
Style of terminal stroke (el31)
Even 31aNone 31bSerif 31cTapered 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. Sums of survey scores
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 diagramconstructs “dimensions” or super-variables onto which variables (microaesthetics and semantic effect scores) load at different weights
2b: Duality diagramconstructs “dimensions” or super-variables onto which variables (microaesthetics and semantic effect scores) load at different weightscannot describe IVs and DVs
2b: Duality diagramconstructs “dimensions” or super-variables onto which variables (microaesthetics and semantic effect scores) load at different weightscannot describe IVs and DVsuseful 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.50Dim.1
Dim
.2
el1.a
el1.b
el1.c
el1.d
el2.a
el2.b
el3.a
el3.bel3.c
el4.ael4.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.ael8.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.cel19.a
el19.b
el20.a
el20.b
el20.c
el21.ael21.b
el21.c
el22.a
el22.b
el22.c
el22.d
el22.e el22.fel23.a
el23.b
el24.a
el24.bel25.a
el25.b
el25.c
el25.d
el26.a
el26.b
el26.c
el27.a el27.b
el27.c
el27.d
el28.a
el28.bel29.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.ael34.b
el35.a el35.bel36.a
el36.b
el37.a
el37.b el38.ael38.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
modernfriendly
cheap
2b: Scatterplot D1+D3
el1.ael1.b el1.c
el1.d
el2.a
el2.b
el3.ael3.b
el3.c
el4.ael4.b
el4.cel4.d
el5.a
el5.b
el5.c
el5.del6.a
el6.b
el6.c
el6.del7.a
el7.bel7.c
el8.a
el8.b
el9.a
el9.b
el9.c
el9.d
el9.eel10.a
el10.b
el10.cel11.a
el11.b
el12.a
el12.b
el12.c
el12.d
el12.e
el13.a
el13.bel14.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.ael27.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.bel33.c
el34.a
el34.b
el35.a
el35.b
el36.ael36.b
el37.a
el37.b
el38.a
el38.b
el38.c
el39.ael39.b
el39.c
el40.a
el40.b
el40.c
el41.a
el41.bel41.c
el42.a
el42.b el42.cel42.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
corporatecheap
whimsical
neutralbland
serious
modernfriendly
Dimension 1: high-inertia variablesDimension 1 positive Dimension 1 negative
ID Semantic effect/Microaesthetic ID Semantic effect/Microaestheticwhimsical modernserious neutral
36a e_Height of crossbar _High 22d g_Shape of ear_Flat7c W_Style of apex_Overlapped 38c o_Roundness _Low8b W_Height of apex_Midline 27d a_Style of spur_Vertical22b g_Shape of ear_Ball 20c g_Style of loop _None21b g_Angularity of link _Pointed 21c g_Angularity of link _None41a Stroke contrast_High 12a R_Style of terminal on leg_Flat1a J_Style of terminal_Ball 42e Serif style_Sans9e W_Style of apex ending_Serif 19a g_Number of stories_One33a r_Style of branch/terminal_Ball 18a M_Style of apex endings_Flat40a Character width_High 4d J_Style of stem ending_Sans42a Serif style_Bracketed 33b r_Style of branch/terminal_Even5a 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_Even18c M_Style of apex endings_Serif 41c Stroke contrast_Low12d R_Style of terminal on leg_Serif 9b W_Style of apex ending_Flat39c x-height _Low6d G_Style of spur/junction_Tapered31d t_Style of terminal stroke_Tapered2b J_Position on baseline_Below23a g_Axis of upper bowl_Angled25a a_Angle of top of bowl_Angled20a g_Style of loop _Closed19b g_Number of stories_Two27b a_Style of spur_Curved
D1 +
J G W R Mg rt e
Hay m bc bg
whimsical, serious
agM
D1 –
J G Rg a t r
bc bmodern, neutral
o
W
Dimension 2: high-inertia variables Dimension 2 positive Dimension 2 negative
ID Semantic effect/Microaesthetic ID Semantic effect/Microaestheticfriendly
4c J_Style of stem ending_Incised 12b R_Style of terminal on leg_Hook9c W_Style of apex ending_Incised 30c t_Style of stem ending_Sheared Curved12c R_Style of terminal on leg_Incised 22b g_Shape of ear_Ball42d Serif style_Incised Sans 6d G_Style of spur/junction_Tapered18b M_Style of apex endings_Pointed 11a C_Aperture opening_Narrow5d G_Placement of serif or bar on throat_None 3a J_Length of tail_Long9d W_Style of apex ending_Pointed 40a Character width_High24a a_Number of stories_One 6c G_Style of spur/junction_Straight26a a_Shape of counter_Round 1a J_Style of terminal_Ball31b t_Style of terminal stroke_None 33a r_Style of branch/terminal_Ball1d J_Style of terminal_Tapered 13a R_Shape of leg_Curved33c r_Style of branch/terminal_Wedge 26b a_Shape of counter_Teardrop10a C_Shape of bowl_Asymmetric 17b M_Angle of legs_Vertical14b R_Style of leg-bowl junction_Single 2a J_Position on baseline_At40c Character width_Low 22d g_Shape of ear_Flat20b g_Style of loop _Open17a M_Angle of legs_Angled29a y_Style of vertex_Gapped41b Stroke contrast_Medium2b J_Position on baseline_Below3c J_Length of tail_Short28b y_Shape of tail_Straight 11b C_Aperture opening_Wide13b R_Shape of leg_Straight6a G_Style of spur/junction_Pointed22c g_Shape of ear_Curved
G
gM
t rg
D2 –
J J
mR R
G C
a
Wta
R
friendly
r
D2 +
b
J MG Wy
Cg
bc
y
m
Dimension 3 : high-inertia variablesDimension 3 positive Dimension 3 negative
ID Semantic effect/Microaesthetic ID Semantic effect/Microaestheticfriendly bland
cheap9d W_Style of apex ending_Pointed 20b g_Style of loop _Open24a a_Number of stories_One 29a y_Style of vertex_Gapped26a a_Shape of counter_Round 1d J_Style of terminal_Tapered31b t_Style of terminal stroke_None 22c g_Shape of ear_Curved31c t_Style of terminal stroke_Serif 3c J_Length of tail_Short6b G_Style of spur/junction_Rounded 2b J_Position on baseline_Below18b M_Style of apex endings_Pointed 37b e_Length of tail_Short30c t_Style of stem ending_Sheared Curved 21a g_Angularity of link _Curved39c x-height _Low 40b Character width_Medium38a o_Roundness _High 6a G_Style of spur/junction_Pointed40c Character width_Low 19b g_Number of stories_Two1a J_Style of terminal_Ball 38b o_Roundness _Medium27d a_Style of spur_Vertical40a Character width_High3b J_Length of tail_Medium22d g_Shape of ear_Flat33a r_Style of branch/terminal_Ball37a e_Length of tail_Long19a g_Number of stories_One20c g_Style of loop _None21c g_Angularity of link _None22b g_Shape of ear_Ball
g e
JD3 –
G
g
bland, cheap
ym o
g eW Mt
o
J Ga
D3 +
Hayt rg
J
bmfriendly
Framework (result!): microaestheticsD1+ D1– D2+ D3+ D3–whimsical modern friendly friendly blandserious neutral cheap1a 1b 1d 1a 1d2b 2b 3b 2b
3c 3c4a 4d 4c5a 5c 5d6d 6a 6b 6a7c8b9e 9b 9c, d 9d
10a11b
12d 12a 12c13b14b17a
18c 18a 18b 18b 19b 19a 19a 19b20a 20c 20b 20c 20b21b 21c 21c 21a22b, c 22d 22c 22b, d 22c23a
24a 24a25a
26a 26a 27b 27d 27d
D1+ D1– D2+ D3+ D3–whimsical modern friendly friendly blandserious neutral cheap
28b29a 29a
30d 30c31d 31a 31b 31b, c33a 33b 33c 33a36a
37a 37b 38a 38b
39c 39c40a 40c 40a, c 40b41a 41b 42a 42d
Framework: derived typefaces D1 + D1 – D2 + D2 – D3 + D3 –whimsical modern friendly friendly blandserious neutral cheapSabon Univers Optima Century Futura MetaScala Helvetica Meta Helvetica DIN Meta Serif
Caslon Tablet Gothic SemiCond. Meta Serif Tablet Gothic
SemiCond. Camphor Cabin
Farnham Arial Futura Bau Verdana OptimaCentury Camphor Cabin Glypha Univers UtopiaGeorgia DIN Klinic Slab Univers Museo Sans Cond. ScalaMeta Serif Cisalpin Scala Arial Souvenir Klinic Slab
Chaparral Museo Sans Cond. Karmina Sans Basic Farnham
Utopia Museo Sans Cond. CaslonKlinic Slab Roboto Sans Cond.
VerdanaAvenirFutura
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 glovea glovea glove
CabinFuturaDinMuseo Sans
Optima
a glove
Century Sch.
a glove
Helvetica Neue
a glove
Bau
a glove
MetaMeta
a glove
Meta Serif
a glove
Utopia
Framework: type specimens
Critiquestoo complex to be described solely by duality-diagram analysis
Critiquestoo complex to be described solely by duality-diagram 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
Critiquestoo complex to be described solely by duality-diagram analysis
sense of semantic effects differ, esp. on “modern,” “whimsical”
larger sample of typefaces, microaesthetics, participants, semantic effects, map types
Final thoughtstype is more than what “looks ok”...
Final thoughtstype is more than what “looks ok”......because type on a map is one part of a whole semiotic and rhetorical system
Final thoughtstype is more than what “looks ok”......because type on a map is one part of a whole semiotic and rhetorical systemgood type: legible, matches the map’s rhetorical goals
Final thoughtstype is more than what “looks ok”......because type on a map is one part of a whole semiotic and rhetorical systemgood type: legible, matches the map’s rhetorical goalstype 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 TypeAmatic bold by Vernon AdamsRoboto Condensed by Christian Robertson
R199 G3 B31R236 G199 B201R102 G97 B97R40 G36 B36
Palette