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 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 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 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 size on screens of differing quality:

Lack of 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 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 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 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 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 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 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 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 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. The designer can customize the typeface if they are the intellectual property owner, or they have written permission from the font foundry to do so.

Often times, customization can be less expensive and less time consuming than commissioning a new typeface.

20 Level 5: Finishing Touches A Look at Licensing Talk to the Type Experts at Monotype Typefaces and fonts are intellectual property. The ability to include them in commercial products like Monotype, a global with deep typographical video games requires a license agreement. Monotype roots and a specialty in digital type display, works with clients licenses fonts under agreements that are designed to to provide: address specific requirements of many markets, such as inclusion in a video game. — Testing to optimize text for all screens

— Font Liaisons, who collaborate with clients

— An extensive catalogue of commercial grade fonts

— Type designers to create or, when possible, customize fonts

— Comprehensive language and localization support

Monotype has extensive experience with game studios, and has licensed fonts for video games across many different genres. We have experience with a wide variety of screens, from dashboard displays to creating a custom version of typefaces for e-readers. Talk to the experts at Monotype about your next project.

[email protected]

21 Level 5: Finishing Touches GLOSSARY OF TERMS 22 6 Glossary of Terms

Font Weight: The weight of a particular font is Resizing: Changing the size of a given segment of text. the thickness of the character outlines relative to their height. Stroke: Any singular linear element in a character.

Character: A symbol representing a letter or number. Stroke Contrast: The measure of a stroke’s weight, from thickest areas to thinnest. Typefaces with a high stroke Font: A particular size, weight and style of a typeface. contrast have both thick and thin features, while those with a low stroke contrast are either thick or thin. Geometric Sans-Serif: A specific family of typefaces based on geometric shapes. Tracking: The adjustment of space between characters, either uniformly or optically. Tracking can also refer to Glyph: (Letterform): a specific, concrete way of writing the space of the letterform. an abstract character or . Typeface: A set of one or more fonts, each composed Hint: Guides used by a computer to improve how the of , which share common design features. letters are rasterized at different sizes. Type Style: A specific style of type, such as sans serif or serif. Kerning: The process of adjusting the spacing between characters in a proportional font, usually to achieve Typography: The art or procedure of arranging type or a visually pleasing result. processing data and printing from it.

Legibility: The quality of type that affects the perceptibility X-Height: The height of a lower-case x, considered of a word, line or paragraph or printed matter. characteristic of a given typeface or script.

Localization: The process of selecting and implementing different typefaces or font styles for different languages.

23 Level 6: Glossary