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 ma, this can look quite odd - there is a huge amount of space left after a ma.

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 ma followed by a space with a ma 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?

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 ma, this can look quite odd - there is a huge amount of space left after a ma.

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 ma followed by a space with a ma 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?

• javascript
• html
• css
• fixed-width
• monospace

Share Improve this question Follow asked Dec 19, 2015 at 9:29 81288128 1,00911 gold badge99 silver badges2727 bronze badges 4

• You can remove spaces by Javascript, regex. innerHTML.replace(/,\s+/, ',') – Tushar Commented Dec 19, 2015 at 9:31
• 1 Doesn't look odd to me, other than the missing ma (I'm and Oxford ma man). – T.J. Crowder Commented Dec 19, 2015 at 9:33
• 1 One solution is to do a regex replace of ma followed by space with <span class="half-space">&nbsp;</span>. This way you can controll how much space to render after the ma. – Will Commented Dec 19, 2015 at 9:42
• @Will: That's a good idea. You don't even have to use  . It still uses PHP or JavaScript to adjust the string, but what that adjustment is is offloaded to CSS. Very smart, I'd call that an answer. – T.J. Crowder Commented Dec 19, 2015 at 9:46

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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 mas are thinner. The designer didn't use (or create) one, apparently.

Other than using a font where this doesn't e 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 ma 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.

If you want to deal with this in a way that mostly keeps it in the CSS, in the ments 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 ma, but replace it with something like this:

<span class="space-after-ma"> </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-ma spaces are both changes in the CSS layer, not the PHP or JavaScript layer.

---

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

Nothing stops you from styling white spaces separately:

h1 {
  font-family: monospace;
}
.short-space {
  letter-spacing: -.33em;
}

<h1>PHILOSOPHY,<span class="short-space"> </span>POLITICS AND ECONOMICS</h1>

When you copy and paste the whole title into a different text without styling information you will still have a regular white space after the ma.