How can I make text scale properly with different DPI settings?

Question

Ryan McCombe · Accepted Answer

Text scaling requires additional considerations beyond simply multiplying dimensions by a scale factor. Here's how to handle text scaling properly in SDL:

Using `SDL_ttf`

First, we need to use SDL's text rendering library, SDL_ttf. Here's a complete example that shows how to render scaled text:

1#include <SDL.h>
2#include <SDL_ttf.h>
3#include <iostream>
4
5float GetDPIScale(SDL_Window* Window) {
6  int w1, w2;
7  SDL_GetWindowSize(Window, &w1, nullptr);
8  SDL_GetWindowSizeInPixels(
9    Window, &w2, nullptr);
10  return float(w2) / w1;
11}
12
13int main(int argc, char* argv[]) {
14  SDL_SetHint(
15    SDL_HINT_WINDOWS_DPI_SCALING, "1");
16  SDL_Init(SDL_INIT_VIDEO);
17  TTF_Init();
18
19  SDL_Window* Window{
20    SDL_CreateWindow(
21      "Text Scaling Demo",
22      SDL_WINDOWPOS_UNDEFINED,
23      SDL_WINDOWPOS_UNDEFINED,
24      800, 200, 0)};
25
26  float Scale{GetDPIScale(Window)};
27
28  // Load font and scale the size based on DPI
29  TTF_Font* Font{
30    TTF_OpenFont(
31      "arial.ttf",
32      int(24 * Scale))}; 
33
34  SDL_Surface* Surface{
35    SDL_GetWindowSurface(Window)};
36  SDL_FillRect(
37    Surface, nullptr,
38    SDL_MapRGB(Surface->format, 255, 255, 255));
39
40  // Render text
41  SDL_Color TextColor{0, 0, 0};
42  SDL_Surface* TextSurface{
43    TTF_RenderText_Blended(
44      Font,
45      "Hello, DPI-aware world!",
46      TextColor)};
47
48  // Calculate position to center the text
49  SDL_Rect Position{
50    (Surface->w - TextSurface->w) / 2,
51    (Surface->h - TextSurface->h) / 2,
52    TextSurface->w,
53    TextSurface->h
54  };
55
56  SDL_BlitSurface(
57    TextSurface, nullptr, Surface, &Position
58  );
59  SDL_UpdateWindowSurface(Window);
60
61  SDL_Event E;
62  bool Running{true};
63  while (Running) {
64    while (SDL_PollEvent(&E)) {
65      if (E.type == SDL_QUIT) Running = false;
66    }
67  }
68
69  TTF_CloseFont(Font);
70  SDL_FreeSurface(TextSurface);
71  SDL_DestroyWindow(Window);
72  TTF_Quit();
73  SDL_Quit();
74  return 0;
75}

The key to proper text scaling is scaling the font size itself rather than trying to scale the rendered text surface. Notice how we multiply the desired font size by our DPI scale when opening the font.

You might be tempted to render the text at a base size and then scale the surface, but this leads to blurry text. By scaling the font size directly, we get crisp text at any DPI.

Additional Considerations

When working with text in a DPI-aware application, keep these points in mind:

Cache your fonts at commonly used sizes to improve performance
Consider using different font weights at different scales
Test your text rendering at various DPI scales to ensure readability

Pixel Density and High-DPI Displays

Scaling Text in SDL

Using `SDL_ttf`

Additional Considerations

Pixel Density and High-DPI Displays

Game Development with SDL2

Questions & Answers

Scaling Text in SDL

Using SDL_ttf

Additional Considerations

Pixel Density and High-DPI Displays

Questions & Answers

Using `SDL_ttf`