thesis process book Aura Seltzer
Š 2012 Aura Seltzer
Maryland Institute College of Art, Graphic Design MFA 2012 project typeconnection.com portfolio auraseltzer.com department thesis2012.micadesign.org/seltzer
Contents 4
the project
25
the essay
31
the exhibition
the
Project
5
The Overview what is type connection ?
This book presents the evolution of Type Connection. Sidebars share insights from my process as I edited and refined Type Connection’s concept, content, and visuals.
I began my thesis project by asking, “How can typography use humor to engage and inform an audience?” Type Connection is my answer to this question. Type Connection is a game that helps users learn how to pair typefaces. Like a conventional dating website, Type Connection presents its users with potential “dates” for each main character — without the misleading profile photos and commitment-phobes. The game features well-known, workhorse typefaces and portrays each as a character searching for love. Users are matchmakers. They decide what kind of match to look for by choosing among several strategies for combining typefaces. Along the way, they explore typographic terminology, type history, and more.
6
The Typeface Persona case study: creating adobe garamond pro's dater profile
Type Connection’s use of parody, metaphor, and personification make the game a light and humorous educational tool. As a proof of concept, I set out to write my first character’s dater profile and describe Adobe Garamond Pro as a person.
7
Adobe Garamond Pro Gender: Male Physique: Sturdy and agile, well-defined forms Heritage: French Looking for: Long-term dating, companionship
draft 2 I drew ideas for profile sections from existing online dating sites. After writing this early draft, I concluded that I needed to get rid of aspects that were not directly related to type or did not impart specific information about the typeface. Especially on the internet, users wouldn’t be willing to read a lot.
About Me: I am a modern-day High Renaissance man. My cologne is the scent from rows of old books that line my apartment. I don a well-groomed mustache with the occasional five o’clock shadow, a vintage tailored suit, and sharp-toe oxfords. A graceful, understated stride complements my firm handshake. I strive to accommodate others and willingly assist those who ask for help. I spent a number of years traveling across Western Europe, during which I learned how to properly cook beef bourguignon. At times, I command the presence of a male gymnast, swinging fluidly between parallel bars, but alas, I am a mere librarian. Core Values: Tradition, loyalty, flexibility My Perfect First Date: A show at the opera, lectures or book signings, a wine tasting My Ideal Match: Is not afraid of public transportation. Is detail-oriented but far more spontaneous than me. Accepts me for who I am despite my unsettled lineage. Is warmhearted and kooky, like a hand-sewn sweater. Will unknowingly convert me into a man who cuddles (or at least one who obligingly holds hands in public).
AaBbCcDdEeFf GgHhIi JjKkLlMmNnOoPpQq RrSsTtUuVvWwX xYyZz
8
my profile
g
Adobe Garamond Pro
g Review my Matches
my profile
italic
bold all caps
Adobe Garamond Pro gender
Male
physique
regular
bold italic
heritage
Sturdy and agile, French well-defined forms
looking for
Long-term relationship, companionship
semibold all caps bold small caps
semibold italic
about me
I am a modern-day High Renaissance man who dons a well-groomed mustache, the occasional five o’clock shadow, a vintage suit, and wedged-toe oxfords. A graceful, understated stride complements my firm handshake. I strive to accommodate others and willingly assist those who ask for help. At times, I command the presence of a gymnast, swinging fluidly between parallel bars, but alas, I am a mere librarian. core values
Tradition, loyalty, flexibility perfect first date
A show at the opera, lectures or book signings, a wine tasting ideal match
Is not afraid of public transportation. Is detail-oriented but spontaneous. Accepts my unsettled lineage. Is warmhearted and kooky, like a hand-sewn sweater. Will unknowingly convert me into a man who cuddles ( or at least holds hands in public ).
semibold bold
regular all caps
9
draft 3 (opposite) Draft 3, typeset in Adobe Garamond Pro, appeared with a corresponding type specimen in an early website mock-up. A critique suggested that I tone down the personification and focus on facts about typography and pairing. Specifying a typeface’s gender was a polarizing statement, and stating a typeface’s “ideal match” was too narrowing. Ideas for the “perfect first date” could be used for design ideas but didn’t need to appear in the profile. Mentioning what a typeface was “looking for” was also unnecessary. final draft (left) Rather than repeat the “About Me” text in both the profile and specimen, I presented the final draft of Adobe Garamond Pro’s profile solely as a type specimen. Subsidiary profile information like physique and heritage would exist in some other fashion on the site. I shifted the site’s frame from personification to type information and pairing strategies. I wrote a separate paragraph about each typeface’s history to accompany its specimen.
10
light italic
a sample of specimens (left to right) Glypha, Gill Sans, Maple, ITC Cerigo
11
12
The Strategies
Seek Physical Similarities.
devising strategies for pairing typefaces
You may be drawn to look-a-likes — those whose similar height, weight, proportions, and bone structure are similar to your own. Accept the narcissism of love, and use your own features as a matchmaking guide. In Type Terms: Pairing typefaces with common proportions will be easier on readers' eyes. Look for similar
draft 4 I wrote a set of five strategies for finding the right match to accompany an early stage of the website. Research drove me to think about similar proportions, contrast, time period, mood, and staying within a single typeface family. Each strategy is broken up into two voices: one that speaks with metaphoric language to users as if they are typefaces (not matchmakers) and another that speaks in specific typographic terms.
x-heights, cap heights, ascenders, and descenders, as well as correlating aperture size, axis tilt, terminal shape, and stroke consistency/geometry. Likeness in lowercase a, g, e (and sometimes t, f, q) — usually the most representative forms of a typeface — can suggest a solid pair.
Remember Your Roots. Sharing a historic era, customs, and values with your partner can strengthen your relationship. You may never argue over which type of art to hang in your foyer or, more importantly, how to raise your children. Before even meeting, you will be on the same page. In Type Terms: You can create harmonious matches by choosing typefaces designed for the same tool (pen, brush), output medium (metal, wood, screen), time period, or concept. Old style serif typefaces go well with humanist sans despite being years apart, because both were inspired by the broadnib pen.
13
Embrace the Other.
Rely on Your Family.
You may feel attracted to those who are different from
If you are ever lonely or need someone to talk to, you
you, hoping they will balance out your weaknesses and
can always count on the company of your immediate
bring something refreshing to the relationship. Too
family. Loved ones support you and make you feel
many differences can elicit friction — making cuddling
comfortable. Reach out to distant relatives if you feel
unbearable — so opt for just a few points of difference
claustrophobic at home or find your role too confining.
for a fairytale ending.
In Type Terms: You can utilize various weights from
In Type Terms: Pairing typefaces that contrast in weight,
a single type family, extended family, or superfamily, as
scale, width, spacing, and/or casing systematize the
families were designed to share a set of consistent traits.
content and add balance to the composition. Many
Bolds, italics, extended, and condensed fonts introduce
successful complementary pairs feature a serif typeface
typographic color, while character alternates and
with a sans serif typeface. Designate distinct roles
ligatures can make familiar relationships seem novel.
for each face — headline, body copy, caption — to help readers understand order of importance in the text.
Match Your Mood. Potential mates who share your temperament may also gravitate towards you. A rugged outdoorsy type might not sympathize with the frequenter of a five-star restaurant. Finding a mate that meshes with your mood can help you feel comfortable together as a couple. In Type Terms: Letterforms can convey distinctive emotional qualities. Select typefaces that, when paired together, exude a tone that is in keeping with the text and context. Typefaces can be used to convey a range of emotions including earnestness, politesse, delight, confidence, and apprehension.
14
Rely on Family. You can utilize various weights from a single type family, extended family, or superfamily, because families were designed — many times by the same designer — to share a set of consistent traits. Bold, italic, extended, and condensed fonts introduce typographic color, while character alternates and ligatures can make familiar relationships seem novel.
Seek the Similar. Pairing typefaces that look alike can create visual consistency that will not distract readers from the writing itself. Use one face’s features as a matchmaking guide, and look for similar x-heights, cap heights, and ascenders/descenders, as well as correlating aperture size, axis tilt, terminal shape, and stroke consistency/geometry. Comparable lowercase a, g, e (and sometimes t, f, q) can also suggest a solid pair.
Embrace the Other. Pairing typefaces that contrast in weight, scale, width, and/or spacing can eliminate monotony and visually divide the text — making it easier for readers to understand hierarchy. Too much contrast can cause friction, so opt for just a few points of difference. Many successful pairs feature a serif typeface with a sans serif typeface. Assign distinct roles — headline, body copy, caption — to each to help readers deduce order of importance.
Explore the Past. Focusing on the context of a typeface’s creation can provide a better understanding of its nuances. You can create compatible matches by choosing typefaces designed for the same tool (pen, brush), output medium (metal, wood, screen), historic era, or concept. Old style serif typefaces go well with humanist sans despite being years apart, because both were inspired by the broad nib pen.
final draft In writing my final strategies, I realized that fiction shouldn’t be the frame to deliver fact. I eliminated any trace of metaphor and made sure to be generous and specific with typographic information. I eliminated the strategy about matching moods, because that strategy is not unique to pairing (it applies to typeface selection in general), is largely subjective, and is closely related to the design application. The remaining four strategies became guiding principles for choosing a cast of characters and determining “right” from “wrong” in the game.
15
The Cast main characters and daters
main characters Adobe Garamond Pro Archer ITC Century ITC Stone Sans Univers daters Apollo Avenir Bryant Chaparral Pro Cronos Pro Eurostile Futura Gill Sans Glypha ITC Cerigo ITC Franklin Gothic LinoLetter Linotype Centennial Maple PMN Caecilia Utopia
For Type Connection’s five main characters, I chose typefaces that came from different time periods, had a variety of inspirations, and did not overlap in classification. I used my finalized pairing strategies to choose accompanying typefaces for the game: each main character had a successful match along the three strategies (“Rely on Family” was treated separately). Also, I made sure to pick workhorse typefaces that I thought young designers would have access to through their schools (and that I had a license to through MICA ). I aimed to provide a wide enough selection for users to learn how to apply the strategies on their own.
16
The Website Development
Logo
Five strategies for finding your perfect match
early mock-ups
Call to Action/ Mission Username
Adobe Garamond Pro
Sign SignInIn
For the first iteration of Type Connection, users assumed the identity of a typeface and looked for a match. Upon logging in on the homepage, users familiarized themselves with their assumed profile and clicked “Review My Matches” to find a list of recommended typefaces to peruse. Users visited a potential matches’ profile page and evaluated compatibility by examining a design sample and comparing selected letters.
my profile
g
Adobe Garamond Pro
g Review my Matches
italic
bold all caps
regular
bold italic
semibold all caps
Meet the Daters
Intro Blurb/ Artwork (Success Stories)
17
The homepage wireframe for this mock-up was inspired by type foundry and dating websites’ homepages, both of which dominantly feature “success stories.”
For this iteration, anthropomorphism was at the forefront. The site implied freewheeling but had clearly-determined outcomes. It involved the user minimally and didn’t impart that much information about type. I didn’t focus on strategies or include wrong answers.
my matches: 1–5 of 5
Gill Sans
g View Compatibility
Return to Profile light
UltRa BOlD cONDENSED
cONDENSED all caPS
ShaDOWED all caPS
sort by: Best Match
g
18
With later iterations of the website, I turned Type Connection into a game where the user was a matchmaker who created pairings and set up couples to go on a date. I put typographic information at the forefront and used the humorous dating metaphor as a frame for the rich content. With a game-like structure, there were less expected results. I gave a reason for users to play again. Also, I used the strategies as a way to evaluate and organize the pairings. Type Connection became less about creating a simple tool to share formulaic matches and focused more on imparting strategies so that users would feel empowered to pair typefaces outside the context of the game.
I used paper mock-ups to test sequencing and underlying grids of revised iterations.
19
Head over heart. Evaluate Univers and Glypha’s potential as a couple.
Life’s too short to live alone. First, choose a character to match.
e k e e e
Send on a Date
Reevaluate Options
GRID FORMATION.
My work demands simplicity, precision,
and a global design vocabulary.
I dress for the day with a firmly-pressed shirt,
adobe garamond pro
high-wasted trousers, and functional footwear—
no embellishments. adobe garamond pro
univers
univers I broke through the glass ceiling.
glypha
I AM A STRUCTURAL ENGINEER WHO DREAMS IN
45 light all caps
GRID FORMATION. MY ANDROGYNOUS FEATURES
k f
My work demands simplicity, precision,
and architectural background signify my technical,
I broke through the glass ceiling.
73 black extended all caps
hard-willed attitude in the workplace.
MY ANDROGYNOUS FEATURES
and a global design vocabulary.
Built like a ladder
I dress for the day with a firmly-pressed shirt,
<
I AM A STRUCTURAL ENGINEER WHO DREAMS IN
39 thin ultra condensed
and architectural background signify my technical,
with long legs and jutting feet,
high-wasted trousers, and functional footwear—
I DOWNPLAY MY FEMININE CURVES AND OVAL FACE
adobe garamond pro
adobe garamond pro
no embellishments withresults wide-leg trousers . and geometric glasses. compatibility
hard-willed attitude in the workplace.
67 bold condensed oblique
65 bold
MY SQUARE HEAD AND ANGULAR JAW
I savor the intimidation factor
lowout Embrace Other stand at greatthe distances, of high Seek the Similar BUT MY NEUTRAL DEMEANOR & UNCANNY clonking platform heels med Explore the Past resemblance to my colleagues seem 49 light ultra condensed all caps
MY SQUARE HEAD AND ANGULAR JAW 67 bold condensed oblique
Let’s Play! stand out at great distances,
Built like a ladder
75 black oblique small caps
45 light small caps
47 light condensed
55 roman
45 light
45 light oblique small caps
49 light ultra condensed all caps
and can communicate an artistic vi-
BUT MY NEUTRAL DEMEANOR & UNCANNY
Family ton/a maskRely myonindividual -
55 roman
ity.
resemblance to my colleagues seem
to mask my individuality. 45 light oblique small caps
sion
with long legs and jutting feet,
75 black oblique small caps
solely through ideograms.
85 extra black small caps
I DOWNPLAY MY FEMININE CURVES AND OVAL FACE 53 extended all caps
with wide-leg trousers and geometric glasses.
67 bold condensed oblique
I savor the intimidation factor of 49 light ultra condensed all caps
clonking platform heels Life’s too short to live alone. First, choose a character to match.
55 roman
e k e e e I am A STRUCTURAL engineer who dreams in grid formation.
adobe garamond pro
a d r i a n f r u t i g e r , 1957
adobe garamond pro
univers (adrian frutiger, 1957) Univers is a neo-grotesque sans serif conceived as a total system for both metal and photosetting. A departure from Futura’s severity and Helvetica’s invisibility, Univers’ simple, homogenous structure is legible from afar and appropriate for long text. The numbering system for its 21 styles was a response to naming inconsistencies. With diagonally-cut curve ends, a square dot over the i, and G without a spur, Univers is neutral to different languages, as well.
adobe garamond pro
cap height x-height baseline
and can communicate an artistic vision
solely through ideograms.
45 light oblique small caps
0%
100%
adobe garamond pro
Gabocsegqtf
Head over heart. Evaluate Univers and Glypha’s potential as a couple.
My work demands simplicity, precision,
and architectural background
Heritage: Swiss Virtues: Renovation, illusion
hard-willed attitude in the workplace.
100%
and a global design vocabulary.
Built like a ladder
I dress for the day with a firmly-pressed shirt, wear
compatibility results
Only fools rush in. Pick a strategy for finding Univers' match.
SEEK
the
EXPLORE
the
PAST
FAMILY
1
2
3
4
Look closely.
Pairing look-a-likes requires an eye for detail.
med
Explore the Past
n/a
Rely on Family
Think deeply.
Sharing history and influences can lead to a pleasant future.
75 black oblique small caps
and imparting a bit of type knowledge.
high-wasted trousers, and functional
and a global design vocabulary.
i broke
through the GLASS ceiling.
I dress for the day with a firmly-pressed shirt, high-wasted trousers, univers
adobe garamond pro
no embellishments
glypha
Watch that cursor. Glypha isn’t very touchy-feely.
100%
adobe garamond pro
65 bold
hard-willed attitude in the workplace. 75 black
35 thin oblique
with long legs and jutting feet,
67 bold condensed oblique
55 roman all caps
I DOWNPLAY MY FEMININE CURVES AND OVAL FACE
stand out at great distances,
75 black oblique
with wide-leg trousers and geometric glasses.
49 light ultra condensed all caps
55 roman
Be careful.
e f e
k
My work demands sim& plicity, precision,
45 light oblique small caps
and architectural background signify my technical,
Try Again
View Best Match
53 extended all caps
55 oblique
I savor the intimidation factor of 75 black oblique small caps
clonking platform heels
resemblance to my colleaguesand seem can communicate an artistic vision
What’s comfortable can be easier, but it might not get Univers laid.
I AM A STRUCTURAL ENGINEER WHO DREAMS IN
MY ANDROGYNOUS FEATURES
Built like a ladder no embellishments
45 light small caps
45 light oblique small caps
45 light
to mask my individuality solely through ideograms. 100%
100%
GRID FORMATION.
65 bold oblique all caps
85 extra black small caps
BUT MY NEUTRAL DEMEANOR &
Meet the daters. Choose one to test its compability with Univers.
0%
One sentence stating
MY SQUARE HEAD AND ANGULAR JAW
0%
0%
Seek the Similar
on
SIMILAR
Act boldly.
Embrace the Other
RELY
the
OTHER Opposites attract and can make relationships more exciting.
low high
47 light condensed
35 thin
Swiss through the glass ceiling. IHeritage: broke Virtues: Order, objectivity
why the I dress for the day with arelationship firmly-pressed shirt, wouldn't work out
with long legs and jutting feet,
high-wasted trousers
EMBRACE
Physique: Stringent and spartan
65 bold
Reevaluate Options
<
univers
<
glypha I broke through the glass ceiling.
I AM A STRUCTURAL ENGINEER WHO DREAMS IN
Physique: Toned with good bone structure GRID FORMATION. MY ANDROGYNOUS FEATURES
0%
Send on a Date
My work demands simplicity, precision, ! vocabulary. k f and a global design
Find its Match
After choosing a main character, strategy, and date option, users evaluated compatibility by analyzing the nuances of the typefaces’ specimens. I indicated on a spectrum how well the typefaces fit the four strategies. The specimens were not the best way to learn more about each typeface or to be able to cross-examine their details. I also missed the opportunity to showcase beautiful letterforms on a larger scale with this design.
20
The Final Website typeconnection.com
I coded the final version of Type Connection with HTML5, CSS3, and jQuery â&#x20AC;&#x201D; all technologies that were foreign to me when I began my project. I also learned how to make the site responsive for three different browser sizes. The site is compatible with IE 6+, Safari 5+, Firefox 3.6+, and Chrome 17+. Typekit served the typefaces (FF Tisa Web with a hint of Le Monde Courrier). file breakdown 350 PHP files 287 images 18 folders 4 CSS files 3 JavaScript files 1 .ico icon
This graphic approach to the homepage makes the call to action clear and gives the sense that users are about to enter a typographic world. For the color palette, I wanted to avoid clichĂŠ love colors.
21
The reverse sides of the character cards describe the typefacesâ&#x20AC;&#x2122; personalities and showcase a limited palette of styles and weights. Historical descriptions for each typeface appear on rollover. The design reiterates the usersâ&#x20AC;&#x2122; main character choice by showing that typefaceâ&#x20AC;&#x2122;s faded character card next to the strategies. Rollover one-liners clarify the meaning of each strategy. After users choose a strategy, the game presents three daters for users to evaluate.
23
After selecting a dater, users evaluate compatibility based on their chosen strategy. Users can toggle between large letters of the two typefaces and click the circled areas to learn more about each typeface’s anatomy. Specimens show each face’s weights and styles. At this step, the website prompts users to send their chosen couple on a date. If the match is correct, users see a congratulatory page that explains why the match works. If the match is not the best answer for the strategy, a pop-up states why and lets users select a different dater.
happy couples Type Connection presents 20 successful typeface pairings. To illustrate how the pairings work together, I imagined design applications (e.g. a menu, newspaper, poster) that also allude to activities the typefaces would enjoy if they were people: a wine tasting, dinner and a show, or a lecture. Designs appear at the final step of the game and on a “Meet the Matches” page.
24
# of Visits: First Week of Launch 20,000 10,000
The Launch
march
26
27
28
29
30
31
april
analytics and favorite tweets In the first week of Type Connection’s launch, the site received over 62,000 unique visitors. Exactly one month later, that number had nearly doubled. Over 111,000 unique visitors have played, and the total number of page views has exceeded one million. The percentage of new visits is still high at 73%, and the percentage of returning visitors is slowly growing.
Mr. DeLand @MrDeLand @auraseltzer @typeconnection is a fun way to explore an often difficult concept for young designers. well done! cipmann @cipmann Didactic type site, loads of fun, superb copy. We highly recommend. typeconnection.com Virginia McLeod @outcasteditions This is brilliant. And elegant. And smart: The Type Connection typographic dating game bit.ly@GRLWhm via @swissmiss + @the99percent Mark Staplehurst @britburger @auraseltzer To be honest my face began to ache from the permasmile: they’re all spot on. The site is a perfect blend of academic & playful. Claire Monique @clairemonique more fun than real dating sites!! a typographic dating game by @auraseltzer typeconnection.com
Emily Brophy @elouwebdesign There are good things, and then there are amazing things that make you fall in love with the web all over again: typeconnection.com Dana Larson @strawburrymiwk I wonder if other educational tools could mimic this kind of teaching method? I learned a lot more thn I have elsewhr. typeconnection.com/index.php jenny watson @JennyiAm Now here are some relationships that will actually last forever. typeconnection.com Morgan @bwoup Just discovered Type Connection, it’s brilliant. Engaging content and great presentation, good job! typeconnection.com @auraseltzer
David N Atkinson @DNAtkinson Even non-type nerds shd check out Type Connection bit.ly/ H7adPP Fun, informative, slick, lovely copywriting. Congrats, @auraseltzer
the
Essay
26
The Essay when archer met avenir Type Connectionâ&#x20AC;&#x2122;s Teaching Methods for Pairing Typefaces
The thesis essay is a 1,500-word written piece about the themes, subject matter, and/or process of a thesis project. I wrote a persuasive essay that justifies from an educational standpoint three design judgments I made in developing Type Connection.
I have a love affair with typography. I love everything from its detailed forms and bold texture to its rich history and connection to both writing and speech. For my thesis project, I wanted to figure out how to get other graphic designers, especially students, excited to learn about type. I designed Type Connection, a website and modified dating game that aims to educate visitors about the choices involved in pairing typefaces. Through an interactive interface, I introduce users to personified typeface characters, teach strategies for pairing two typefaces together, and help users understand what constitutes a good combination. Type Connection could have taken many forms: a printed book, a how-to guide, a series of flash cards, and more. I decided to make Type Connection a website. As a website, Type Connection has the potential to reach a wider audience, quickly, at a more affordable price (for both myself and my users). The project is online and available for people to see with just one click. Users can access the resource at any time of day or night. As an educational tool, an
27
online game allows choices, and provides pacing
The virtue of this unique experience, however, is
and suspense —elements that are often lost or
that users feel empowered. Users are more likely
impossible to imitate through a book. An online
to enjoy learning about typography if they feel
game also enables the user to pair typefaces more
invested in the steps they take. They will be excited
easily and receive immediate feedback based on
to discover content because it feels like it is new
those choices. With a website, I can add and edit
information that I designed and wrote just for them.
information, as needed. Most importantly, I can reveal
The game follows users’ own tastes and decisions
a lot of information about typography gradually,
and, in doing so, uncovers strengths and weaknesses
in digestible bits, and account for different levels
that may not have surfaced without this personalized,
of involvement from my users.
interactive learning. With a website, users can return
Aside from discrepancies across Internet speed, devices, and browsers, the main disadvantage of
to the site as many times as they’d like, and will feel this sense of excitement each time they play.
teaching users how to pair typefaces through an
To teach users how to pair typefaces, Type Connection
online interface is that each user’s experience is
personifies typefaces and uses the metaphor that
different. Type Connection’s lessons depend on the
users are matchmakers for typefaces looking for
pairings users try and the number of times they
love. Like human beings, typefaces are built with
play. Each user’s interaction with Type Connection
common dna; they share basic anatomies (arms,
is unique, which may not allow for consistent
legs, x-heights, apertures, counters, etc.) that students
educational experiences or similar interpretations
can analyze and compare. I chose to anthropomor-
of the content.
phize typefaces so that, from the outset, users
28
Personification and metaphor inspire users to think creatively about pairing typefaces.
would get a sense of a
would not (and could not) give clear formulas. I
typeface’s physique,
did not want to provide strict rules on how to pair
voice, and personality.
typefaces, but because of this more open-ended,
The metaphor puts
imaginative strategy, I risked convoluting the topic
the user in a familiar
and confusing my users.
context. Everyone can sympathize with what it’s like (and what’s at stake) when searching for a potential companion. I hoped that users would become more emotionally invested in the success of their pairings if they were matchmakers, the ones responsible for the combinations, rather than graphic designers performing a task. Users learn by playing, a strategy that differentiates the site from other educational resources on typography. If users have fun while learning, they are more likely to return. Personification and metaphor inspire users to think creatively about pairing typefaces. They make an esoteric subject like typography approachable and fresh.
I worried that my users might become confused by the metaphor, so I reduced that risk by separating Type Connection’s creative writing from the practical writing about type. When I personified a typeface, I looked at the typeface as an image, not as a functional letterform, and interpreted the body and appearance of the typeface to be suggestive of human character traits. Type specimens and the reverse sides of character cards speak to the typefaces as people, and because I treated the text as a visual composition, the specimens and character cards showcase each face as a palette of weights and styles. “Family portraits” and “happy couples” snapshots allude to activities
By creating humanlike personalities for my typefaces
the typefaces would enjoy if the typefaces were
and challenging users to help them find love, I risked
people, but more apparently, the portraits and
disrupting Type Connections’ ultimate purpose:
couples illustrate the pairs in practical applications.
presenting users with reproducible strategies for
I separated the language of love from the language
pairing typefaces. For entertainment and engagement
of typography, and this allowed me to incorporate
purposes, I added creative writing and nonessential
extra levels of information that would enrich —not
layers of information through which users would
stifle — use of the website.
have to grasp these strategies. To allow for personification and metaphor, I decided Type Connection
Type Connection uses another method for teaching the pairing of typefaces: the selection of strategies.
29
Once users select a main character to pair, they
whether Type Connection can really be considered
choose whether to “rely on family,” “seek the similar,”
a game if it consists of a series of closed loops. Users
“embrace the other,” or “explore the past.” Their
could feel manipulated, as if they are being cornered
choice guides the subsequent options for daters and
to take specific paths. In requiring users to make
the degree to which I deem certain options correct
a choice—and one that is not truly open — I risked
(or not). From an educational standpoint, I introduced
frustrating users to the point where they would
the strategies as measuring sticks to help the users
stop playing.
evaluate the appropriateness of their pairings. This choice is monumental in the game. It orients users’ thinking about potential daters. It forces the users to make a judgment — one the users will likely repeat in real life when creating their own pairings — while making the users aware that there is more than one rationale for pairing typefaces. It encourages users to think strategically before responding visually, so that they will learn how to justify their own type decisions to others.
Type Connection focuses users'
I mitigated the possibility of users resenting (and leaving) the game by reinforcing the choices that they make each step thereafter. Instructions at future steps embrace users’ choice of strategy, whether I instruct them to “make themselves at home” and learn more about a typeface family or ask them to evaluate a pairing based on that strategy. In designing a closed loop for Type Connection, I guide users down paths in order to give them helpful feedback. Each response is tailored to users’ exact choices and
The challenge of forcing
imparts certain lessons. The illusion of a customized
Type Connection’s users to
response creates a delight that outweighs any pos-
choose a strategy before
sible frustration. By requiring the user to choose
are learning valuable lessons
proceeding with the game
between a few purposeful options, Type Connection
while enjoying the metaphor
is that it gives the impres-
focuses users’ thinking so users feel they are learning
sion that users have more
valuable lessons while enjoying the metaphor
control in the game than
of matchmaking.
thinking so users feel they
of matchmaking.
they really do. If unable to break rules or make genuinely free choices, users might rethink how much fun they’re having. They may question
When I launched Type Connection online, I felt proud that the project was complete and oddly comforted that no one knew about it yet. I hoped
30
that teachers would recommend the game, students
150 countries. I was ecstatic to read that people found
would enjoy playing, and that designers would pass
the site informative, innovative, and funny. They
it around in their close circles. I submitted a website
enjoyed playing. Each visitor spent an average of
link to eight design blogs, believing that their editors
three minutes doing so. Twenty-five percent of
would deem the project worth sharing. Immediately
visitors are return visitors. Some demanded more
after hitting Send, I worried about broken links,
typefaces be added to the site. Friends questioned
typos, and errors. I worried that visitors — especially
how I could monetize the site’s traffic and content.
typeface designers — would passionately disagree with my logic and pairings.
I created a Type Connection Twitter username, and I have nearly 400 followers. I have no clear vision of
That same day, Quipsologies and Swissmiss featured
where the brand should go next (if anywhere). I am
Type Connection, and the site received 9,873 visits.
far more excited about the opportunities that Type
Messages swarmed on Twitter, to my shock. The
Connection has allowed, from offers for freelance
number of international visitors impressed me most.
work to job interviews. I hope that Type Connection
Out of 106,000 unique visitors so far, only 42% are
will give me the chance to work on new projects that
from the United States — the remaining spanning
require a similar depth of thinking.
the
Exhibition
32
33
The Exhibition maryland institute college of art Meyerhoff Gallery, March 26 – April 1, 2012
installed 2,453 pieces of vinyl – Black Matte ~200 cards – Hammermill Color Copy Digital Cover, 100lb. ~200 handouts – Hammermill Color Copy Digital Cover, 100lb. 60 strips of Scotch blue painters tape – 1.5" wide 20 pieces of PVC plastic – white, 7.92" x 13" x 6mm 20 plotted prints – white, 7.92" x 13" x 6mm 6 nickel-plated display clips by Hammerpress 6 wire nails – #17 x 1"
3 packages of Velcro tape – 15" x .75" each 3 plotted posters – 30" x 22" each 2 extension cords 2 screws found in Brown 404 1.5 gallons Benjamin Moore Super Spec paint –“Titanium” 1 IKEA Lack wall shelf – white, 11.75" x 10.25" x 2" 1 pedestal – 40" x 18" x 24" 1 package light duty Arrow staples – .25" x 6mm 1 iMac – silver, 19" diagonal
34
Designing an exhibition about a website was a difficult task, especially because the majority of my content was written. I questioned how to present (and perhaps amplify) the dating metaphor. I added a few vinyl hearts to text but tried to make the design in keeping with the website’s neutral, clean aesthetic. My final installation included: a computer station for visitors to play the game; three specimen posters that represented the personification in the game; a vinyl flowchart that showed a top-down view of the game (otherwise a surprise while playing); and a colorful grid that celebrated the 20 “Happy Couples.” I gave away a card with the website URL and designer credits, hoping that visitors would play at home and share the website with friends. I also gave away a handout that listed the “Happy Couples” and described their date activities to illuminate the meaning behind their design applications.
35
A special thanks to my teachers, family, and friends for their smarts and support.