Text is uncentered inside Counter component.

[coderitual]

This issue is related to font rendering on small elements and it's caused by rounding error. The bug is not strictly related to the style guide but maybe there is a generic way to alleviate the issue in generic way so it's less visible to the user.

Video description

"1" in this particular font size on chrome occupies 4.94 px in width and relies on the rendering engine. It is placed inside a circle with a radius of 8. We see some rounding error when rendering the text next to the affected element. Antialiasing alleviates this problem, but when we add up these fractional parts of the text, we can see the same elements positioned slightly differently. (Usually the element is offset by 1 pixel)

https://user-images.githubusercontent.com/8572321/178491102-13afbc7f-89b8-4ea7-9f3d-7ceda0a129f1.mp4