Type and Game Design: More Than Just Words They’Re Just Letters
Total Page:16
File Type:pdf, Size:1020Kb
Type and Game Design: More Than Just Words They’re just letters. Right? Though type is only an element in the gigantic, intricate and inspired endeavor of creating a video game, there is a surprising amount to learn and know if you want to truly take advantage of all that type selection and its components represents. In an effort to enhance the letters and words in today’s cutting edge games, and to provide players with a more enjoyable experience, please enjoy this primer on typography in games. 2 Introduction 1 2 3DESIGNING PERSONALITY LEGIBILITY FOR SCREENS page 4 page 7 page 12 4 5FINISHING 6GLOSSARY LOCALIZATION TOUCHES OF TERMS page 16 page 19 page 22 3 Table of Contents PERSONALITY 4 1 Typeface Selection Like personality itself, typeface selection is subjective. What do you want your audience to see, to feel, when they step into your game world? The way you feel Space Vision when you look at your typeface should be the way you want your players to feel when they experience your game. Wild West Good typography is subliminal. The average gamer should enjoy it without noticing it, allowing them to focus instead on the content and strategy of the game. Dance Night Housebunker of Fear914 RACE TIME 5 Level 1: Personality Style, Branding and Games In movies, video games and other entertainment media, type styles are recycled so often in specific a b c d e f g h i j k l m n genres that they have come to represent the genre itself. o p q r s t u v w x y z These stereotype styles represent a missed 1 2 3 4 5 6 7 8 9 0 opportunity. Sure, geometric sans-serifs scream “science fiction”, but what about your game Handel Gothic has been so widely used within science experience sets it apart from the sci-fi genre? fiction games that it has come to represent the genre. Those elements can, and should, be addressed typographically. Putting a twist on what’s expected can be especially powerful, and can help provide demanding gamers with the cutting edge experience they seek. From titles to franchises to studios, branding can contextualize a gamer’s user experience. A video game’s style and branding should work together with its typographic personality. Fans of a game franchise will recognize an authentic experience faster, and in crowded genres, box art can be an attention-grabbing differentiator. 6 Level 1: Personality LEGIBILITY 7 2 Typeface Selection What typeface attributes aid legibility? Legibility is not an exact science. Many competing variables must be weighed against one another, such as x-height, caption weight, screen quality, etc. The two most important variables to manage are scale and expected viewing distance. Design with these in mind to ensure your text is always legible. Expressive type styles can look incredible when set at large sizes. But they often don’t work for small text, or blocks of text. Using just two complementary type styles can work wonders – use one style for expression, and one style that’s similar but is very legible. Ample intercharacter spacing Open shapes Varying proportions Unambiguous forms 8 Level 2: Legibility Style, Size and Screen Quality Keep these basics in mind when planning for type style and font size on screens of differing quality: Lack of kerning can harm legibility. To ensure the best clarity, type set at small sizes may require different styles than larger type. Youth DEFAULT Youth OPTIMIZED TVs need larger type. Gamers sit furthest away and TVs have a low signal density. 135mph 9 Level 2: Legibility Black outlines and shadows are fine for a Heads The coarser the screen the more pixelated the text, but this Up Display, but should be avoided on anything can be corrected with hinting, auto hinting, or even individual meant to be read for longer than a glance, as character hinting. they spoil tracking and reduce legibility. UNHINTED TEXT HINTED TEXT Focus on one environment for best results. Console games should design for TVs first, PC games for monitors first, etc. 10 Level 2: Legibility Legibility vs. Personality There is a hierarchy of elements to follow when selecting or designing a typeface to fit a video game, and this hierarchy can change based on context. The emphasis is squarely on entertainment in many games, but legibility is a close second – you can’t have a superior user experience without being able to properly digest the words in your game. However, any time the reader is expected to read for longer than one full second, legibility becomes the most important typographical element. Keep in mind that more expressive fonts may require specialized hinting software to optimize legibility. A Common Mistake Nailing the typeface selection is all-important, but display it too large and it may be too big on the screen to be properly legible. 11 Level 2: Legibility DESIGNING FOR SCREENS 12 3 The Discipline of Display Screens are made of pixels, and this makes them coarse and not ideally suited to displaying the smooth lines of most letterforms. When displaying text on a screen, coarseness can be corrected with design and This is how we want fonts to appear. Font data is delivered software optimizations. as vector outlines with spacing info, and maybe some hints. Even 150 DPI is granular compared to print media. After design groundwork is complete, legibility and performance can be improved with the right rendering and optimization software. Rasterizers in the OS and/or browser convert outlines to pixels in a variety of ways. This is how the screen displays them. LCD screens allow rendering with subpixels – manipulating each color channel. 13 Level 3: Designing for Screens Rendering and Optimization The proliferation of viewing devices of ever- What attributes help type stay sharp within increasing sophistication has brought new different digital environments? challenges to designers everywhere. A consistent user experience – one that will perform and impress regardless of platform – is a bigger marketplace AvantGarde Gill Sans differentiator than ever. A larger x-height provides more room to show character details clearly. Designing type for a screen means making letterforms inherently durable, so they stay sharp in different digital environments. A larger x-height gives letters more pixels to work with, and looser spacing can Visitors correct pixel overlap. A low stroke contrast also helps Default letter spacing Spaced for the screen make sure parts of letters don’t become thinner than a single pixel, hampering visibility. Looser spacing can correct pixel overlap Slate Bodoni Thicker strokes are more easily displayed at small sizes. 14 Level 3: Designing for Screens Open Source Dangers A project may save budget by using open source fonts, but there are hidden drawbacks: — Most open source fonts contain only a partial glyph set — Missing characters mean black squares where there should be letters — Hit or miss compatibility, or faulty code, could mean development headaches — Unknown designers, uncertain IP rights — Virtually zero licensing or development support Scenario All too often, a designer will find a great typeface online. It may fit their game stylistically, but often they find out during production that they can’t bundle the free font with the game. The further development progresses, the more difficult it is to make modifications to a project, and the balance between personality and legibility in their type selection suffers. 15 Level 3: Designing for Screens LOCALIZATION 16 4 What to Know INCORRECT PAIRING Localization is the process of translating the text of a game into different languages for different markets. The right language support can ensure proper translation, and design support will help make sure a full character set is available for every language. The high-contrast style of the numbers in Palatino LT Arabic Keep style in mind when localizing content. do not match the low-contrast strokes of Frutiger LT. For example, if a game were being localized for an Arabic-speaking market, it would be considered poor form to pair a sans serif Latin font with what CORRECT PAIRING is considered the Arabic equivalent of a traditional serif font. These numbers from Frutiger LT Arabic have a weight and style that are a better match. 17 Level 4: Localization What to Watch For Ready, Set, Go! Character-based languages, like Chinese and Arabic, English demand more complex coding than Latin-based fonts like English. Some characters overlap others, and على اﻻشارة، استعد، انطلق! some characters can change retroactively based on new characters. Many open source fonts simply can’t Arabic offer the coding support to make them useable, and legibility suffers. 好,预备,开始.! When two or more fonts are displayed on screen Simplified Chinese at once, they should not overlap and be stylistically consistent. Vertical metrics must be closely monitored to ensure legibility, especially when तैयार हो जाओ , खेल शु셂! two or more languages live in the same font file. Indic Quality control can be especially difficult with open source fonts. Limited glyph sets and no coding Auf die Plätze, fertig, los! support make them particularly weak at localization. German Έτοιμοι, Φύγαμε! Greek старт, внимание, марш! Russian 18 Level 4: Localization FINISHING TOUCHES 19 5 Customization There are so many existing typefaces and fonts to choose from, many designers find something very close to what they want already exists. Customization happens when a font is almost perfect – a few changes to a glyph set or additions to a font file, to make sure a designer and their game have perfect type. Nearly any aspect of a typeface can be modified by a professional type designer.