Upload
david-farrell
View
1.088
Download
2
Embed Size (px)
DESCRIPTION
Text isn't just about words. The fonts, colours, and places you use text have a huge influence your game's design.
Citation preview
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
Functional Fonts
•fixed width fonts { useful for programming; because characters line up;}
•Other fonts are suitable for OCR
•(0 vs O)
Font components
play
playCap Height
playCap Height
X Height
playCap Height
X Height
Baseline
playCap Height
X Height
Baseline
Ascender
playCap Height
X Height
Baseline
Ascender
Descender
playCap Height
X Height
Baseline
Ascender
Descender
Serifs
playCap Height
X Height
Baseline
Ascender
Descender
Serifs
Counter
playCap Height
X Height
Baseline
Ascender
Descender
Serifs
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
•f irefly• 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
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
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
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?