Why Text With Different Size Have Different Alignment

i have this behavior: Why the text have that space? My goal is to left align the text with that one below. Here what i have done: CSS .btn-basic { font-size: 5.8em; white-spac

Solution 1:

Because character glyphs have space around them so they don't butt up against other character.

See:

span {
  font-size: 144px;
  color: white;
  background: #000;
  font-family: sans-serif;
}

<span>F</span><span>G</span><span>FG</span>

That 'space' may be different for each glyph (and font family). Combine that with the font-sizing you are using and you get the effect you are currently experiencing.

Unfortunately, there is very little you can do about it.