Making the SkyScrappers Typeface

Making the SkyScrappers Typeface

Designers have a typeface curse – you can’t go anywhere without identifying the font or judging the kerning. It’s a curse because it makes you so bloody boring; especially when you find yourself in conversations about the differences between Arial and Helvetica (the difference is–nobody cares).

During the development of SkyScrappers I had the choice of either using someone else’s font, or to create my own. None of the fonts were quite right, so I made myself loads of work and created my own SkyScrappers font. This post is a run through of how I created this font:

A selection of characters from the SkyScrappers font

(You can download the font for free at the end of this post!)

As a designer you see so many trends in typefaces. There’s so many minor variations on the same sans-serif font, all beautifully hand crafted no doubt, but I wanted to create a font that would excite me – something that reflects what SkyScrappers is all about.

This font style was originally all hand drawn throughout the game for key phrases such as “character select” and “fight!”. The urgency to make it into a font was due to localisation within the game. That meant I could either redraw everything in every language, or ideally, use a font so we can simply change the text in game. Redrawing them for every language? Screw that.

Let’s make a font.

Step one: Artwork

Sketched out letters to the final letter artwork

Using the logo and hand-drawn text already created for the game as a basis, I shaped and plotted out the alphabet and numbers. The lettering was heavily inspired by 90s fighting games, with a very Street-Fighter-esq style brush-stroke shapes – it fitted well with the theme of SkyScrappers as a whole.

Examples of text showing differences between the original hand-drawn text against the final font

This is 100% a messy headline font – it’s not a finely crafted typeface for heavy duty reading, so this artwork stage was probably the quickest part to do as there was little refinement needed.

Step two: Vectorising (is that a word?)

Outlined letters, as though they were being edited in Adobe Illustrator

Throw it into Illustrator and press the “make it a vector” button – pretty much. It also gave me the chance to round shapes off, clean up some lines and make the characters more consistent with each other.

Step three: Using Glyphs

Glyphs for OSX screenshot

Glyphs is a fantastic font creation tool for OSX. I highly, highly recommend it if you want to make fonts, amateur or pro. It made the whole process unbelievably simple, especially if you’ve ever played with other font creation tools out there (*shudder*).

It’s relatively quick, pasting in your Illustrator artwork into the app, sort out spacing of each character, then rinse and repeat for every glyph.

A selection of accented characters in the SkyScrappers font

Once you’ve got the base characters in and the necessary accent marks, it’s easy to auto-generate accented variants of them. I hate to sound like an advert for Glyphs, but it’s so easy I got carried away and made a few hundred additional characters we didn’t even need for the game.

Step four: testing it in game!

Well, before it went into the game what should of been step four is hours of custom kerning. This would allow automatic fancy character pairings, such as…

Kerning example using the word 'Truffle'

  1. Allowing for characters to sit under “T” would be great;
  2. Double letters such as F and P could be adjusted to sit snug;
  3. Common endings such as “le” could be also be tighter.

…But apparently our game engine of choice, Unity, couldn’t deal with that. There might be a plugin, or it may even be a feature now, but at the time I knew I’d have to deal without it. Instead I used the sloppy method of using variations on the uppercase and lowercase letters, allowing for a similar effect.

It’s not as great as it could be with custom kerning, but it helped.

French screenshot of SkyScrappers German screenshot of SkyScrappers

In game it looked great. The different languages worked perfectly (with some minor sizing adjustment to make the long words fit!) and looked just as good as my original hand-drawn text.

The final font is far from perfect, but to make a basic font turns out to be super simple! One font completed, thus making the games localisation much easier. Well worth the effort and it certainly gave me a new found respect for the truly well crafted typefaces out there.

And if you want the font, have it: (It’s free for whatever use you want!)

SkyScrappers-Regular.otfDownload 35KB font file

And if you haven’t yet, Check out SkyScrappers!

Comments?

Let me know on Twitter