How to get rid of the gaps when using text-align: center?

Issue

I noticed while using text-align: center that the text I'm trying to center isn't quiet centered.

Here's an example and screenshot of what I mean:

html,
body {
  max-width: 100%;
}

h1 {
  text-align: center;
  text-transform: uppercase;
  font-size: 60pt;
  font-family: sans-serif;
  color: white;
  font-weight: 300;
}

<h1>
  <span style="background-color: green">Digital</span> <span style="background-color: blue">World</span>
</h1>

You'll see the lines (green box and blue box) are perfectly centered. However, the text within the boxes are not, respectively the boxes are larger than the text itself. You can notice this at different points:

• "D" in "Digital" has space on the left side, while the "L" has almost nothing on the right side
• "W" in "World" has almost no spacing on the left side, while the "D" has a visible gap on the right side

While experimenting I found out that different letters lead to different results. Hence, my suspicion that it has to do with the font and the glyphs. I assume, that the "W" which is wider uses more available space for its glyph than the "D". Thus, I want to tell CSS to calculate sizes in a different way, I guess.

All of this resulted in me going down a rabbit hole of font-feature-settings and the CSS specification. As far as I understand the UA calculates the size of the text on a different basis than what I would do optically. but I'm not sure if that's correct

So, the questions are:

• Why are there gaps when centering text?
• How can I tell the UA to "not do gaps"?

Solution

Unfortunately there is no simple way to fix this. See this question for more details.

https://graphicdesign.stackexchange.com/questions/159977/leading-space-padding-in-sans-serif-fonts

Answered By - Starsky Torchia