Arial Font Is Doing Something Weird With The Letter Spacing In Uppercase Only

The spacing between the 'A', 'C' and 'T' is wider than the spacing between the other letters. What is causing this and how do I solve it? Here's my element inspection: JSFiddle

Solution 1:

It is just the font itself that seems to have this inconsistent letter-spacing. Check it out in a text editor, it does not even have to be bold:

On the images you see Arial (not bold), edited in Paint. The red lines both have the same thickness.

In your example its getting even worse because of the small font-size and rounding issues. I don't see a way of getting this solved, except using another font. If you are interested in this this topic, you probably have a better chance of getting deeper insights when asking some experts on graphicdesign.SE or similar pages.

Solution 2:

Try font-weight: bold instead of 700?

Solution 3:

font-kerning: normal;

There is a formal name to the process of fixing the issue mentioned by the OP, called kerning.

This information of how much space between A and V would be more pleasant to read can be embedded in the font.

For such cases CSS has the font-kerning property to make use of this information.

Those interested please read Kerning.