Starting from the point of view of Donald Norman, author of the book Emotional Design, and from the most recent book of Aaron Walter, Designing for Emotion, this presentation will explain how to use typography to trigger emotion and engage your website visitors. Typography is an essential element in graphic design and communication. Usually it is used to “carry” information so it must have some common-sense characteristics such as high legibility and readability, scalability and appropriateness. But there is yet another level to explore, where typography can play a big role: evoking and triggering emotions. We all know about emotions because we experience them every day. Emotions influence the way we make decisions, evaluate risks, solve problems and categorize information. In advertising and product design, emotions are a really well-known subject. In web design, emotional design has just recently made its way to usability. After giving you 3 reasons to embrace emotional design, you will learn how to use typography to: 1. Avoid negative experiences with typography that require more attention and effort from users, which leads to unnecessary frustration and dangerous aversion of your site. 2. Create a positive experience and enhance user performance with your website, so that times flies faster! 3. Add personality and character to your website using typography for a more creative and unique experience. 4. Draw attention to specific areas of your site by creating visually appealing layouts and harmony. 5. Be clear and consistent for a more effective message. 6. And finally, encourage people to share their experiences and create long-lasting relationships with users. All of these subjects will be presented in a very easy and engaging way, with practical examples and tools to solidify the concepts. It is not necessary to have any specific knowledge about design and typography (some basic terms will be introduced during the presentation). Recommended for web designers, graphic designers and UX designers.

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

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

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

4. ;)

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

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

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

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

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

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

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

12. Toilette seat sticker
the toilet seat, mister!

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

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

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

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

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

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

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

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

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

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

23. PASSION PROJECTS
passion-projects.github.com

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

25. Responsive typography
FLUID TYPE Percentages
by Trent Walton

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

27. VOGUE ITALIA
www.vogue.it

28. BIO.
www.biography.com

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

30. STOP SIGN
redesign by Chiara Aliotta

31. TONE OF VOICE
example
WHATAREYOUDOING?

32. TONE OF VOICE
example
WHATAREYOUDOING?
What are you doing?

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

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

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

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

37. SNOWBIRD
www.snowbird.com

38. IMPERO
weareimpero.com

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

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

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

42. G’NOSH
www.gnosh.co.uk

43. LA BEUBAR
labeubar.com

44. FOuntain of youth
www.michelbergermonkey.com

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

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

47. ENGAGE
engageinteractive.co.uk

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

49. THE TEST OF OWNERSHIP
testofownership.com

50. WITH ART VISIT PHILLY
withart.visitphilly.com

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

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

53. THE kitchen Production
www.jacquico.com

54. THE RIDE AGENCY
rideforthebrand.net

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

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

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

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