For a recent project, I was given the task of completely rewriting the html and css for a page in order to achieve the same visual result as before. During this process, I encountered an interesting anomaly while trying to align letter-spacing on an element between the original and new pages. The initial element had letter-spacing: 0, but in order to match it, I had to set the new element to letter-spacing: 0.015em.
Original Design:
https://i.sstatic.net/sbxZy.png
New Design:
https://i.sstatic.net/u6ijR.png
Unfortunately, I didn't have access to image editing software to overlay them, but upon toggling between tabs (within the same browser), it became apparent that the first and last letters were perfectly aligned with matching font, font-weight, and font-size. Both styles explicitly declared and computed as
font-family: Arial, Helvetica, sans-serifHowever, there was a noticeable difference in letter-spacing between certain letters. Pay close attention to the spacing between the letter e and the following r at the end of "rubber". Even after adjusting parameters in inspect element to make everything identical, the variation persisted. This discrepancy was specifically observed in Chrome, as other browsers behaved differently.
While it's not critical for me to achieve exact alignment, I am intrigued by the underlying reasons behind this behavior. Could it be related to quantum physics?