Vad är färgfonter?

Färg typsnitt är redo att ta över den grafiska designvärlden 2018, men vad exakt är de, och hur kan du använda dem?

Här siktar vi genom tech-jargongen och tar oss till den enkla sanningen av färgfonter. Denna otroligt in-your-face-trend lovar att sätta det roliga tillbaka till typografi. En mångkännande för både webb- och grafikdesigners, den här fina nya tekniken kommer att ha en transformativ effekt på digital och utskriftstyp under de kommande åren. Så kom inte tillbaka och läs vidare! 

Vill du lära dig hur man gör en färgfont? Kolla in vår handledning om hur du skapar en färgtext med Adobe Illustrator och Fontself. 

Bild från color.typekit.com

Vad exakt är färgfonter?

Om du vill använda mycket detaljerad typ på en design måste du använda en vektor eller rasterbild av ett brev eller en grupp bokstäver. Oavsett om de skapats från början av typografiartister eller laddade ner från en lagerplats, är dessa bilder tidskrävande för att skapa och inte ha en fontfils funktionalitet eller flexibilitet. 

Det var åtminstone så länge. Färgfonter, ibland kallad kromatiska typsnitt, representerar nästa evolutionära steg för typografi, som innehåller detaljer som färg, gradienter och texturer i en typsnittfil, antingen i vektor eller bitmappsformat. Vektor detaljerna ser tydliga och skarpa, men stora de är skalade, medan bitmap färgfonter kan se pixelerade eller suddiga när skalas till en storlek större än deras avsedda maximala storlek. 

Varje färgfont består av en "fallback" -kärna, som är den vanliga OpenType-vektorns teckensnitt, plus ytterligare datataggar som visas i SVG (Scalable Vector Graphics) -format. Bland teckensnittsutvecklare kallas färgfonter som OpenType-SVG-teckensnitt

Denna typsnitt för Adobe Typekit-färg, Trajan Färgkoncept, kombinerar det vanliga Trajanfontet med gradienter, färger och skuggning för en utsmyckad metallisk effekt.

Om du tittar på teckensnittet i en webbläsare som stödjer färgfonter kan du se den färgglada versionen. Om inte, ser du fallback versionen. Det här är viktigt att göra en mental notering innan du dyker in i att konvertera alla teckensnitt på din webbplats till färgfonter. Eftersom färgfonter är relativt nya kan de flesta webbläsarversioner för närvarande inte stödja tekniken. Hoppa över till "Hur kan jag använda dem", nedan, för att få veta mer. 

Hmm, så varför skulle jag vilja använda dem?

Kom ihåg spänningen att använda WordArt för att pryda dina PowerPoint-presentationer tillbaka i skolan? Medan din lärare kanske har varit mindre beundrad, är det bara något okej roligt att lägga till en maximalistisk blomstra till text. Färg typsnitt är i princip som WordArt för internetåldern, och lägger till extra oomph till vilken design som helst. 

Det här är inte en trend som minimalistiska fans helhjärtat kommer att omfamna, men det är verkligen uppfriskande efter årtionden av ren, schweizisk skolinspirerad design. Färgfonter sitter i motsatta änden av spektret till Scandi-renlighet, istället tar de sina signaler från emojis, retro typstilar och appdesign.

Bungee färg font av David Jonathan Ross

Färgfonterna klarar en skakig linje mellan bra och dålig smak, men på något sätt känner de sig exakt ut på för just nu. De gör sitt utseende tillsammans med en väckelse för alla saker retro i design, samt en ny maximalistisk stämning över alla designfält, från mode till interiör. Färgfonter tar inte sig själva allvarligt och engagerar sig omedelbart, och det gör dem speciellt attraktiva för designers och marknadsförare som vill locka till sig den ojämna, tech-obsessade tusenåriga marknaden.

Framför allt, Färg typsnitt är roliga! Medan tidiga färgfonter har utformats med webbplatser och appar i första hand i åtanke har de också möjlighet att erbjuda något ungdomligt och friskt att skriva ut design också. Du kan inte använda en färgfont utan att spricka ett leende, vilket kanske är vad designers och konsumenter söker i dessa politiskt och socialt osäkra tider. 

OK, så var kan jag använda dem?

Eftersom färgfonter är en sådan ny teknik, kommer många webbläsare, enheter och program ännu inte att komma ikapp. Du kanske inte kan visa färgfonter på vissa webbläsare. Du kan bara visa standard OpenType-version istället.

Bild från Bixa Color

Detta kommer dock troligen att förändras mycket snart. OpenType-SVG-teckensnitt har deklarerats som en industristandard för färgfonter, vilket innebär att webbläsare och programvara troligen uppdateras snabbt för att underlätta dem. Du kan för närvarande visa färgfonter på nyare versioner av Firefox (från version 26) och Microsoft Edge (från version 38 på Windows 10).

När det gäller att använda färgfonter på designprogram är Adobe före kurvan, med konstruktörer som kan visa och använda färgfonter med de nyaste inkarnationerna av Illustratör (CC 2018), Photoshop (CC 2017) och InDesign (CC 2018).

Vissa typdesigners experimenterar också med animerade versioner av färgfonter. Gilbert, en färgfontsignal skapad av Fontself, kan användas i Adobe After Effects.

Gilbert, en färg teckensnitt finns i statiska och animerade versioner

Dessa animerade stilar representerar en spännande ny utveckling för mer tillgänglig animering - förvänta dig att se dem överallt på sociala medier, GIF och videor snart.

Var kan jag hitta färgfonter?

Färgfonter är få och långt ifrån för tillfället, men fler släpps hela tiden, eftersom trenden blir bättre. Adobe har en dedikerad färgfont Typekit, där den beskriver de senaste färgfonterna som är tillgängliga för nedladdning för webb och utskrift. En av sina mest anmärkningsvärda lanseringar är färgtypversionen av Emoji One, vilket gör att man integrerar färgstark emoji-grafik i dina mönster super lätt med Glyphs-panelen till hands. 

Glyfer från Emoji One Color-teckensnittet

Vissa fontdesigners använder en dedikerad plattform för att starta sina färgtexts skapelser. Bixa Färg är en retroinspirerad samarbetsinsats från NovoTypo och Roel Nieskens. 

Bixa Färg typsnitt av NovoType och Roel Nieskens

bungee, designad av David Jonathan Ross, finns i ett spännande utbud av färger och stilar, samt horisontella och vertikala versioner.

Bungee färg font av David Jonathan Ross

Vill du gå till att skapa din egen färgfont? Fontself är färgstämpeldesignerns go-to-verktyg. Ta en titt på den dedikerade sidan för Gilbert, som skapades med hjälp av Fontself, för att ge inspiration till möjligheterna. 

Gilbert-färgfont, skapad med hjälp av Fontself

Jag är en färgtexteromvandlare! Men hur ska jag använda dem?

Om du har blivit biten av färgfontsfelet kan det vara frestande att kasta ut alla dina gamla typsnitt och bli lite galen. Innan du skapar mönster som liknar en dålig syraresa, ta hänsyn till dessa tips och tips för att få ut det mesta av den nya typografiska trenden. 

Som med standardfonter är vissa särskilt bättre än andra. Bara för att du kan använda ett färgfont betyder inte nödvändigtvis skall. Håll ut i några månader och du får tillgång till ett mycket bredare urval av färgfonter, vilket hjälper dig att skapa mer eftertänksamt utformade mönster. 

Var uppmärksam på begränsningarna i färgfonter. Om du har ditt hjärta satt på en bitmappstyp, är det tillrådligt att inte använda det i större skala än vad som var avsedd för typsnittet. Så, till exempel, kan en bitmap-färgfont ser bra ut på en tryckt flygplansuppsättning till rätt storlek, men det kan se mycket mindre polerat ut på en lyhörd webbdesign som innebär att skalan innehåll ska storleksanpassas på skrivbord. 

Det är också värt att komma ihåg att färgfonter är tyngre än deras OpenType-släktingar, på grund av den extra mängd data de bär. De är inte alltid stora (Bixa Color-teckensnittet innehåller till exempel en extra 30kB ovanpå den vanliga fontfilstorleken), men det kan påverka laddningstiden för webbplatser och appar. Med alla hjälpmedel använder du dina färgfonter med överge, men tillåter inte liberal användning att påverka användarens erfarenhet av din design. 

Om du vill använda färgfonter för webbdesign, bör du också ta hänsyn till möjligheten att det kan ta lång tid innan de flesta besökare kommer att kunna se typsnitt som du tänkte. Det kan vara många månader eller år innan individer väljer att uppdatera eller byta webbläsare, och de flesta kommer inte att vara medvetna om det pressa behovet att göra detta i samband med färgfontsvisning. Med detta i åtanke måste du se till att din typsnitt ser lika bra ut i sitt "fallback" -format som det gör i färg. 

Eftersom färgfonter är öppet högljudda och glada, kan de trycka på en design i obehagligt område. För vissa mönster, särskilt appar som syftar till en yngre marknad, kan det här vara en bonus! Adobes typsnitt för typsnitt typekit provocerar direkt det kärlek-det-eller-hat-det-reaktionen mot överdriven webdesign. Andra designers föredrar kanske att balansera en färgstämpel med mer förbakad typ eller svartvita bilder på resten av layouten, eller använd ett färgfont som enda fokus på en annars rent och enkelt design. 

Att para färgfonter med renare element på dina mönster hjälper layouterna att känna sig mer balanserade, vilket visas i det här exemplet med hjälp av Popsky-färgfontén, designad av Igor Petrovic.

Om du fortfarande är osäker på hur du använder färgfonter i dina mönster, är det ett bra tips att påminna dig om syftet med din design. Är du ute efter att rikta in sig på en marknad som är hyper trendmedveten, som tech-savvy millennials? Då kommer färska fonter fritt att resultera i en engagerande och ungdomlig design. Vill du bara använda färgfonter för att lägga till en skillnadspunkt för din design? Att använda dem sparsamt ger dig ett mer professionellt och polerat resultat. 

Slutsats

Färg typsnitt kan vara den senaste "det" trenden i grafisk design, men det ser ut som om de är här för att stanna, åtminstone i överskådlig framtid. De representerar en paus med konventionell typsnittsteknik, gör mer detaljerad typ och till och med animerad text, mycket mer tillgänglig för designers och icke-designers.

Med färgfonter fortfarande i sin spädbarn finns det ett begränsat utbud av teckensnitt som är tillgängliga för nedladdning, vilket gör deras nuvarande användning för designers lite begränsad. Men det här är en spännande tid för spirande typsnittskonstruktioner. Om du letar efter en ny typ utmaning kan skapa ditt eget färgfontsnitt från början vara både kreativt och ekonomiskt givande. 

Vill du doppa en tå i typdesign? Dessa handledning leder dig genom grunderna att skapa egna teckensnitt från början:

  • Så här skapar du din egen typsnitt

    I den här artikeln talar vi om teckensnitt! Har du någonsin försökt att göra en? Även om du aldrig någonsin tänkt på det här kan du bli inspirerad efter ...
    Yulia Sokolova
    typsnitt
  • Så här skapar du en teckensnitt i Adobe Illustrator

    Om du är en designer eller illustratör som är bekvämare att skapa glyphs i Adobe Illustrator, är denna handledning precis uppe i din gränd! Vi planerar ut våra ...
    Mary Winkler
    Font Design
  • Så här skapar du en teckensnitt med hjälp av Fontself och FontForge

    Denna handledning är den andra delen av vår enkla typsnittskapelse i Adobe Illustrator-projektet! I denna handledning utforskar vi två fantastiska metoder för att skapa en ...
    Mary Winkler
    fontforge
  • Grunderna för ritningstyp & Skapa din egen handskriven typsnitt

    Har du någonsin velat ge dina digitala layouter och designar en personlig touch? I den här handledningen ser vi på hur du kan skapa en typsnitt från din egen ...
    Grace Fussell
    Font Design
  • Så här skapar du en färgfont med Adobe Illustrator och Fontself Maker

    Skapa teckensnitt har aldrig varit så enkelt som med Fontself-en kraftfull förlängning för Adobe Illustrator och Photoshop. Lär dig hur du gör färgfonter med Fontself!
    Yulia Sokolova
    Adobe Illustrator