SlideShare a Scribd company logo
2013

Game Design 2
Lecture 3: Text

http://gcugd2.com

david.farrell@gcu.ac.uk
Reading
• Duarte 140 - 155
• Fox 87-98
Two Questions
• How can you use text visually to
accomplish design goals?

• How can text help you visualise data?
Anthropomorphised Fonts
• Fonts have personality.
• Serious
• Playful
• Friendly
•Tense
• Annoying
• Distressed
Game Design 2 (2013): Lecture 3 - Use of Text in design.
Game Design 2 (2013): Lecture 3 - Use of Text in design.
Functional Fonts
•fixed

width fonts {
useful for programming;
because characters line up;

}

•Other

fonts are suitable
for OCR

•(0

vs O)
Font components

play
Cap Height

play
Cap Height

X Height

play
Cap Height

X Height

Baseline

play
Cap Height

X Height

Baseline

play
Ascender
Cap Height

X Height

Baseline

play
Ascender

Descender
Serifs

Cap Height

X Height

Baseline

play
Ascender

Descender
Serifs

Cap Height

X Height

Baseline

play
Ascender

Descender

Counter
Serifs

Cap Height

X Height

Baseline

play
Ascender

Descender

Counter

Kerning
Kerning
• Fixed

width fonts look strange
because they force equidistant spacing
between letters.

• Kerning is the process of adjusting space
between letters to soothe the eye.
Serif Fonts

•The serifs connect letters
• useful at small point size
• or in large paragraphs
• problematic for dyslexics
Sans Serif Fonts

•Sans means ‘without’

• generally accepted as easier to read
• work better on computer screens
Ligatures

•firefly

• note how the ‘f’ and ‘i’ interact without
ligatures

•firefly

• Apple apply ligatures to ‘fi’ but not to ‘fl’
Mixing Fonts
• Paired fonts can be effective.
• one for header
• one for main text
• Have a really GOOD reason before going
to three or more fonts
Colour & Contrast
• Essential in menus & HUD
• If game is dark, use light text
• If game is light, use dark text
• If cannot guarantee background, add a
border to text

• can be x pixel border or container space
Game Design 2 (2013): Lecture 3 - Use of Text in design.
Game Design 2 (2013): Lecture 3 - Use of Text in design.
Game Design 2 (2013): Lecture 3 - Use of Text in design.
Animating Text
• Only animate if it adds meaning
• Nintendo style of conversation is to
animate blocks of text

• Colour change for rollovers == OK
• Colour change to make GUI shiny == bad
Game Design 2 (2013): Lecture 3 - Use of Text in design.
Using Text
• Where possible, show don’t tell
• but where necessary tell
• Tufte: “to clarify, add detail”
• Use little text
• Even in adventure games, people don’t read
• WOW - http://bit.ly/wowtextlimit
• Avoid UPPPERCASE in large quantities
Using Text
• Sparing use of colour or emphasis can
pass on important information

• If you allow resizing of text, test extremes

to see how your design holds up (especially
true of web browser based games)

• Consider fully justifying blocks of text
Text as visualisation
• Word Clouds
Game Design 2 (2013): Lecture 3 - Use of Text in design.
Game Design 2 (2013): Lecture 3 - Use of Text in design.
Game Design 2 (2013): Lecture 3 - Use of Text in design.
Game Design 2 (2013): Lecture 3 - Use of Text in design.
Game Design 2 (2013): Lecture 3 - Use of Text in design.
Game Design 2 (2013): Lecture 3 - Use of Text in design.
Internationalisation
• Not all fonts are compatible
• UTF-8 fonts should work
• Much care needed if copy / pasting
• If using dynamically loaded text, sometimes
text effects cannot be applied.
Questions?

More Related Content

PDF
Game Design 2 (2013): Lecture 4 - UI Components
KEY
Game Design 2: Lecture 4: Game UI Components
KEY
Game Design 2 (2010): Lecture 3 - UI Components
PPT
Game Design 2 - Lecture 2 - Menu Flow
KEY
Game Design 2: Menu Flow (2011)
KEY
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
PPTX
Collaborative Techniques
PPTX
Presentation - iOS - UI and UX - Mr. Samesh & Mr. Neetin
Game Design 2 (2013): Lecture 4 - UI Components
Game Design 2: Lecture 4: Game UI Components
Game Design 2 (2010): Lecture 3 - UI Components
Game Design 2 - Lecture 2 - Menu Flow
Game Design 2: Menu Flow (2011)
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
Collaborative Techniques
Presentation - iOS - UI and UX - Mr. Samesh & Mr. Neetin

What's hot (19)

PPT
GCU Game Design 2 (2013): Lecture 2 - Menu Flow
KEY
Game Design 2 (2010): Lecture 2 - Menu Flow
PDF
Game Design 2 (2013): Lecture 5 - Game UI Prototyping
PPT
Game Design 2: Lecture 10 - UI Layout
PDF
Game Design 2: Lecture 1 - Introduction
PDF
Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication
PDF
Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor
PDF
Game Design 2 (2013): Immersion Through Game UI
PDF
Game design 2 (2013): Lecture 14 - Revision
PPT
Game Design 2: Lecture 9 - Immersion through UI
PPTX
Windows Phone XNA Games
PPTX
Assignment 1 Favourite Game Presentation
PDF
Design preso #1
PDF
Bad Game Design: Spooky Usability in Games
KEY
Game Design 2: UI in Games - Revision Lecture
PPT
Cognitive Walkthrough for Learning Through Game Mechanics at ECGBL13
DOCX
Game features
PDF
Hybrid Game Development with GameSalad
PPTX
Cross-Platform Software Design
GCU Game Design 2 (2013): Lecture 2 - Menu Flow
Game Design 2 (2010): Lecture 2 - Menu Flow
Game Design 2 (2013): Lecture 5 - Game UI Prototyping
Game Design 2: Lecture 10 - UI Layout
Game Design 2: Lecture 1 - Introduction
Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication
Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor
Game Design 2 (2013): Immersion Through Game UI
Game design 2 (2013): Lecture 14 - Revision
Game Design 2: Lecture 9 - Immersion through UI
Windows Phone XNA Games
Assignment 1 Favourite Game Presentation
Design preso #1
Bad Game Design: Spooky Usability in Games
Game Design 2: UI in Games - Revision Lecture
Cognitive Walkthrough for Learning Through Game Mechanics at ECGBL13
Game features
Hybrid Game Development with GameSalad
Cross-Platform Software Design
Ad

Viewers also liked (9)

PPTX
Alchemy Vs Chemistry: The Emperor's New Serious Game (Pecha Kucha)
PPT
Serious games career quest
PDF
Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI Design
PPT
Serious games cwltgm
KEY
Mindset Training 2 - Goal Orientation
KEY
Mindset Training 1 - what are growth and fixed mindsets
PDF
Game design 2 (2013): Lecture 11 - User Feedback in Game Design
PPT
Game Development Project Management/Concept
PPT
Game Design: The Production Plan
Alchemy Vs Chemistry: The Emperor's New Serious Game (Pecha Kucha)
Serious games career quest
Game Design 2 (2013): Lecture 6 - Icons and Semiotics in Game UI Design
Serious games cwltgm
Mindset Training 2 - Goal Orientation
Mindset Training 1 - what are growth and fixed mindsets
Game design 2 (2013): Lecture 11 - User Feedback in Game Design
Game Development Project Management/Concept
Game Design: The Production Plan
Ad

Similar to Game Design 2 (2013): Lecture 3 - Use of Text in design. (20)

KEY
Games Design 2 - Lecture 5 - Text
KEY
Game Design 2: Text (2011)
KEY
Game Design 2 (2010): Lecture 4 - Text
PDF
Videogame localization & technology_ how to enhance the power of translation.pdf
PPTX
Full stack accessibility
PPT
Chapter 04bnbnbbnmbnmbmbmnbmnnbnmbnnm.ppt
PPTX
PPTX
Cybersafe Guidelines for Learners (1).pptx
PPTX
Full stack accessibility
PPTX
Castro Chapter 10
PPT
Creating Fixed-Layout EPUBs
PDF
Android Talks #3 Android Design Best Practices - for Designers and Developers
PDF
How Not to Piss off Your Printing Press
PPT
Amine-AGT-Dubai
PDF
Infinum Android Talks #03 - Android Design Best Practices - for Designers and...
PDF
powerpoint guidelines that are neccesary.pdf
PDF
Test Your Fancy-Pants Website for Accessibility
PPTX
Multimedia composition
PDF
Poster session fall2013_duspviz
Games Design 2 - Lecture 5 - Text
Game Design 2: Text (2011)
Game Design 2 (2010): Lecture 4 - Text
Videogame localization & technology_ how to enhance the power of translation.pdf
Full stack accessibility
Chapter 04bnbnbbnmbnmbmbmnbmnnbnmbnnm.ppt
Cybersafe Guidelines for Learners (1).pptx
Full stack accessibility
Castro Chapter 10
Creating Fixed-Layout EPUBs
Android Talks #3 Android Design Best Practices - for Designers and Developers
How Not to Piss off Your Printing Press
Amine-AGT-Dubai
Infinum Android Talks #03 - Android Design Best Practices - for Designers and...
powerpoint guidelines that are neccesary.pdf
Test Your Fancy-Pants Website for Accessibility
Multimedia composition
Poster session fall2013_duspviz

More from David Farrell (11)

PDF
Game design 2 (2013): Lecture 13 - Colour
PDF
Game design 2 (2013): Lecture 10 - Expert Evaluation Methods for Game UI
PDF
Game Design 2 (2013): Lecture 9 - Micro and Macro Design for Game Communication
KEY
Game Design 2: Micro and Macro Data Visualisation
KEY
Game Design 2: Lecture 13 - Layering and Separation of Data Visualisation
KEY
Game Design 2: Lecture 12 - Platform Specific Design
KEY
Game Design 2: Lecture 11 - Colour
PPT
Game Design 2: Lecture 8 - Semiotics and Icon Design
KEY
Mindset talk
KEY
The impact of affect in serious games
PPT
Comu346 lecture 6 - evaluation
Game design 2 (2013): Lecture 13 - Colour
Game design 2 (2013): Lecture 10 - Expert Evaluation Methods for Game UI
Game Design 2 (2013): Lecture 9 - Micro and Macro Design for Game Communication
Game Design 2: Micro and Macro Data Visualisation
Game Design 2: Lecture 13 - Layering and Separation of Data Visualisation
Game Design 2: Lecture 12 - Platform Specific Design
Game Design 2: Lecture 11 - Colour
Game Design 2: Lecture 8 - Semiotics and Icon Design
Mindset talk
The impact of affect in serious games
Comu346 lecture 6 - evaluation

Recently uploaded (20)

PPTX
Institutional Correction lecture only . . .
PPTX
Lesson notes of climatology university.
PDF
Pre independence Education in Inndia.pdf
PPTX
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
PDF
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
PPTX
Final Presentation General Medicine 03-08-2024.pptx
PPTX
GDM (1) (1).pptx small presentation for students
PPTX
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
PPTX
Microbial diseases, their pathogenesis and prophylaxis
PPTX
Cell Types and Its function , kingdom of life
PDF
01-Introduction-to-Information-Management.pdf
PDF
Module 4: Burden of Disease Tutorial Slides S2 2025
PDF
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
PPTX
Introduction_to_Human_Anatomy_and_Physiology_for_B.Pharm.pptx
PDF
Sports Quiz easy sports quiz sports quiz
PDF
Microbial disease of the cardiovascular and lymphatic systems
PDF
Basic Mud Logging Guide for educational purpose
PDF
Insiders guide to clinical Medicine.pdf
PPTX
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
PDF
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
Institutional Correction lecture only . . .
Lesson notes of climatology university.
Pre independence Education in Inndia.pdf
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
Final Presentation General Medicine 03-08-2024.pptx
GDM (1) (1).pptx small presentation for students
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
Microbial diseases, their pathogenesis and prophylaxis
Cell Types and Its function , kingdom of life
01-Introduction-to-Information-Management.pdf
Module 4: Burden of Disease Tutorial Slides S2 2025
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
Introduction_to_Human_Anatomy_and_Physiology_for_B.Pharm.pptx
Sports Quiz easy sports quiz sports quiz
Microbial disease of the cardiovascular and lymphatic systems
Basic Mud Logging Guide for educational purpose
Insiders guide to clinical Medicine.pdf
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student

Game Design 2 (2013): Lecture 3 - Use of Text in design.