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!
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.
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.
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…
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 😉
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…