I don't want spaces after commas to be fixed width - best practise?

Question

I'm creating a website where the main headings are displayed in a fixed width font (the designer's choice, not mine). But for headings containing a comma, this can look quite odd - there is a huge amount of space left after a comma.

So I was wondering how to reduce this space, to make things look slightly more natural.

A simple solution is for my PHP backend to replace al occurrences of a comma followed by a space with a comma followed by a thin space (this solution works). But I'm little reluctant - it seems to be fixing the problem in the wrong place. e.g. what happens if the font is later changed to something that is not fixed width, but the new developer doesn't know to hunt into the backend to remove the thin space being inserted?

So what's the 'proper' way to do this?

Answer 1

The "proper" way is to use a font where it doesn't look odd. It's entirely possible to design a font which is fixed-width except that spaces after commas are thinner. The designer didn't use (or create) one, apparently.

Other than using a font where this doesn't come up, since there's no way in CSS to say "show this space smaller than the rest of the font is X" (at least, without markup isolating that space), you're stuck with adjusting the string, and that means if you change the font you have to change something else as well. Whether that something else is PHP or JavaScript doesn't matter, the ship has sailed at that point. :-)

Note also that the designer would appear to have used a fixed-width font for a reason. If you change the space after the comma not to full the full fixed width, you're potentially interfering with whatever that reason was.

I'd leave it with a full space. It's the designer's problem, not yours.

Answer 2

If you want to deal with this in a way that mostly keeps it in the CSS, in the comments Will came up with a good idea but hasn't posted it as an answer: Use PHP or JavaScript to replace the space after the comma, but replace it with something like this:

<span class="space-after-comma"> </span>

Then the CSS can drive what to do with those spaces — leave them alone, make them narrower, whatever. That way, changing the font and the treatment of the .space-after-comma spaces are both changes in the CSS layer, not the PHP or JavaScript layer.

---

(Will: If you post your comment as an answer, please @ me so I can delete this community wiki answer.)