Ray Larabie has given more thought than most to the question of how to make fonts and video games work together. Formerly an art director at Rockstar Toronto
The upcoming Star Wars Battlefront is a highly anticipated game. I downloaded the public beta immediately when it became available to all users. The type geek side of me just can’t wait to see the type aspect of the game (and of course the game itself. Why would you want the game after all).
So after hours of downloading, the game is finally here. This is one of the first things to see from the game—a warm welcome note. It feels extra warm because it’s in Brandon Grotesque, which is a typeface known for its warm touch.
But here comes the problem, there’s something that looks fairly awkward in this setup. The texts looks so wonky, to the extend that it’s not legible.
The Problems
First
See the constant change in letter case, it looks so obvious here because of the extreme difference between the upper and lower case letters. In a more typographic term, basically Brandon Grotesque has a low x-height and it is the major factor that has contributed to the wobbly looking text.
Second
The space between line of text is very tight. The typographic term for defining the space is called leading.
With tight leading, the group of texts will look like a block of words, which in fact is the worst thing that could happen to any paragraph texts because it became so hard to read.
Third
The designer of the welcome note has decided to use the medium weight to the whole page. There might be a reason behind, possibly to ensure the visibility on tv screen(avoid thinner text from becoming blur on ordinary tv screens).
However, just like the second problem, the texts have become so dark that it’s not legible at your first glimpse. It looks like a block of thing.
The Solutions
Let’s see the original note first.
Now let’s try to fix them one by one.
First
The first problem I’ll solve is the line spacing (or, leading) problem. I made the leading 1.4 times the font size to make it more breathable and legible.
You can almost see the improvement immediately. Texts are now more readable. It looks a lot lighter than the original.
Second
The next to solve will be the font weight problem. At first I thought the designer should just use the regular weight for all the body texts instead of using the medium weight, I was wrong.
See how thin the smaller texts were if the regular weight was used. It won’t work for TV screens. The designer has made a good decision here.
But there’s still a problem—the larger texts are looking darker than the smaller body texts. So I’ve changed the larger texts back to regular weight.
It doesn’t sound logical, but remember there are a lot of things in typography that aren’t about being logical, but how they perform optically. By turning the larger texts into regular weight, it makes the two different sized texts look more even in weight.
Third(The Ultimate Fix)
This one is the ultimate fix, and it might cost EA DICE(The developer of the game) a lot of money. It’s changing the typeface from Brandon Grotesque to Brandon Text.
Why? Because Brandon Text is Brandon Grotesque designed with small text in mind.
Brandon Text has a taller x-height than Brandon Grotesque so it’ll perform better in smaller sizes. Believe it or not, the two texts above have the same font size, the taller x-height of Brandon Text has make the text look larger.
By changing the typeface from Brandon Grotesque to Brandon Text also means that the wobbly looking paragraph won’t be that obvious anymore.
So basically that’s it. I know I didn’t cover the other type related things in this game, it’s because I forgot to take some screenshots of the other interfaces. I’ll hopefully work on it again when I got the full version of the game.
And guys, If you know someone from EA DICE or you are from EA DICE, feel free to make them aware of this post. I really want to see their side of the story since there might be some reasons behind their type decisions.
blakekathryn
kaledo-art
annaxmalina
dededos