Joen Asmussen 18f4beeb76 Make size and position of face emoji more consistent ...

This pull request starts work on #60. Should it be approved we'd want to export new PNGs and SVGs.

**Observations during work**

All twemoji are drawn on a 38x38 canvas in the .ai source files. All SVGs exported from these .ai files are scaled down to a 24x24px canvas. This explains the weirdly un-rounded size values such as 22,737px in the current SVGs.

Sizing and positioning issues are most noticeable with the "yellow faces". About half the "yellow face" emoji have a head-size of 36x36px inside the 38px canvas, and the other half had a smaller 34x34px head size.

**Specifics for the 1f60a to 1f62f range**

Some of those yellow face emoji are deliberately sized down, so as to make room for artwork. For example "Face With Stuck-Out Tongue And Winking Eye" has a 34x34px head size to allow for the tongue to stick out 2px below. Compare: https://cloudup.com/c0rSvWfAh5i. Since this is a deliberate creative choice, there's nothing to fix here, except push the emoji down 1px.

1f62c had a 34px head size. I compared the eye position with 1f62e and sized up the head of 1f62c. Compare: https://cloudup.com/cD6vRRdaJGJ

**Specifics for the 1f600 to 1f637 range**

There's a fair bit more variance in sizing and positioning of these yellow faces compared to the previous range. Head sizes range from 34px to 36px, and many are off centre. Compare: https://cloudup.com/ckZltnxmCy1

A lot of the smileys in this range almost hug the top of the canvas. I'm tempted to think this may have been in an effort to better align them with text, whose glyphs are traditionally shifted upwards. However since it's not consistent, and the base head size rule is broken often to make room for other creative choices, I think properly centering is probably the more desirable outcome here.

The devil horn smileys are shifted downwards and have 34px base heads, to make room for their horns. There's not much to fix here.

Some of the shades of yellow varied ever so slightly in these emoji. But this could be a creative choice, since some of the "lighter" yellow faces were angry. Such as 1f616 and 1f612.

**Summary and fixes applied**

As a summary, the set is in pretty good shape. Among the problematic yellow-face emoji, some of the nonstandard sizes were a creative choice (devil horns), in those cases I've done nothing.

The two most standard head sizes were 34px and 36px inside the 38px canvas. Specifically in the 1f600 to 1f637 range, it became clear that the 34px head size was both the most flexible (allowed more artwork like hearts and tears to go outside of the base shape), but also the most balanced in eye-to-forehead ratio.

For that reason, I've done the following to standardize:

- In cases where this size was off (such as 36px), I've standardized on the 34px head size
- In cases where emoji were off centre for no seemingly good reason, I've centered them.
- In a very few cases I had to move an eyebrow so as to keep the balanced with the slightly smaller head size, f.x. 1f62f

Where I've performed these fixes I've taken great care in ensuring that eyes, mouth and expressions didn't suddenly fall off the pixel grid, and made sure to compare with eye-sizes of similar emoji.

Here are some before/after's: https://cloudup.com/cCyeVpudNRd

2015-04-09 10:05:44 +02:00

96 KiB

Raw History