Unexplained spacing between chars in text when converted to image

Question

Hello All,

I've been using a system with imagettftext for a while now to add nog standard fonts to websites. I've abandoned this method for better options a few months back but I've encountered a problem on one of the websites I've created over a year ago.

The website has been moved to a new server, aside from stability issues and performance the server also has a newer php version among other improvements. The move went perfect except for a single detail. Since then all occurences of the generated image-text buttons have spacing between specific letters. Most notably W and J. The script generating the images itself is not at fault it seems, since it's been rebuilt from scratch as wel as having used several implementations used by other programmers.

Different fonts show different results and quite a few do not show the problem.

Now, the logical solution would be to switch to a system like cufon or even fontface, but both solution have two major drawbacks.

1. It's enormously timeconsuming to do this ( the inefficient way of implementing the imagettftext solution is one of the reasons I stopped using it )
2. The site also has a html newsletter system which obviously supports neither solution.

So basicly I'm stumped. I'm not really sure which direction I should be headed from here, and any help would be highly appreciated.

Answer 1

This is a Font problem. Typographers have been facing this problem and solving it for the past thousands of years, even before the invention of movable type and definitely before computers were invented. It even has a technical name: it's called kerning.

This is a well studied and well solved problem. The advent of computerized font led to the invention of many more algorithms that can apply automatic kerning. Mostly it requires the font itself to support "hints" to the renderer. Unfortunately, the advent of computers also seems to give rise to lazy font designers: those with the tools but not the training. By training I don't mean training on how to use the tools but training in the art of the font craftsman: training in typography. And with this we also see the rise of badly designed digital fonts.

So, the issue is not your library or code or programming language, the issue is that you are using badly designed fonts. I would advise to simply avoid them and use the better designed fonts for the buttons. If you really do need the font to be fancy but perfect at the same time then it may be time to invest in professionally made commercial fonts designed for the screen (fonts designed for print are not suitable and can be even more expensive).

Sorry for the long answer but sometimes you just need to know the history to know the "real" problem you're trying to solve.

---

PS: I said that the renderer is not to blame but I sort of lied, but only because the story gets much more complicated if you include the role played by the renderer.

If your previous solution works with the same fonts but you get bad kerning in a web browser then it's a font problem. The renderer you previously used most likely used its own auto-kerning algorithm that does not depend on font hinting, I know Gimp can do this.

But if it works in the web browser as-is (that is simply setting the font property to the custom font) but breaks when using your current method then it is a renderer problem. Web browsers use the system renderer provided by the operating system which respects font hints. Some renderers, Adobe PhotoShop for example, just don't understand font hints.