Google stattet seine Emoji-Bibliothek Noto mit einer 3D-Fassung aus und legt offen, nach welchen Regeln das Designteam rund 4.000 Zeichen modelliert hat. Jedes Emoji erhält höchstens drei prägende Details, damit das Motiv auch bei 18 Pixeln im Chatfenster erkennbar bleibt. Die Dateien stehen quelloffen auf GitHub.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Beim Modellieren der 3D-Emojis stieß Googles Designteam auf einen alten Zeichenfehler: Der Pudel aus dem Noto-Satz hatte in der flachen Fassung nur drei Beine, das vierte verschwand hinter den Vorderläufen.[1] Ein Werkstattbericht schildert, welche Regeln den Weg zum plastischen Zeichen bestimmten.
Das Wichtigste in Kürze
- Noto 3D umfasst je Größenstufe 4.007 PNG-Dateien in 32, 72, 128 und 512 Pixeln.
- Ein KI-gestütztes Prüfwerkzeug meldet zu schwache Randkontraste im Dark Mode, Designer bessern die Stellen von Hand nach.
- Für Websites eignet sich die 72-Pixel-Stufe mit durchschnittlich 7 KB pro Datei.
Nach welchen Regeln entstanden die 3D-Emojis?
Google stellt den Ausdruck über den Fotorealismus: Anatomische Details wie Iris oder Nasenlöcher fallen weg, weil sie nach Untersuchungen des UX-Engineers Alexander Robertson das Erkennen von Gefühlen verlangsamen. Jedes Emoji erhält höchstens drei wesentliche Details.[1]
Das Team erklärt die Regel am Känguru: Anatomisch genau gestaltet, sähe das Tier aus wie ein Bodybuilder, der Streit sucht, und aus einem fröhlichen „Bin unterwegs“ samt Känguru würde eine Drohung.[1] Beim Vulkan blieben nach der Drei-Details-Regel nur Bergform und Lavastrom übrig. Auf automatische Generierung verzichteten die Designer und modellierten jedes Zeichen einzeln.
Tiere zeigt der neue Satz bevorzugt als ganze Figuren statt als schwebende Köpfe, denn mit vollständigen Silhouetten fühlen Menschen laut Robertsons Forschung stärker mit. Der Waschbär bekam deshalb Rumpf und Beine. Ähnlich viel Sorgfalt steckte das Team des Code-Editors Cursor ein Jahr lang in sein eigenes Icon-System.
Wie löst Google das Kontrastproblem im Dark Mode?
Ein KI-gestütztes Prüfwerkzeug scannt die Ränder aller 3.977 Zeichen und meldet, wo der Kontrast gegen gängige Hintergründe unter einen Schwellenwert fällt. Die Korrektur übernehmen Designer, die Lichtkanten und Konturen von Hand nachmalen.[1]
Betroffen waren vor allem Emojis mit dunklen Hauttönen, die auf schwarzen oder dunkelgrauen Sprechblasen verschwanden. Ein automatischer Filter hätte die Hauttöne aufgehellt. Google lehnte diese Abkürzung ab, damit niemand zwischen eigenem Hautton und lesbarer Nachricht wählen muss.
Für Websites gilt eine vergleichbare Kontrastschwelle: Das WCAG-Kriterium 1.4.11 der Stufe AA verlangt für Grafiken, die zum Verständnis nötig sind, ein Kontrastverhältnis von mindestens 3:1 zu angrenzenden Farben.[2] Darunter fällt etwa ein Emoji, das in einem Onlineshop den Bestellstatus anzeigt. Für Shops im Geltungsbereich des Barrierefreiheitsstärkungsgesetzes gehört das Kriterium zum Prüfmaßstab.
Durchschnittliche Dateigröße je PNG-Stufe
Noto 3D von Google
Schriftdateien unter der SIL Open Font License 1.1
Bildressourcen überwiegend unter der Apache-Lizenz 2.0
Animierte 2D-Emojis unter CC BY 4.0, auch als Lottie-Datei
Fluent Emoji von Microsoft
Gesamtes Repository unter der MIT-Lizenz
Emojis als 3D-, Farb-, Flach- und Hochkontrast-Variante
Google hätte 4.000 Emojis per Generator in 3D umrechnen lassen können und setzte stattdessen auf Handarbeit mit Messwerkzeug. Die Software findet den schwachen Kontrast, den Hautton rettet ein Designer.
Markus Seyfferth, Chefredakteur Dr. Web
Was bedeutet Noto 3D für Webdesigner und Agenturen?
Die 3D-Emojis stehen kostenlos auf GitHub. Für die meisten Bildressourcen nennt das Repository die Apache-Lizenz 2.0, für die Schriftdateien die SIL Open Font License 1.1, und beide Lizenzen erlauben den kommerziellen Einsatz.[3]
Für Websites eignen sich die PNG-Stufen besser als die Schriften. Eine 72-Pixel-Datei wiegt im Mittel 7 KB, eine 512-Pixel-Datei rund 221 KB, das Archiv mit allen 3D-Schriften etwa 821 MB.[3] Als Bild mit Alternativtext eingebunden, sieht ein Emoji überall gleich aus, die Systemschrift zeigt dagegen je nach Gerät die Zeichen von Apple, Microsoft oder Google.
Als Alternative bietet Microsoft seine Fluent Emoji samt 3D-Variante unter MIT-Lizenz an.[5] Googles animierte 2D-Emojis stehen unter CC BY 4.0 und liegen zusätzlich als Lottie-Dateien vor,[4] ein Format, das auch das kostenlose Animationsprogramm Cavalry exportiert.
Agenturen und Freelancer testen den Emoji-Satz am besten in Chat-Oberflächen und Onboarding-Strecken, jeweils mit einem Kontrastcheck gegen den eigenen Dark Mode. Weitere kostenlose Helfer sammelt unsere Übersicht mit 25 Webdesign-Tools.
Quellen
[1] Google Design: „Bringing Emoji into the Next Era of Expression“
[2] W3C: „Understanding Success Criterion 1.4.11: Non-text Contrast“
[3] GitHub, googlefonts/noto-emoji: „Noto Emoji: README und Release „Unicode 18.0““
[4] Google Fonts: „Noto Emoji: Dokumentation und FAQ“
[5] GitHub, microsoft/fluentui-emoji: „Fluent Emoji“
Mehr Newshunger?
- Stripe-Designchefin Katie Dill: Wie sich mit KI Anspruch, Qualität und Kunstfertigkeit skalieren lassen
- Woraus Ihr Smartphone besteht: Eine Datenvisualisierung zeigt die Herkunftsländer von 19 Rohstoffen
- Sidenotes mit CSS Anchor Positioning: Randnotizen ohne JavaScript
- Die Voreinstellung ist keine Designentscheidung: Warum SaaS-Oberflächen immer gleicher aussehen
- Category Colors: Ein Optimierer sucht die am wenigsten falschen Diagrammfarben
- So wählen Sie die richtige UI-Schrift: 10 Alternativen zu Inter
