Emoji presented in Chrome have different widths than other browsers

Question

I have a page with emoji followed by a space and some text. For example, "Friends" (symbol "busts in silhouette", U + 1F465). On Safari and Firefox on macOS, it displays the space between emoji and the following text as expected.

In Chrome, however, the space looks as if it is missing:

If I remove the space, Chrome will make the text overlap with emoji. It appears that the emojis width displayed in Chrome is less than the actual character width.

Is there any way to get the desired appearance (space with a normal width) of the cross browser without resorting to an image or icon? I tried working with some CSS properties like text-rendering without success.

 <style> .friends { font-family: Helvetica, Arial, sans-serif; } </style> <span class="friends">👥 Friends</span> 

Jsfiddle

Answer 1

I had the same problem, and it turned out that this only happened on screens without a retina .

To fix this, we applied margin through a media query like this:

 <span class="friends"><span class="emoji">👥</span> Friends</span> <style> @media not screen and (min-device-pixel-ratio: 2), not screen and (min-resolution: 192dpi) { span.emoji { margin-right: 5px; } } </style> 

This is a pretty minimal media query. You should probably use a more complete one, e.g. fooobar.com/questions/1263763 / ....

Answer 2

What I would do is add another range within the .friends range that .friends contains, use its right margin and not have a space after it:

 .friends { font-family: Helvetica, Arial, sans-serif; } .friends span { margin-right: 10px; } 

 <span class="friends"><span>👥</span>Friends</span> 

This way you don't have to worry about spatial rendering;)

Hope this helps! :)