CODEWITHSUNDEEP
htmlcssfonts
Goose
Goose

Reputation: 4821

letter-spacing is different with same browser, font, size, ect in chrome

I was tasked to rewrite the html and css for a page from scratch, but reach the same visual result. I've found a very strange result while trying to match up letter-spacing on an element between the two pages. The old element is letter-spacing: 0, but to match letter-spacing, I had to set new element to letter-spacing: 0.015em.

Old

enter image description here

New

enter image description here

I don't have a proper image editing software handy to super impose them ontop of each other, but when swapping between tabs (on the same browser), it is clear that the first and last letters are in exactly the same place, with the same font, font-weight, and font-size. Both explicitly declared and computed as font-family: Arial, Helvetica, sans-serif.

Yet, the letter-spacing is different between on the on different letters. Look at the space between the e and the r at end of rubber. I've made all things equal in my inspect element, and the change persists. This is only for Chrome. Behavior is different in other browsers that are outside the scope of this question.

I don't really need to match it up, but I'm curious why this behavior exists. Quantum physics perhaps?

Upvotes: 1

Views: 1746

Answers (1)

Korgrue
Korgrue

Reputation: 3478

If you are ultimately unable to fix this bug (say it is browser related) and it is imperative that the letterspacing be spot on, you can always use a kerning library like LetteringJS to give you letter spacing control down to the individual letter. I used it on a couple projects and did not notice any significant performance hits (apply it only to elements you need finite control of the lettering on)

Upvotes: 2

Related Questions