evoking emotion through typography
WE IT!
Chiara Aliotta, Until Sunday
Joomla!Dagen Nederland 2013

Who ever said that pleasure
wasn’t functional?
Charles Eames
American architect and industrial designer
❝

DESIGN FOR EMOTION
REASONS TO DESIGN FOR EMOTION
fundamentalS of typography
THAT AFFECT A READER’s MOOD
EVOKING EMOTION THROUGH TYPOGRAPHY
01

;)

We perceive personality in the things in our
environment and then form relationships
with those things based on the personalities
we’ve given them.
(Reeves & Nass, 1998)
All design is emotional design
01 Design for emotion

What is emotional design?
Emotional design refers to design that’s
created to intentionally trigger a conscious
or unconscious emotional response.
01 Design for emotion

02
DESIGN FOR EMOTION
REASONS
TO DESIGN FOR EMOTION
fundamentalS of typography
THAT AFFECT A READER’s MOOD
EVOKING EMOTION
THROUGH TYPOGRAPHY

02 REASONS TO DESIGN FOR EMOTION
a) Emotion dominates decision making
b) Emotion increases motivation
c) Emotion affects memories and
creates personality
Three reasons to design for emotion

02 REASONS TO DESIGN FOR EMOTION
Emotional states guide decision making
and behavior by affecting how
we focus attention.
a) Emotion dominates decision making

Athens, 08 March 2013, 4:46 PM
Weather: Sunny, 17°
Syntagma Metro Station

02 REASONS TO DESIGN FOR EMOTION
Emotional response increases the likelihood
the user will perform a desired behavior.
b) Emotion increases motivation

Toilette seat sticker
the toilet seat, mister!

02 REASONS TO DESIGN FOR EMOTION
Emotion increases the strength of memories
through association and defines personality.
c) Emotion affects memories and creates personality

Coca Cola Advertising
SANTA CLAUS
by Huddon “Sunny” Sundblom, 1931

03
DESIGN FOR EMOTION
REASONS TO DESIGN FOR EMOTION
fundamentalS of typography
THAT AFFECT a READER’s MOOD
EVOKING EMOTION
THROUGH TYPOGRAPHY

People who are reading a well
typeset page are more engaged
in the experience and find
that time flies by faster.
The Aesthetics of Reading
by Kevin Larson and Rosalind Picard, Microsoft
❝

03
a) How the words look
b) Readability and legibility
c) Contrast
d) Scalability
e) Hierarchy
f) Tone of voice
The invisible side of typography
Fundamentals of Typography

03
Georgia
designed by Matthew Carter
Verdana
designed by Matthew Carter
a) How the words look
Aa Aa
Fundamentals of Typography

03
b) Readability and legibility
Kerning and tracking are two elements
that can determine if text is readable
and letters are legible.
Fundamentals of Typography

I LOVE SHIITAKE MUSHROOMS
I LOVE SHIITAKE MUSHROOMS
Kerning
Arvo, 60pt without kerning
Arvo, 60pt with positive kerning
Tip
In CSS, you can control space between each letter using OptimizeLegibility property
or with the bookmarklet, Kern.js

Tracking
Tip
In CSS, you can control space uniformly between characters using letter-spacing property
or the bookmarklet, Lettering.js
I LOVE CHOCOLATE
I LOVE CHOCOLATE
Arvo, 60pt without tracking
Arvo, 60pt with positive tracking (+20ems)

03
c) Contrast
Highly contrasted text and background
colors make reading easier.
Fundamentals of Typography

PASSION PROJECTS
passion-projects.github.com

03
d) Scalability
Always optimize size and line length
to maintain readability.
Fundamentals of Typography

Responsive typography
FLUID TYPE Percentages
by Trent Walton

03
e) Hierarchy
Headers and white space help eyes
to easily scan the content.
Fundamentals of Typography

VOGUE ITALIA
www.vogue.it

BIO.
www.biography.com

03
e) Tone of voice
Tone of voice will drive users to the right
emotion and help them relate to the content.
Fundamentals of Typography

STOP SIGN
redesign by Chiara Aliotta

TONE OF VOICE
example
WHATAREYOUDOING?

TONE OF VOICE
example
WHATAREYOUDOING?
What are you doing?

04
DESIGN FOR EMOTION
REASONS TO DESIGN FOR EMOTION
fundamentalS of typography
THAT AFFECT a READER’s MOOD
EVOKING EMOTION
THROUGH TYPOGRAPHY

04
Engage your audience
EVOKING EMOTION THROUGH TYPOGRAPHY
a) Draw attention: organize information
in memory
b) Add character and personality
c) Create memories: tell a story

04
a) Draw attention
A well-designed layout encourages positive
associations, reduces distraction and gives
a sense of accomplishment.
EVOKING EMOTION THROUGH TYPOGRAPHY

EMOTIONs TYPEFACES
Confidence
Trust
Dominance
Consistency
Serif
Sans Serif
Slab Serif
ORGANIZE INFORMATION
IN MEMORY
Aa
Draw attention

SNOWBIRD
www.snowbird.com

IMPERO
weareimpero.com

04
b) Add character and personality
By evoking emotions that suit the context,
we are able to communicate a personality
that establishes connection and trust.
EVOKING EMOTION THROUGH TYPOGRAPHY

EMOTIONs TYPEFACES
Spontaneity
Openness
Freshness
Honesty
Friendliness
Script
Handwriting
PERSONAL AND HUMAN
Aa
Add character and personality

Athens, 12 December 2012, 9:32 PM
Weather: Night, 12°
Bar BLACKBOARD

G’NOSH
www.gnosh.co.uk

LA BEUBAR
labeubar.com

FOuntain of youth
www.michelbergermonkey.com

EMOTIONs TYPEFACES
Happiness
Freedom
Enjoyment
Exuberance
Handwriting
Slab Serif
Serif
Smooth Sans Serif
Aa
Add character and personality
FUn and informal

LET’S DO THIS
www.letsdothis-now.org

ENGAGE
engageinteractive.co.uk

EMOTIONs TYPEFACES
Professionalism
Honesty
Trust
Serif
Sans Serif
Aa
Add character and personality
SERIOUS AND GROUNDED

THE TEST OF OWNERSHIP
testofownership.com

WITH ART VISIT PHILLY
withart.visitphilly.com

04
c) Create memories
Typography can tell a story, helping people
process information, enhance memories
and share their experience.
EVOKING EMOTION THROUGH TYPOGRAPHY

EMOTIONs TYPEFACES
Engagement
Consistency
Desirability
Interaction
Serif
Sans Serif
Script
Handwriting
TELL A STORY
Aa
Create memories

THE kitchen Production
www.jacquico.com

THE RIDE AGENCY
rideforthebrand.net

Stimulate imagination,
evoke emotions, bring pleasure
or do nothing.
Alexander “Sandro” Girard,
American architect and a textile designer
❝

Reading Lists & Recommendations
Books Articles
Designing for Emotion
Aarron Walter, A Book Apart
Design for Emotion
Trevor van Gorp and Edie Adams,
Morgan Kaufmann, 2012
100 Things Every Designer Needs
to Know About People
Susan Weinschenk, New Riders, 2011
Emotional Design: Why We Love
(or Hate) Everyday Things
Don Norman, Basic Books, 2004
A Practical Guide to Designing
the Invisible
Robert Mills, Five Simple Steps, 2005
Don’t Make Me Think: A Common
Sense Approach to Web Usability
Steve Krug, New Riders, 2006
15 Practical Tips How To Use Typography For Emotional Design
http://bit.ly/WGySl1
Why Does ‘Emotional Design’Work on the Web
http://onforb.es/uy7tZb
Emotions in Typographic Design: An empirical examination
http://bit.ly/13BA8ee
The Aesthetics of Reading
http://bit.ly/betxFP
Grey Text and a White Background: What Happened
to Readability of Type
http://bit.ly/p23ba5
Effects of Typography on Reader Mood and Productivity
http://bit.ly/p23ba5
Web Design is 95% Typography
http://bit.ly/13F2RCO
Fluid Type
http://bit.ly/KJNTCZ

More things...
Kerning.js
http://kerningjs.com/
Lettering.js
http://letteringjs.com/
Arctext.js
http://fittextjs.com/
Slab Text
http://bit.ly/wxGkOZ
FitText
http://bit.ly/zHhN9W
WhatFont Tool
http://chengyinliu.com/whatfont.html
Overgram Apps
http://bit.ly/XG7JUp
Readability Apps
http://www.readability.com/apps
Photolettering Apps
http://www.photolettering.com/
Contrast Rebellion
http://contrastrebellion.com/
Typespiration
http://typespiration.com/
Kerntype game
http://type.method.ac/
Shape type game
http://shape.method.ac/
Type Connection
http://www.typeconnection.com/index.php
Font Game
http://fontgame.ilovetypography.com/
I Shot the Serif
http://bit.ly/fdCpMZ
Apps and tools Funny things on web

www.untilsunday.it
copyright © 2013 Until Sunday. All rights reserved.