Es begann alles mit Emoji: Farb-Typografie im Web

„Typografie im Web ist einfarbig: Zeichen sind entweder schwarz oder rot, niemals schwarz und rot … Dann kamen Emoji auf, wurden Teil von Unicode und konnten daher durch Zeichen – oder „Glyphen“ in der Schriftterminologie – ausgedrückt werden. Das Smiley, der schwebende Geschäftsmann und der berüchtigte Haufen Kacke wurden zu echten Geschwistern von Buchstaben, Zahlen und Satzzeichen.“

— Roel Nieskens

Emojis im Code zu verwenden ist einfach. Gehen Sie zu Emojipedia und kopieren Sie eines hinein.

In HTML

Oder in CSS

Und auch in JavaScript

(Alternativ können Sie Emoji mit einem Unicode-Codepunkt angeben.)

Allerdings können Sie auf ein Problem stoßen…

Verloren in der Übersetzung: Das Konsistenzproblem von Emoji

Die Vielfalt von Emoji auf verschiedenen Plattformen klingt vielleicht nicht wie ein großes Problem. Doch diese manchmal radikalen Inkonsistenzen lassen Raum für drastische Missverständnisse. Berüchtigterweise wird das „grinsende Gesicht mit lächelnden Augen“-Emoji auf älteren Apple-Systemen zu einer schmerzhaften Grimasse.

Ein harmloses und verspieltes Wasserpistolen-Emoji kann als tödliche Schusswaffe erscheinen.

Und wer weiß, wie viele Romanzen durch Googles völlig bizarres haariges Herz-Emoji zerstört wurden?

Unicode standardisiert mit einer knappen Beschreibung, was jedes Emoji darstellen soll, aber das visuelle Design liegt bei den verschiedenen Plattformen.

Farbige Schriftarten zur Rettung!

Die Lösung? Verwenden Sie eine Emoji-Schriftart. Adobe hat eine Schriftart namens EmojiOne veröffentlicht und Twitter hat Twemoji als Open Source freigegeben. Weitere werden wahrscheinlich folgen.

@font-face {
  font-family: 'emoji';
  src: url('emojione-svg.woff2')
  format('woff2');
}

Wenn ein Benutzer in ein HTML-input- oder textarea-Feld eingibt, sieht er Ihre schicke benutzerdefinierte Emoji. ❤️

Emoji-Schriftarten haben auch den Vorteil, dass sie die Pixelbildung vermeiden, die bei hochskalierten Raster-Emojis zu sehen ist. Wenn Sie wirklich große Emojis wünschen, ist eine SVG-in-Opentype-Schriftart eindeutig die bessere Wahl.

Browser-Unterstützung

Verwirrenderweise sind Farbfonts kein einzelner Standard, sondern eher vier 🙄. OpenType ist das Schriftformat, das im Web verwendet wird. Als Emoji zu Unicode hinzugefügt wurden, erkannten die großen Akteure, dass Unterstützung für mehrere Farben zu OpenType hinzugefügt werden musste. Verschiedene Unternehmen entwickelten eine Vielzahl von Lösungen. Die Schriftarten sind immer noch .ttf, .woff oder .woff2 – aber intern sind sie etwas anders. Ich habe diese Support-Tabelle mit einem Tool namens Chromacheck zusammengestellt

	Chrome	Safari	Edge	Firefox
SVG-in-Opentype	❌	❌	✅	✅
COLR/CPAL	✅	✅	✅	✅
SBIX	✅	✅	✅	❌
CBDT/CBLC	✅	❌	✅	❌

Wir haben gelernt, warum Farbfonts erfunden wurden. Aber es geht nicht nur um Emoji…

Mehrfarbige Alphabete

Farbige Schriftarten sind eine neue Technologie, daher gibt es noch nicht viele Schriftarten zur Auswahl. Wenn Sie eine kostenlose und Open-Source-Schriftart ausprobieren möchten, ist Bungee von David Jonathan Ross eine großartige Wahl.

Während einige Schriftarten vollständige Emoji-Unterstützung bieten und andere ein mehrfarbiges Alphabet, verfolgt Ten Mincho – eine kommerzielle Schriftart von Adobe – einen anderen Ansatz. Mit den Worten ihres Marketings hält die Schriftart „eine kleine Überraschung in den Glyphen versteckt.“ Von den 2.666 Emoji im Unicode-Standard bietet Ten Mincho eine sehr begrenzte Auswahl im unverwechselbaren japanischen Stil.

Emoji sind zu einer vorherrschenden Kommunikationsform geworden. Über 60 Millionen Emoji werden auf Facebook jeden Tag verwendet. Auf Messenger ist die Zahl noch erstaunlicher, mit fünf Milliarden pro Tag. Wenn Sie eine Messaging-App erstellen, ist es wirklich wichtig, Emoji richtig darzustellen.