Apple emoji too small

[samantha-cruz]

Same initial problem as what happened with android emoji. So hard to see the emoji on my Macbook Air 13" non-retina.

Regular Apple Emoji vs. EmojiOne. Photos both taken at native resolution and no resizing happened

[thinkrick]

Yikes, that's a major difference. I did a comparison on my Mac Pro, with the following results:

I'll link the contributors of that file to this issue thread. Thanks @samantha-cruz !

[rodrigopolo]

Ok, here is some IMPORTAN thing, but before, some history that it is worth knowing.

The AppleColorEmoji.ttf is a font, and like any other font it has some rules… A long time ago Apple developed a new font technology, the TTF font, this was due to the expensive licence fees they had to pay to Adobe, but problem was they didn’t have the experience developing fonts compatible with some printers, so they talked to Microsoft which had more experience developing drivers, they made a deal to exchange the TTF license for some drivers, in the end Microsoft implemented the TTF format in Windows where it succeded and Apple didn’t beat Adobe at that time.

BUT here is the most important thing, Microsoft developed and designed new fonts thinking on OS interpolability, so if you have a Word document on a Macintosh you can open the same document on a Windows computer without problems, so they developed and designed the “Times New Roman” to replace the “Times” font and “Arial” to replace “Helvetica”, they did an excellent work not coping exactly the font but making it similar, the thing they copied exactly was the kerning, the spaces between fonts, and the dimensions, this was paramount to make the same document use the same size using replacing the fonts.

This is the problem that Emoji One, even Twitter and Google emojis are dealing with, first of, typically speaking, emojis are displayed as 20x20px images, but all Apple emoji images have a padding, 90% of the image is the emoji and 10% is a padding, that is why they don’t match, in order to make other emoji font compatible with Apple it needs this padding.

I notice this issue when making a sprite for the “Better TweetDeck” Chrome extension (under the lead developer request) using new emojis from Twitter, using ImageMagick I added a padding to all emojis before making the PNG sprite.

[thinkrick]

Hey @rodrigopolo , nice seeing u in this thread! You're always full of knowledge.

Unfortunately the padding isn't the source of the issue here. If it were, we'd have the opposite problem where Apple Emoji appeared smaller due to the padding. Side fact though, we did choose to use a 1 pixel padding around most/all of our emoji. In our first gen set, there was rarely such padding used.

If you look at the screens in the first two posts above, you'll see it's a raw size difference. What's strange is that the sizes are significantly different from my test case. Samantha has Emoji One displaying dramatically smaller. My experience was more subtle, and only really noticeable once you lineup dozens of emoji side by side to compare.

[rodrigopolo]

I'm quite sure is part of the problem, a picture is worth a thousand words, here some comparisons with and without a fix I did with the padding, it took me some time to fix the padding inside each PNG because not every file need it and some images are horizontal, others vertical in nature, so after a long process I create a sprites from Emoji One and Twitter PNG's with and without the padding fix for comparison with the Apple sprite, the process to make the sprite is exactly the same for all of them so they should look the same talking about spaces, but they don't, take a look:

Sprites

Apple original

Twitter original

Twitter fixed

Emoji One original

Emoji One fixed

Comparisons

Comparison: Apple/Twitter original

Comparison: Apple/Twitter fixed

Comparison: Apple/Emoji One original

Comparison: Apple/Emoji One fixed

You can download the PSD file here: http://adobe.ly/1PlHm0s

[rodrigopolo]

BTW to make those comparisons I create some scripts in order to rename some files, to resize the images, etc. and all the sprites have the same size in order to be compared, the smaller PNG collections was the rule for the others, 64x64 for emoji. If you want me to share those process, scripts and tips, just tell me.

[thinkrick]

Those are interesting comparisons, but what I'm addressing is the comparison of overall canvas output. Emoji are built on a square grid and (I thought) should always output as a square image. However, this isn't always happening. I did more tests, and they vary depending on the size of the emoji and the app being used. Sometimes they're nearly identical, while other times they're off by a little.

Check this screen out with Apple Emoji: 24px size font in Evernote: http://ranks.d.pr/1gazl/4GhHdYkE (same # of emoji, whales take up less horizontal space)

Same test with Emoji One Font: http://ranks.d.pr/mfFK/3urQ7zbE (notice 4 of the emoji are using up less space than the others)

When u do the same test at 36px size font, they all lineup perfectly: http://ranks.d.pr/N78d/32ewezam (emojione) http://ranks.d.pr/aPnB/191J5ICD (apple)

I'm not getting the "major" size difference that @samantha-cruz was getting. Perhaps she could do more test comparisons. I've concluded that from my Mac's the sizing is fairly even, and the quirkiness I'm experiencing isn't a result of how our font was built.

[samantha-cruz]

Here's one more comparison. Macbook Air 13in. running 10.11.2

11px

At 20px using TextEdit

I think in this case, -there seems to be a that the lack of padding is at least in part something to do with it -it's more problematic the smaller the font size is

[rodrigopolo]

In @thinkrick example there seem to be the exaclty same kerning, not the same padding but the same kerning.

But in @samantha-cruz image there is some issue with the kerning, Emoji One font seems to loss all it's kenrning, it also shows what I have talking before, the lack of padding makes the font to miss the same size as the Apple has:

Here is another comparison, both emojis share the same visual size, but I added the red line to show the PNG size of both so you can see the real image dimension, the last image is the Emoji One over the Apple Emoji using the difference filter to spot the real diference:

As far as I can tell, to make Emoji One 100% compatible with Apple Emoji Font it needs to meet the same padding and kerning, I don't know if it is worth knowing that Apple use 20x20, 21x21, 32x32, 40x40, 48x48, 64x64, 96x96 and 160x160 PNG images for their font in order to avoid bad image sampling.

That is what I have found, I'm not a font expert but I share all this hoping it could help someone somehow.

[rodrigopolo]

BTW if this wasn't a font but an HTML doc the solution I think it could fix the font is:

1. Add the padding to the images directly, so each PNG have 90% content 10% transparent padding.
2. Add a top and left margin of 1px regardless the emoji size, so the padding only effect one side.
3. Using em units.

Here is a table showing the transparent padding (in red) Apple Emoji Font uses in each file version:

And PNG images showing the padding:

Apple use to have a guide on how to do great icons and in that guide they told to NOT just scale images but to create different versions, I found this guide that says the same: http://mrgan.tumblr.com/post/708404794/ios-app-icon-sizes

Here is what happen if only is scaled:

And if the icon have different versions:

Another example from the blogger who took the advice:

And don't forget the grid/guide to standardize the padding, size and space:

Yep, it is almost like rocket science :joy:

[thinkrick]

Did a few more tests. Running 10.11.1, this time with textedit with rulers enabled.

12px font size:

24px font size:

36px font size:

[samantha-cruz]

Did the same tests and here are my results. 12px very different but 24 and 36 appear to be okay

12px:

24px:

36px:

@thinkrick but we're using the same version of the font, right? the one uploaded on github? And does the Mac pro have a retina display? That may have something to do with it.

[thinkrick]

@samantha-cruz Perfect, now we have precise comparisons. Thanks for that. Same confusion tho. lol

It appears we're on par with each other except for the smallest sizes, which likely will be displayed more often that the larger ones. :(

Same font? Yeah, I double confirmed too by downloading again just in case. Retina display? No, not on this computer.

I'm stumped!

[samantha-cruz]

@thinkrick perhaps maybe another person with a mac should test this to see how it looks like on their end so we'll see if it's font-related or computer-related

[rodrigopolo]

Ok, first, to install the font on OS X just install it as any other font, OS X know it is a duplicate and install the font only for the current user, you have to enable or disable the font, see the image below:

Second, @samantha-cruz I did install the font on OS X 10.11.2 El Capitan with the following results, I made this comparisons using a retina resolution and without it, the retina resolution didn't have any effect in the font so I only share the retina comparisons because the images show better understanding and detail:

Apple Emoji, Rich vs. Plain Text

Emoji One, Rich vs. Plain Text

Emoji One vs. Apple Emoji on rich text.

Emoji One vs. Apple Emoji on plain text.

[samantha-cruz]

@rodrigopolo Thanks for the comparisons. Looks like it's a 10.11.2 onward thing (same issue after installing the 10.11.3 beta)

[thinkrick]

@samantha-cruz , @rodrigopolo

Finally installed 10.11.2 and noticed the emoji font (Emoji One custom font) become a lot smaller. :( So there's definitely a difference in how the Mac OS handles emoji sizing from 10.11.1 to 10.11.2.

We'll keep this open until someone submits a fix. Really appreciate the reporting from your end.

[bennypowers]

Check this out. I created a file with a whole bunch of emoji in it, then open it up in atom editor with either font (using the same font book enable/disable technique as @rodrigopolo )

atom

Spot on

14pt

24pt

48pt

Chrome

Only vertical padding seems affected

100%

150%

300%

Coda

Busted like TextEdit

14pt

24pt

48pt

Maybe it's not such a shock that this only affects cocoa apps, but I thought I'd post it here in the hope that it's useful.

[noplanman]

This is still an issue, is there any viable solution yet to this?

[zachshulman]

not gonna lie as i was reading this, i was pretty impressed with the progress you guys were making and was really hoping i would get to the end and there would be a nice download link waiting for me........🌈 ☘️ 🔗 ...............🥺😢