Microaesthetics, Part Deux: typeface design and semantic effects

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

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


earMicroaesthetics


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...



2. Sample of semantic effects...




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




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


Topographic, Ithaca, ny1:20,000


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


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


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

Design

Microaesthetics, Part Deux: typeface design and semantic effects