Page 1 of 1

What's the best approach for fonts?

Posted: Mon Feb 04, 2019 7:15 am
by molul
I've always created fonts for every size I've needed in my apps (in my current project I have around 16 fonts), but I wonder if it's better to create a single big font (i.e. 50) and scale all texts accordingly. Could someone please tell me which option is best?

Re: What's the best approach for fonts?

Posted: Mon Feb 04, 2019 7:26 am
by PGUp
https://love2d.org/wiki/love.graphics.newFont

Code: Select all

font = love.graphics.newFont( filename, size, hinting )
But you can always change the font size?? you only need 1 font.

Re: What's the best approach for fonts?

Posted: Mon Feb 04, 2019 8:49 am
by zorg
PGUp wrote: Mon Feb 04, 2019 7:26 am https://love2d.org/wiki/love.graphics.newFont

Code: Select all

font = love.graphics.newFont( filename, size, hinting )
But you can always change the font size?? you only need 1 font.
That still creates a different Font object, regardless whether it uses the same font file or not, and that's what OP meant.

Re: What's the best approach for fonts?

Posted: Mon Feb 04, 2019 11:01 am
by pgimeno
Bitmaps don't scale down well to under 50% of the size, and I don't know if the bitmap that LÖVE generates for the font uses mipmaps internally. You could test scaling a font to under 50%, and if it looks jagged at some points, it means it doesn't use mipmaps.

In that case, the best solution might be to have one font every half of the biggest size. For example, if you create a font with 200px, you'd create another at 100, another at 50, another at 25, another at 13, another at 7, and maybe you don't need any more sizes.

Then, when going to draw a font at a given size, e.g. 35, pick the next biggest (50 in this case) and scale it (to 35/50 = 70%).

Not sure how good the results will be with that, that's just off the top of my head, I haven't tried it. Smaller fonts are probably going to look uglier due to lack of hinting, but for bigger fonts I wouldn't expect a significant loss. You could perhaps have a threshold under which all fonts are created, e.g. all fonts under size 20 or so.

Re: What's the best approach for fonts?

Posted: Tue Feb 05, 2019 9:39 am
by molul
Thanks for the replies! I was already creating a few fonts and using the closests sizes (for instance, if I have created a font with size 25 and I'mn looking for a 23 font, I use the 25 one). I was just wondering if this approach was worse in terms of performance than just creating a big font and scaling it down in any text :)

Re: What's the best approach for fonts?

Posted: Tue Feb 05, 2019 11:38 am
by pgimeno
In terms of performance, I don't expect any difference beyond the initial font creation and the video memory that the fonts consume and that isn't available for other stuff (that's probably not an issue).

My post was about the looks. I've made a comparison program:

Code: Select all

local lg = love.graphics
local defaultfont = lg.getFont()
local fontsize = 80
local targetscale = .28
assert(targetscale >= 0.25 and targetscale < 0.5)
local font1 = lg.newFont(fontsize)
local font2 = lg.newFont(fontsize*0.5)
local font3 = lg.newFont(fontsize*targetscale)


local function testfont(font, scale, text, title, position)
  lg.origin()
  lg.setFont(defaultfont)
  lg.print(title, 0, position)
  lg.setFont(font)
  lg.scale(scale)
  lg.print(text, 0, (position + 20) / scale)
end


function love.draw()
  local text = "The quick brown fox jumps over the lazy dog"
  testfont(font1, .28, text, "Scaled to under 50%", 100)
  testfont(font2, .56, text, "Scaled to 50% or more", 200)
  testfont(font3, 1, text, "No scale", 0)
end
The "No scale" font looks perfect, because with hinting applied, every letter is normally fitted to its pixel.

The "Scaled to under 50%" font looks like it's missing lines. Look at the n, the m and the bottom of the j, g and y. The round shapes look jagged in comparison to the others.

The "Scaled to 50% or more" font, although not pixel perfect like the first, still looks decent and properly antialiased.

For small fonts, things start to become disastrous, as I imagined. If you set fontsize to 40, the "Scaled to under 50%" font looks like it's missing parts, and that starts to affect readability. The "Scaled to 50% or more" still preserves its shape, but it's blurred in comparison to the hint-assisted, pixel-perfect no-scale version.

Re: What's the best approach for fonts?

Posted: Tue Feb 05, 2019 11:55 am
by molul
I see. Thanks very much, man! I think I'll keep the current approach. Or maybe I'll mix both: create fewer fonts and scale in a few cases as long as it's not below 50%.