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). It is defined that
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
This chart (also included in the bottom of the answer) tell us
12pt in CSS is roughly equal to
16px also in CSS (As if this wasn't confusing enough, a px in CSS is the same as dp everywhere else), so let's say you'll make your fonts
16dp on LibGDX.
On your game, use the
FreeTypeFontGenerator to generate fonts dynamically, this way you can consider the screen density when creating them:
BitmapFont createFont(FreeTypeFontGenerator ftfg, float dp)
return ftfg.generateFont((int)(dp * Gdx.graphics.getDensity()));
BitmapFont buttonFont = createFont(arial, 16); //16dp == 12pt
This works because
Gdx.graphics.getDensity() is equal to
YourScreenDensity/160 thus, is a "scale factor" to bring things to the size they would be on a 160ppi screen.
About the exceptions I mentioned earlier: you'll probably want fonts re-sizing accordingly to screen size in case of logos, promos, etc. But keep in mind that you'll be better off making these on a graphics editor like Photoshop or Gimp, anyway.
The other exception is text on tiny screens. 4.5" or smaller phone screens, wearables. Usually you won't have time to make scrolling content, or you just won't be able to afford putting so much content on that screen. You may try to scale the font
1dp down, as the reader will probably have the phone very close to their face, they probably won't have a problem reading. Keep in mind you may annoy the player reading unreadable small text.
- 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
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:
Included CSS font size chart in case the link goes rot: