StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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 <a href="http://en.wikipedia.org/wiki/Kerning" rel="nofollow noreferrer">kerning</a>.</p> <p>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.</p> <p>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).</p> <p>Sorry for the long answer but sometimes you just need to know the history to know the "real" problem you're trying to solve.</p> <hr> <p>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.</p> <p>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.</p> <p>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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload