asked on

How to scale TrueType fonts properly between resolutions?

I'm using FreeType to handle TrueType fonts in my game project. Text is rendering to the screen, but am at a loss for how to properly scale the font based on resolution changes to my app. Not knowing much about DPI, point sizes, et al., I'm at a loss for how to scale the text properly. When setting FreeType to use Arial at 12 points at 72 DPI, when my game is at 800x600, it looks about how it does in Photoshop, at least height-wise. If I run the game in 1024x768, it's obviously going to use the same pixel-size, so it looks too small.

I tried scaling it by doing the following, but this doesn't feel correct, particularly at 1600x1200, the text looks too big:

float fNewDPI = viewport.height / 600; // Text looks about right in 800x600

I'd like to take the following into account:
- The window can be resized to any reasonable resolution. My GUI scales accordingly.
- The game supports wide-screen (so the scale value should probably not take into account window width?)
- The font stays proportional in size between resolutions.

Any thoughts?

~G~

guitaristx

Change the DPI:

newDPI = oldDPI * (newHeight / oldHeight);

Gonthax

ASKER

Thanks guitaristx, that would help me with resizing in-game, but I'm concerned more with getting the font size to be proper at runtime based on the starting resolution. Here's a snippet of init code. Does this look totally wrong given my parameters above?

      int iDPI = 72;
      D3DVIEWPORT9 d3dViewport;
      if ( device->GetViewport(&d3dViewport) == D3D_OK )
      {
            // Crazy assumption that font looks correct at 800x600.
            iDPI *= d3dViewport.Height / 600.0f;
      }

      FT_Set_Char_Size(m_FTface,0,size << 6,iDPI,iDPI);       // Size should be passed in 26:6 fractional points.

guitaristx

Well, first, why do you want your fonts to be the same size no matter the resolution? That's the whole point of being able to change the screen resolution.

Gonthax

ASKER

That's actually the problem I'm actually trying to avoid (that is, the fonts taking up the same amount of pixel height per resolution as opposed to relative screen size.) When I start the project up at 800x600 and use a 12pt font to print text it looks to be sized about how I see it in Photoshop or Word. If I bump the screen resolution up to 1600x1200 though, the font doesn't take up the same relative size as it did at 800x600. It basically looks half the size I'd like it to be. The code above basically accomplishes it, but it appears a little bit bigger than I expected so I thought my approach might be faulty.

The UI in the project scales with the resolution, and basically I'd like to text to do the same thing. If you've ever played World of Warcraft, if you resize the app in windowed mode, the text shrinks/grows proportionally to how much you changed the window size. I'd like to accomplish the same thing in my project.

ASKER CERTIFIED SOLUTION

guitaristx

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial