Inconsisent gap between number and text

Question

I got strange spacing issues. There is number and each text parallel. And there is different spacing between 1, 4, 7 and 'each' text. How can we fix this issue or it can't be fixed. I have not used any spacing and extra css properties.

@import url('https://fonts.googleapis.com/css?family=Spectral');
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Spectral');

.bigger {
  font-size: 40px;
}

p {
  font-family: 'Open Sans', sans-serif;
}

<p>
  <span class="bigger">81</span>
  <small>each</small>
</p> <br>
<p>
  <span class="bigger">84</span>
  <small>each</small>
</p> <br>
<p>
  <span class="bigger">87</span>
  <small>each</small>
</p> <br>

Answer 1

That is the issue of letter spacing of the font. You should use a monospace font to achieve same spacing for all characters.

Try the below snippet.

.bigger {
  font-size: 40px;
}

p {
  font-family: monospace;
}

<p>
  <span class="bigger">81</span>
  <small>each</small>
</p> <br>
<p>
  <span class="bigger">84</span>
  <small>each</small>
</p> <br>
<p>
  <span class="bigger">87</span>
  <small>each</small>
</p> <br>