Det Hela Började Med Emoji: Färg Typografi på Webben

0
14

“Typografi på webben är i en enda färg: tecken är antingen svart eller rött, aldrig svart och rött …Sedan emoji hit scenen, blev en del av Unicode, och därför kan uttryckas med hjälp av tecken — eller “tecken” i font terminologi. Smiley, svävande affärsmannen och den ökända hög av bajs blev sanna syskon att bokstäver, siffror och skiljetecken.”

— Roel Nieskens

Med hjälp av emojis i-koden är lätt. Chef över till emojipedia och kopiera och klistra in en i.

I HTML HTML:

Eller i CSS:

Och JavaScript, för:

(Alternativt kan du ange emoji med en Unicode-bf.)

Men du kan stöta på problem…

Förlorade i översättning: Emoji är konsekvens problemet

Mångfalden av emoji över plattformar kanske inte låter som ett stort problem. Men dessa ibland radikala inkonsekvenser lämna utrymme för drastiska missförstånd. Infamt, “grinande ansikte med leende ögon” emoji slutar som en smärtade grimas på en äldre Apple-system.

Detta var en så stor affär som även Washington Post omfattas det.

En ofarlig och lekfull watergun emoji kan visa upp som ett dödligt vapen.

Med tillstånd av Emojipedia.

Och vem vet hur många romanser krossades av Google är helt bisarra hårig hjärtat emoji?

🤮Detta har sedan åtgärdats av Google

Unicode standardiserar vad varje emoji bör representera med en kortfattad beskrivning, men den visuella designen är ned till olika plattformar.

Färg typsnitt till undsättning!

Lösningen? Använd en emoji-tecken. Adobe har släppt en font som heter EmojiOne och öppen källkod-Twemoji. Mer sannolikt kommer att följa.

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

Om en användare skriver i en HTML-ingång eller textarea, de kommer att se din fantasi anpassade uttryckssymboler. ❤️

En ingång i Firefox.

Emoji-teckensnitt har också fördelen av att undvika den pixelering sett i skalas upp raster emoji. Om du råkar vill ha riktigt stora emoji, en SVG-i-Opentype-teckensnitt är klart bättre val.

På vänster sida, en standard Apple dogface emoji letar pixlad ut. På höger, smidig SVG-i-Opentype-emoji-tecken från Emojione och Twemoji, respektive. Unicode (till höger) som tydligt anger inte en ras!

Webbläsare-stöd

Förvirrande, teckensnitt inte är en standard, utan snarare fyra 🙄. OpenType är det font-format som används på webben. När emoji har lagts till i unicode, de stora spelarna insåg att multi-färg stöd som behövs för att läggas till OpenType på något sätt. Olika företag kom upp med en mångfald av lösningar. De teckensnitt som finns fortfarande .ttf .woff eller .woff2 — men internt att de är lite olika. Jag pusslat ihop detta stöd bord med hjälp av ett verktyg som kallas Chromacheck:

Chrome
Safari
Kant
Firefox

SVG-i-Opentype

COLR/CPAL

SBIX

CBDT/CBLC

Vi har lärt oss varför teckensnitt uppfanns. Men det är inte allt om emoji…

Färgglada alfabet

Gilbert teckensnitt

Färg typsnitt är en ny teknik, så att du inte kommer att hitta många typsnitt att välja på i nuläget. Om du vill försöka med ett som är gratis och open source, Bungee av David Jonathan Ross är ett utmärkt val.

Medan vissa teckensnitt ge full emoji-stöd och andra erbjuder en flerfärgad alfabetet, Tio Mincho — en kommersiell teckensnitt från Adobe — tar en annan riktning. I ord och sitt marknadsföringsmaterial, teckensnitt innehar “en liten överraskning undanstoppad i glyfer.” Av 2,666 emoji i Unicode-Standarden, Tio Mincho erbjuder ett mycket begränsat utbud i en distinkt Japansk stil.

Den bedårande anpassad emoji Tio Mincho

Emoji har blivit en dominerande form av mänsklig kommunikation. Över 60 miljoner emoji används på varje dag. På Messenger, antalet är ännu mer häpnadsväckande, på fem miljarder kronor per dag. Om du håller på att bygga någon form av meddelanden app, få emoji rätt som verkligen är viktigt.