Emoji rendered in Chrome have different widths than in other browsers

Question

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

In Chrome, however, the space appears as if it's absent:

If I remove the space, Chrome renders the text overlapping with the emoji. It seems like the width of emojis as rendered in Chrome is less than the actual character width.

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

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

JSFiddle

Setaceous

Answer 1

I had the same issue, and found out that it happened on non-retina screens only.

To fix it, we applied a 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 like https://mcmap.net/q/471777/-is-there-any-media-query-for-non-retina-display.

Bellhop

I'm having this issue on a retina screen, macbook pro 16 inch 2019 – Tamp

@Tamp what version Chrome, as this no longer seems to exist on Chrome 79 – Gallinule

Chrome 79 here too – Tamp

For me, it happens only on retina screens – Kepi

Answer 2

This is a Chrome bug (See detail here)

This is related to displaying emojis in Mac Chrome on a non-retina screen. My monitor had a non-retina screen (where the spacing / cursor position were info), but were absolutely fine on my Mac.

Laminous

That bug has been closed as a duplicate of this bug which, as of 2021-02-12, is still open. – Marilee

Answer 3

As an alternative to Julien's answer, instead of selectively specifying a margin-right to correct an imbalance, we can "force" the width of the actual emoji character(s) to be equal in a cross-browser way using letter-spacing.

In essence, our issue is that most characters with the Roman alphabet don't have a height-to-width ratio of 1:1, but most emojis (roughly) do have a height-to-width ratio of 1:1. This is one way of describing what we're seeing with the spacing between emojis and ANSI characters.

See example screenshot here

letter-spacing sets the horizontal spacing behavior between text characters. When paired with CSS em units, we can use this property to "force" each character/emoji to render in a roughly 1:1 box. This might need to be adjusted depending on the font or character set you use.

According to the sources below, a Roman character is often roughly 0.5 as wide as it is tall, so we can simply do:

span.emoji {
  letter-spacing: 0.5em;
}

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

<style>
  span.emoji {
    letter-spacing: 0.5em;
  }
</style>

This method means that in browsers that render emojis correctly, we aren't adding an extra margin-right.

• https://graphicdesign.stackexchange.com/a/114955
• https://web.archive.org/web/20210118205344/https://www.lifewire.com/aspect-ratio-table-common-fonts-3467385

Mediative

Answer 4

It's February, 2020, and this issue still very much exists (link to open Chrome bug). Chrome 88.0.4324.150 on MacOS X 10.15.7 on a 2019 16" MacBook Pro: dragging a browser window between the internal Retina monitor and an external ultrawide monitor changes the rendering of the emoji.

Marilee

Answer 5

What I would do is add another span within the .friends span that contains the emoji, have it use a 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>

That way you don't have to worry about space rendering ;)

Hope this helps! :)

Nb

Answer 6

Removing BlinkMacSystemFont from font-family fixed issue for me, you need to close and reopen tab to see effect.

Bugaboo

Answer 7

As of (at latest) Chrome 79, this issue no longer exists.

Gallinule

It still happens for me on Chrome 79 on MacOS – Tamp

See my comment of 2021-02-13: there is still an open bug on this issue. – Marilee

Answer 8

This problem still exists on Chrome 83 on MacOS 🤨

I think I found the solution

[data-emoji] {
  font-style: normal;
  font-weight: normal;
}
[data-emoji]:before {
  content: attr(data-emoji);
  margin-right: .125em;
}

Joannajoanne