Of Fonts and GUI…

32px-font

Here we have a 32px character height font in a 256 x 256 texture atlas, being rendered at various point sizes (9.0 through 18.0) in a virtual display size of 1024×768, with an actual physical screen resolution of 1600×1200. Already, your eyes are glazing over… and you can see all the variables involved in trying to choose a decent ‘one-size-fits-all’ font!

There are lots of factors involved… trying to use a 10pt font on a native 8K display is going to end up with totally unreadable, minute text… and scaling that font texture up to be readable is going to blur it to high heaven and back… which means at higher native resolutions, you need a higher resolution font texture which will ‘pretend’ to be 10pt on these sized displays.

To ensure the UI layouts work across all resolutions, we have a ‘virtual display’ size… currently it’s set to 1024×768 as this is the minimum I have set for the time being. This is then scaled to suit any 4:3 display (though other aspect ratios are a problem as you’ll have seen in some of the 16:9 videos and screenshots)

So right now, all the icon sizes, font sizes, etc. are being set with this 1024×768 virual size in mind. But, what if we’re on 4096 x 3072 (not ‘4K’ but a 4:3 equivalent). In this case, we have to use a 4x higher font texture atlas to compensate for upscale blurring… at 1024×768 we have a 256×256 atlas… so at 4096×3072 we’ll need a 1024×1024 atlas, giving font characters 128px high!

64px-font

Here we can see the difference in using a 64px high character font in a 512×512 texture atlas. If you were to compare the above two pictures in an image program, you can see the 64px version is far sharper and clearer at these lower resolutions – but not always. There is a point where it matters not, and the smaller you get, the less benefit you get.

32px-upscaling

Here we are upscaling the 32px font to sizes higher than 32px, and you can clearly see blurring start to creep in the larger it gets.

64px-downscaling

Conversely, this image downscales a 64px font to do the same sizes we just saw, and you can clearly see they are much sharper than upscaling the 32px font.

And here’s a nice, short (though dull) video of me swapping through various fonts for the heck of it…

Summary

So, this experiment has proven the following;

  • Don’t bother with any font character height below 32px high
  • Don’t upscale the font, always downscale (already knew this, but here as assertion of truth)
  • We need 32px, 64px, and possibly 128px fonts for ‘future forward’ compatibility

And also, at the moment, the font of choice is the ‘Cabin’ one shown in these screenshots and the video.

But, it’s easily changed, and chances are I’ll be nice and allow the player to choose, or mod their own replacement font 😉

PS

A shout out to CoolText for hosting a shedload of really nice, professional fonts, free to download with varying licenses… it’s the source of all the one’s used in the video above, and if I ever get to commercial, I’ll be paying my dues…

Also, a HUGE shout out to AngelCode, for their awesome free BMFont tool without which all this fontastic malarky would be orders of magnitude harder!

SHARE THIS POST

  • Facebook
  • Twitter
  • Myspace
  • Google Buzz
  • Reddit
  • Stumnleupon
  • Delicious
  • Digg
  • Technorati
Author: Mak View all posts by

5 Comments on "Of Fonts and GUI…"

  1. Cornflakes_91 September 22, 2016 at 10:11 pm -

    cant you use vector text instead of pixel text?
    would scale smoothly and gives no problems on any resolution and scaling once it works.

    maybe with a single vector precursor and render that to a small texture atlas at program start/resolution change / font size change?

  2. Mak September 23, 2016 at 9:21 am -

    On Windows, yes – I have code to render TTF’s to bitmap, but it’s not cross platform. Though that’s hardly a concern at the moment 🙂

    The other issue is licensing the fonts – supplying the TTF in the game bundle is a bit different to supplying a rastered bitmap, as anyone can lift the font and use it for their own purposes, etc. It’s down to the license on the chosen TTF itself. For now, I’d rather avoid such concerns.

    As and when it ‘becomes a problem’ – i.e. I actually get to a release of Dom, then this will be on the list of things to rethink, as TTF based would be a lot nicer, allowing resolution independence.

  3. Cornflakes_91 September 23, 2016 at 9:57 pm -

    Arent there good TTF fonts out there that are free?

    Or only no fonts that you’d be fitting for the game?

    And if storing them as textures is fine cant you store them in some encrypted/whatever format?

  4. Mak September 24, 2016 at 10:19 am -

    There are loads – cooltext.com are all free, but not necessarily to distribute, and fewer still that look good, and suit Dom’s interface. Encrypting them is a workaround, but, if Dom ever became commercial and someone found them by digging into the bundle, it’s the path of darkness. I’ve already been slapped with a legal threat for calling it ‘Dominion’ so I’m less than reluctant to /deliberately/ encourage more legal issues.
    Besides which it’s also a ‘diminishing returns’ problem, there are LOADS of fonts to choose from, which take time to view, select, and then convert to in-game fonts to see how they look… that takes a lot of time (almost a day of dev to do what you see in this post). So when it becomes necessary (i.e. a commercial release) I’ll revisit, in the mean time this is good enough, and I can better spend my time on gameplay (for a change) 🙂

  5. Cornflakes_91 September 24, 2016 at 8:58 pm -

    Heh, i can understand that you dont want another legal incident.

    And back when the dominion/dominium happened i only facepalmed over it.

    I still enter dominion.maksw rather than dominium.maksw.
    The DNS always has to correct me 🙂

Subscribe to The Dominium Observer Newsletter!
Subscribe