Tutorial: Dealing with Character Spacing in Unity

Tags: , , , , ,

So if you mess about with the fonts in Unity you'll probably have the same problem I did: your character spacing goes entirely wonky.

It turns out the problem isn't with Unity, exactly, it's with the font creator not setting the “metrics” correctly. So the easiest option is to choose a more professionally made font. In the end I used Economica from Google’s free fonts, which didn't have the same problem. But I thought I might as well write the (somewhat dodgy) process I used down. I owe a lot to the people I found discussing this problem online, but noone had quite written down the whole process that I could find.

Here's what my buttons looked like the first time I tried using the font Airstrip Four:  Letters are too close together

I edited the “bearing”, or space between characters, using the free font editor Font Forge.

Now type in the letters you want to edit. I did the alphabet in two blocks, but here's just the letters "a, b, c". Note that the right bearing is around 200 but the left bearing is zero: font forge screenshot before edits

After some experimentation I decided I liked the look when I set both left and right spacing to be 200: font forge screenshot after edits

Now "File -> Save as" to make sure you can edit it again later, then "File -> Generate fonts", using a different name so you don't overwrite the original version of the font. I've always gotten errors and ignored them.

Here's what it looks like in the game: Letters have better spacing!

Still not perfect, and if I’d stuck with this font I’d have poked about some more. But definitely better.

Label text is processed differently to button text, and looked better using the original version of Airstrip Four. I'm sure there's some way to edit a single version of the font so that both labels and buttons look good, but it would require a better grasp of fonts than I have!

Also note: if you just want to change the gap between lines Unity does have the “linewidth” command in various text related objects.