Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

So I'm working on a game using LibGDX, and I have a problem.

To make my game fit most resolutions, I created a base asset for each aspect ratio, for example, a main menu background image, I made it in 800X600 for 4:3, 1280X720 for 16:9 etc.

Now I am trying to incorporate TextButtons into the game, for the options; My problem is that I can't figure out which font sizes match with which screen resolutions. Is there a way to figure this out, or do I have to go one by one through each of the resolutions I have and just manually match the text to the resolution?

share|improve this question

1 Answer 1

up vote 4 down vote accepted

It's easy: Fonts do not need to match resolution, they need to match pixel density.

Pixel density is measured as pixels per inch(PPI), or pixels per centimeter. There's also a measure unit called density independent pixels(DP). 1dp is the size one pixel has on a 160 PPI screen.

Now coming back to fonts, try to make this test: put your laptop to run on 720p. Take a look on the size of the font. Now plug it into the 1080p 42" monitor of your desktop. If your monitor outputs the right information about its size, then the font should have EXACTLY the same size it had on the 720p screen. Imagine how weird it would be if text in your laptop had a different size than the text on your desktop monitor. With that said, larger resolutions should give more detail to the font, larger screens should give more content to be shown.

The same fact can be observed on text editors. A 72pt font should look on the screen the same it would when printed on paper.

All this means you probably should want the same size across all display sizes (with some exceptions). If you want to base yourself somewhere, websites usually use 12pt fonts, MS Windows uses 11pt and 12pt fonts.

This chart tell us 12pt is roughly equal to 16px (px in CSS is the same as dp), so let's say you'll make your fonts 16dp on LibGDX.

On Game, use the FreeTypeFontGenerator to generate fonts accordingly to the screen density. It is very easy, take a look:

BitmapFont createFont(FreeTypeFontGenerator ftfg, float dp)
{
    return ftfg.generateFont((int)(dp * Gdx.graphics.getDensity()));
}
//On Init
BitmapFont buttonFont = createFont(arial, 16); //16dp == 12pt

This should work great on your game.

About the exceptions I mentioned earlier, you'll probably will want fonts re-sizing accordingly to screen size in case of logos, etc. But keep in mind that it's better to make these on a graphics editor like Photoshop or Gimp, anyway. The other exception is very very tiny screens. 4.5" or less phone screens. Usually you don't have the time to make scrolling content, or you just can't afford so much content for that screen. Try to scale the font 1dp down, as the reader is going to have the phone very close his face, probably he won't have problems reading. But be cautious to not burden the player to read unreadable small font texts.

TL;DR:

  • Physical size roughly won't change directly with screen size or resolution, but with a combination of both (screenSize/resolution the famous PPI)
  • Think of pt and dp. Forget about screen pixels until you have to draw the final result.
  • Create your font at runtime with a reasonable size.
  • Converting dp to screen pixels: pixels = dp * Gdx.graphics.getDensity();
  • If you are using a engine which does no give you converter to dp like LibGDX's Gdx.graphics.getDensity(), you can try: densityFactor = Screen.getPixelsPerInch() / 160.0f, then pixels = dp * densityFactor

EDIT:

2014, Jun 25 on Google IO, Matias announced a new style guidelines for Android, it includes a new Roboto font and typography guidelines. Take this table as a guide:

Android font size guidelines, taken fron google.com/design

share|improve this answer
1  
+1, great answer. The viewing distance is also a very important factor. You will need bigger fonts for games that run on a console/TV compared to ones for PC or even a Tablet (where the viewing distance is quite short). –  bummzack Jun 14 at 22:21
1  
@bummzack great that you pointed this out! You can achieve this by adding a scaling factor to the formula, like this: dp * Gdx.graphics.getDensity() * distanceFactor. You can make distanceFactor an constant and define it to 2 when compiling for console/TV, 1 otherwise. Of course you should find better values for this. –  Gustavo Maciel Jun 14 at 22:50

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.