How to Choose the Best Typographic System for Your Global Game

[Music] okay well um I'll get started then uh thank you for joining me today um my name is Terren weiner I am uh you can you can find me online at typ terance on Twitter and Instagram and stuff so uh feel free to say hi or send me a question later if it comes up um um I'm a type designer which means that I design uh type faces and build fonts um so I'm not not a game designer so that's kind of my my disclaimer is that um you know the stuff I'm going to talk about today is my opinions and and my observations about video games and uh and typography uh in them um so I work for a company called monotype um

um and uh that's uh where I work um but monotype is known for Designing user interface type faces so our our famous projects are SEO for Microsoft as seen on the Xbox and we've done a lot of stuff for Google too uh like Open Sands and uh some interface fonts for Android and stuff before they switch to robotto or Chrome OS fonts um we also recently designed find a type face for Sony called SST uh which is used on uh the PS4 and in uh the um the PlayStation Store on PS3 too um pretty cool uh my recent claim to fame actually is uh custom fonts for dominoes and uh they use uh this set of fonts on uh for uh branding and uh packaging and advertising and stuff um

um so that was fun but I actually spoke at the GDC before in 2012 I spoke about localization and um I was really surprised that they I got good grades and they put me on the deck of cards um so I hope that my my sequel today uh will be just as good um so don't forget to fill out the um evaluation things um I've done a few custom fonts for video games of course I did this one for a skateboarding game and I've done this one for a racing game um but I've been a a Casual Gamer for uh you know two-thirds of my life so uh this intersection of typography and video games Is My Jam um so I'm really excited uh to be here and I'm glad you came with me so um that's what I'm here to talk about

today how to choose the best type of graphic system for your Global game so I'll talk about a couple different things um the mood and and style of typ faces I'll talk a little bit about how to use typography in a game and then I'll talk a little bit about um anticipating or or dealing with a localization stuff and kind how that relates to fonts so I have good news and bad news there's no exact science to choosing tight faces much of it is Instinct and gut feeling and um part of it is knowing what might work with the content and context it's a skill that will improve with with experience the more you do it the better you get so ask yourself how does the type feel is it slow is it fast is it light is it heavy think about the images that will accompany the text or the objects or places time

periods or attitudes what type faces would your characters use if they had to choose in a game like uh Far Cry 3 uh the distress and static of the type describes the insanity and the instability of the antagonist and they use quotes from Allison Wonderland as a metaphor for his descent into madness so we have this a gritty broken world that you're in and if you notice there's a little uh icon in the corner there of like uh a mirror image of guns it looks like a butterfly and so that uh fits with this tropical island uh world that they're in and they use this as a design element throughout the game they have a mirror image of of the guns here or even um how they treat the type too so they have the type uh mirrored from the center and uh thought that was just a really

good um just a really good repeating design element um perhaps you have a story like Battlestar Galactica uh you have this type style that's futuristic a geometric sand serif is almost a given for the side of a spaceship but the people in the story are also greatly influenced by tradition and Antiquity or Greek mythology so here they're using the shape of a a Greek Delta for the a which is a nice twist so maybe the people in the story are so influenced by ancient Greece that they incorporate the Greek alphabet somehow and I think a detail like this can add a richness to the story and the experience of the game your your 12-year-old player will still be able to read it but your you know 30-year-old college graduate player is going to Delight in in the detail so um classifications and time

periods are origin points that help us uh describe and organize type these are uh genres of type faces uh but they're also not cut and dry so there's a lot of exceptions and overlaps uh just like music or or uh or video games knowing the main uh genres and descriptors can help you uh choose fonts by giving you a starting point and um there are a lot of uh books and resources on the topic and stuff I have um some recommended resources on my blog too if you look it up but um just like games and music there's exciting things that happen in between the genres um of course there's a rich history to type and even uh long before Gutenberg in the first uh printed books um organizing type as we know it today with uh paragraphs and punctuation you know developed over hundreds of years with calligraphy in manuscript

and those uh Traditions were you know soaked in into printing because that's what people were used to reading uh there's actually a game that will teach you about typographic history uh and while you play it it's called typewriter and it's a platformer where you're using a little bit of uh punctuation like a a car colon thing and you run and jump through puzzles and uh props in this uh type of graphic and uh pretty historically accurate World a little um European modernism here um pretty sweet I don't have enough time to go into all of the uh genres and stuff in depth today but I wanted to zoom in on a few um so back in the day uh this style was called grotesque in Europe and Gothic in the Americas and um they have like helvetica and trade Gothic for example and there are some differenti between a grotesque and a Gothic but

it's pretty um scientific they're like fraternal twins if you think about it that way it's definitely the most popular genre in the last 50 years uh but there's no such thing as a neutral type face though I wanted to emphasize that uh there's only common ones so these feel neutral because we see them so often they kind of uh disappear because they're so common not because they are inherently neutral um so every everything um no matter how plain it seems carries some connotation with it a humanist sand serif is kind of has a little bit more um handwriting influence to the shapes less mechanical and uh they're very popular with corporations and branding because they look clean and efficient and friendly something like Gill Sands or Myriad for example uh geometric Sands are um you know as as they're described geometric they can be very elegant or futuristic

and there's also a pretty a pretty wide range of geometric moods um Square Sands is a futuristic and mechanical too like you know Bank Gothic on Call of Duty and movie posters A type face like Euro style um very popular on cars as we'll see later um serif uh oops I'm sorry serup typ faces have their own um their own serus and book is look or you know when used in games historical or classical Final Fantasy for example is feels cinematic um or a newer game 1886 the order has a very bookish and uh cinematic feel too with the use of serifs and um slab serifs on the bottom there are of course popular with Cowboys and sports uh script type faces again have a bunch of their own subg genres and there's a pretty big variety of those too um um but they can look luxurious or

formal or very informal like handwriting uh most commonly in the game world is uh casual scripts and and really uh comic book lettering Styles very popular but um typ faces can help um set the mood and the tone of voice but they they can also be very flexible uh depending on the content and the context uh but it really breaks down to these formal qualities and also stereotypes and these stereotypes types are developed uh over you know a long period of time um because they get used over and over again so this looks sci-fi because we've seen those type styles used in so many sci-fi things it's okay it makes sense it's not a bad thing it's just a thing um Lord of the Rings kind of this fantasy Style with a a a calligraphy called unel um and we see these typographic stereotypes everywhere not just games

right police cars a pizza place right or whip cream so you know these stereotypes act as a visual shortcut for a memory and uh we recognize patterns so we're able to guess the content based on the typography or at least get a clue so this is essential Graphic Design This is communicating an idea visually that's what type faces are good at so see what I did there okay um Tiny Wings is a simple game um and the menu is pretty atmospheric but the type style is a perfect match uh for the character and the style of the game right round soft fluffy this along with the the color and the music choices uh gives this game a sophistication to an otherwise a simple mechanic but they're just using one type face

pretty simple uh Kingdom Rush uh as another example has a consistent uh franchise and brand typography when I flip through these you can kind of uh see the similarities it's funny it gets crazier it's the first one and then the last one is just a lot more gets crazy um but this title is actually you know lettering uh not a font of course it's you know drawn drawn by hand there but it looks like Saturday morning cartoons with this chunky bouncy sand serif style this could be a package of sugar cereal I love it uh the focus though is very much on the illustrations and uh type is just a detail in their illustrations the style the type style is integrated and harmonious and on the map we actually have multiple type faces and again the type is just a detail in their

illustrations but even in even in gameplay uh they use little animations of ananas that float off of the action it's comic book DNA um in a game like Portal 2 they use a type face called univ which is exemplary of the grotesque genre like I mentioned similar to helvetica and it looks uh medical and corporate here and it's contrasting with uh this torn up world that they're in and it's accented with airport style iconography which is in tune with the style of the type so we can actually use U these two uh design principles here to help us direct our type face choices Harmony or contrast uh in a game like device 6 we have a it's a puzzle game kind of mashed up with a book I'm kind of doing a crop here not one for one screenshot but uh

the serif type face and that cream paperlike background is very intentional to make it look like a book If This Were a white sand serif on a black background for example it it would feel very very different so typography is literally a main character in this game but even if type is uh more of a supporting role and that's kind of us the usual cases um you still want it to be the best supporting role um the det detailed audio and The Parallax scrolling in the game uh contrast nicely with the otherwise pretty flat reading experience uh in uh Splinter Cell conviction the type is uh melds with the environment here and so it's not merely a necessity that's tacked on top of the image uh but a design element that's considered and uh integrated to harmonize and um this approach has you know an augment reality feel to it and

AIDS the player so they don't have to dig through uh the menus to know what the objectives are um grid racing game a perfect example of Harmony too uh the type faces that they use are very popular with real cars uh Euro style and Futura um so the realism goal is supported by the typ face choices and uh this 3D menu mimics the modeling and the lighting of the cars so it's integrated into the world it's big and loud but it but it Blends right in uh Assassin's Creed is using uh that kind of style contrast here similar to uh Portal 2 for example and you have this uh you know another gritty textured world uh and it's contrasted with a cleancut humanist sand serif here that looks very much like a modern UI and you might expect an old world uh stereotypical type face in a menu uh in

a game like this but we're surprised by the opposite couple more there um okay so let's look at a couple of mechanics um legibility versus readability legibility is being able to differentiate one letter from the next like a like an eye exam at the optometrist right readability is more about comfort e you read best what you read most uh for example OCR is legible uh but not very comfortable to read um sand syrups are usually easy to read for short periods of time and serup type faces are easiest to read uh in long form like a book um but when we look at type faces that are designed for user interfaces or just os's we see that most of them are humanist sand serifs actually um and uh some disputed

grotesque like helvetica in there and stuff but uh striking similarities I you know I realize that you know an OS needs to be a lot more a lot more you know Bland than a game does um but it's very interesting to see uh patterns um so when we take a closer look at readability we see that type size uh the contrast and the viewing distance are really important factors and by contrast I mean the difference between the text color and the background color uh different than the sort of style contrast I was talking about a minute ago um and often a complaint with type is uh the usage it's too small it's too big it's too thin too heavy uh but just when in doubt remember that uh Comfort is King and we see a lot of discussion around um viewing distance with a responsive web design and changing typography for different screens and the reading scenarios that

that they suggest so you can ask yourself is the text comfortable to see and read at at this distance um and it can help to get fresh eyes on it too I know if you're you know working on a game for months and months uh you know it might be good to you know ask someone who hasn't seen it uh is this comfortable to read and you know part of the challenge is this device proliferation and the quality of screens on different devices and then managing the content for all those screens right this is the challenge of the 21st century uh typographer and designer uh you've seen this scenario where a a phone game is scaled up to a tablet without any design changes and it looks horsey right the buttons and the type are huge or vice versa with a tablet game uh that's been scaled down to a phone and you have tiny type and tiny buttons uh so typography is very size sensitive uh hierarchy another mechanic

um creating contrast between levels of importance and this is kind of the idea between headlines and text sizes every every um every magazine everything with type uses hierarchy um this lets you scan for the information that you want uh for example we have an exercise game EA Sports active a rounded uh humanist sand serif is friendly and serious but not harsh size color proximity to the icons is creating the hierarchy here uh pretty simple a first person shooter like Borderlands 2 usually has a complex inventory and menu system uh there's a lot going on here tabs icons maybe four or five different sizes type sizes um but they have a nice hierarchy with the brightness and the contrast and all the blues uh with the yellow highlights uh essentially a really beautiful

spreadsheet even more typographically complex something like Civilization has you know a range of problems to solve becomes a balancing act of showing enough relevant information without um you know without clouding the gam playay only one type face though not even a bold but they use a lot of color coding for the hierarchy and Clarity again another another beautiful spreadsheet uh a pitfall to look out for would be information overload like a pinball table everything is the same size the same contrast they're using every color uh maybe this helps distract you so that you you miss the ball and it uh you have to put more quarters in so um you know I guess you can use you can use confusion and panic uh to your advantage as a game designer I suppose or to get more quarters uh the most most commonly uh

overlooked typographic detail I see is kerning and it's cousin tracking also known as letter spacing in CSS uh but letter spacing is a generic term uh kerning or tracking could be described as letter spacing I see some Smiles so um that's good we're cing fans um so uh kerning is the adjustment between two letters just two and that's why they call it a kerning pair uh you can have positive or negative curring values and these values as they're added uh by a type designer like myself are stored inside the font file uh some apps like Photoshop or illustrator would allow you to manually override uh those default curring values uh tracking on the other hand is the adjustment between all of the letters positive or negative in the same way the font has a default spacing built in at zero here and the app that's using the font can adjust it like for instance

by adding 200 units between each default value so negative tracking usually does more harm than good uh as you can see on the top uh one metaphor to help with spacing is to think about the area or the volume between the letters uh filling up with water um so you want them to be as even as possible so it's not about measuring one extreme Point uh to the next but it's about balancing the negative space between the letters here's a couple of uh real world examples um I don't mean to pick on anybody uh right we're all friends so just constructive criticism but just a a little nitpick in U Plants versus Zombies it's pretty mild barely noticeable maybe I'm hyper sensitive to it um but there's just a couple uh little gaps there um and uh also uh Call of Duty um in this

word multiplayer here so what's going on is actually the lack of kerning is exaggerated by the negative tracking um so it's not it's not just Indie Games right but big big budget games too um so my point is that uh good typography is about uh the perceived quality of the game it's it's packaging in a way it's part of the packaging and uh you know the typography is part of that whole experience of the game so a little bit about um localization and how fonts relate to localization um when you see uh the phrase Latin in font packaging they're talking about uh the the official name of our alphabet not necessarily the uh the language of the Roman Empire uh but that's what it's named after um so that's why sometimes it's just called Roman that's origin uh many languages

use Latin you know English French Spanish German all of them some with accents uh accents are called diacritics sometimes so even a font with a modest range of accents can cover languages of millions of people in uh in Europe in the Americas uh Greek is a smaller part of the European market uh but it has its own alphabet as well there's a script called cilic which is used for Russian and some others around Western Europe there um and these three scripts uh Latin Greek and cilic as you can see on the left there um they're all kind of similar in size and read from left to right but of course uh that's not always the case with other languages around the world um you know Hebrew and Arabic for example read from right to left and so uh there are extra challenges or specific challenges uh for localization with any one of those different uh

writing systems especially when they don't fit with our uh Latin model uh forgive me if this says anything uh bad or dirty I just kind of popped a couple of those things in there uh so forgive me but these are also also um they're all 72 point so um when uh you're designing with another language uh uh the type size is not necessarily a one for one match with other Scripts um so my point being here is that uh if you know in advance the game is going to be translated you'll want to leave uh you know design your assets to leave a little bit of room uh above and below the letters uh to make room for these these accents okay um a little bit about character sets uh running out of time so I might have to power through um but there's usually uh packaged in different ways I wanted to show a couple acronyms um STD

is short for standard which is usually the smallest available uh retail package pro has more com has more um they're uh just different sizes and ultimately different language support uh you might have a font for instance that has uh Greek and cerlic and Latin all designed to match in the same font file it might be packaged as wgl w1g or something like paneuropean and that would cover um you know almost almost all of Europe um China is a Hot Topic so I wanted to mention these uh SC for simplified Chinese or TC for traditional Chinese um with simplified Chinese it might be packaged as PRC which stands for the People's Republic of China uh China's official name or with traditional Chinese is HK for Hong Kong uh and I I believe those are you know it's with the um Regional preferences

right um so in a way you could also have um say for example a simplified Chinese font uh that has um just standard Latin packaged with it or something like uh I'm just giving you examples of how uh kind of it's kind of a little bit modular where you can uh package different language coverage together um Ling and cost is always a big question um so it's hard to talk about it but let's just pretend fonts are coffee for a second uh free fonts can have pitfalls and um like Mis inuring or punctuation or uh they might be free for personal use but not for distribution um some free fonts are designed by professionals however you know there's a some good open- source fonts but just be aware of of who you're getting it from and you know check the

license to see what what you can and cannot do with it and um you know fonts are valuable pieces of software just like games um so you know piracy is a problem in the font world too um commercial fonts are almost always of higher quality and consistency you know like a branded cup of coffee you usually get what you pay for Uh custom fonts are actually more common than you might think um you can check out a blog like uh brand new for example and they talk a lot about um you know uh about branding and stuff and you'll you'll see just how how frequent that is um custom fonts can use can sometimes be more expensive but you get exactly what you want um so here's uh just an example of a custom font it was uh just Latin to begin with and they added Greek and cerlic uh to ship it to more markets and they also added these uh platform specific icons to it so

scalable Vector assets inside the font uh and we see this on the web frequently too with uh um icon sets and um within within a font um so almost all type foundaries will do custom fonts and there are both uh AAA and indd size uh uh type foundaries so you know contact your favorite uh type designer or or whoever and I'm sure they'd be happy to answer questions about their fonts or uh help you pick something if you're stuck or or whatever um so the recap uh we talked about mood and the style the type faces uh stereotypes um using Harmony or contrast with the rest of your game talked a little bit about readability hierarchy uh and spacing specifics and then how fonts relate to uh localization and packaging and and cost um um so that's the show for today

thank you