How to maintain char widths of non-monospace fonts?

Question

Having a font via spritesheet (as PNG), the easiest way to render fonts from that is just showing chars as monospace, but as you can imagine, that looks not pretty with chars like l, i, : and so on..

Is there a slick way to maintain the width of every char?

• I already thought of storing it into an extra file, telling the width of each char in pixels.
  • Pro: Fast rendering.
  • Con: That's one load of work for about 100 chars.
• I gave "counting" the pixel-width of each char on rendering it a thought.
  • Pro: Once that algorithm does it's job there's no work with that afterwards.
  • Con: As there is pretty much font-rendering going on each frame, this is plain bullshit - performancewise.

I'm open to suggestions and/or known algorithms for this problem.

EDIT: TTF or some other real font is not an option, because they render wayy to pixelated on the small sizes needed.

EDIT: Thanks to lorenzo-gatti, made simple marker-pixels in the spritesheet like so:

Distance between these gets counted on startup of the game and the markers are replaced with transparent pixels. So no heavy additional logic in render which would slow down and startup-time is not really slower than before, thanks!

Answer 1

You need to input intended character widths, but not necessarily in a separate text file: the image itself can contain graphical markers at the boundaries of character sprites.

For example, you can put all characters next to each other, left to right, and add an extra row to the image that contains a colored pixel in the leftmost column of each character sprite.

You might also extend this technique, if needed, with an extra column containing colored pixels marking the baseline, x-height, ascender and descender extent and other vertical metrics of the font.