Quasi alle aktuellen Browser verwandelt diverse Unicode-Symbole automatisch in Emojis. Das ist manchmal ganz nützlich, manchmal aber auch unschön. Mich stört das vor allem dann, wenn es das Design einer Seite beeinflusst.

Das Problem: Unicode wird zu Emoji

Automatische Darstellung als Emoji

Darstellung als Emoji deaktiviert

Ich persönlich finde es in diesem Fall optisch besser, wenn das Herz in der Farbe der Schriftart als normales Unicode-Zeichen dargestellt wird.

Mögliche Lösung: Ein Variantenselektor

Die Lösung dafür ist einfach, funktioniert aber leider nicht in jedem Browser unter jeder OS-Version. Dennoch finde ich sie erwähnenswert.

Wir benötigen einen Unicodeblock Variantenselektor, genauer gesagt den Variantenselektor 15.

Dieser kann das Aussehen des vorangehenden Zeichens verändern. Wenn es sich beispielsweise um ein Symbol oder Emoji handelt, erzwingt U+FE0E die Darstellung als Text im Vergleich zu einem farbigen Bild.

In der Praxis platziert man das gewünschte Symbol direkt vor dem Variantenselektor. Ich suche mir solch ein Symbol meist direkt bei copychar heraus. Für das Herz schaut der Code wie folgt aus:

♥︎

Alternative: Emoji per CSS verändern

Als Alternative zu dieser Lösung könnte man auch auf reines CSS setzen, um eine gewisse Einheitlichkeit zu schaffen.

Bei mobiFlip.de habe ich zum Beispiel für das Userbadge-System gezielt Emojis genommen, maskiere diese allerdings, sodass sie eine einheitliche Optik erhalten.

Verschiedene Details innerhalb des Emojis gehen damit natürlich verloren.

userbadge CSS-Beispiel

HTML:

<span class="userbadge">🔆</span>

CSS:

.userbadge {
background: -webkit-linear-gradient(45deg,#2473b5,#00b1c9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Ergebnis Screenshot

Fazit: Weniger ist mehr

Man sieht, es gibt durchaus Lösungen, Emojis im Web zu nutzen, ohne deren Farbigkeit das eigene Design zu stark beeinflussen zu lassen. Das klappt nicht immer nahtlos, aber es ist immerhin ein Ansatz.

Für mich gilt dennoch: Weniger ist mehr. Heißt: Emojis können genutzt werden, auch mal in Überschriften, allerdings sollte man es damit nicht übertreiben. Das Ganze wirkt schnell zu verspielt, und da bringt dann auch das Anpassen der Optik nichts mehr.

Bonus: „Disable Emojis“ für WordPress

Das Plugin Disable Emojis (GDPR friendly) deaktiviert die Emoji-Funktionalität von WordPress „DSGVO-freundlich“.

Die Emojis können damit natürlich weiterhin im Blog ganz normal genutzt werden, allerdings wird der zusätzlichen Code, der angewandt wird, um Emojis in älteren Browsern zu unterstützen, nicht mehr geladen. Das ist meines Erachtens heutzutage auch nicht mehr nötig.