Font a colori Guida per principianti

Quindi cosa diamine è un font a colori? È un termine che continua a spuntare e sta iniziando a guadagnare terreno, anche se l'uso in grandi progetti di design è ancora agli inizi.

Fornitori come Adobe Typekit hanno iniziato a rilasciare alcune opzioni per i caratteri di colore con il supporto del browser, quindi c'è un po 'di movimento verso un uso più ampio. Alcuni hanno addirittura chiamato i caratteri a colori: la prossima grande cosa nel web design.

Qui, guarderemo la tendenza e ti lasciamo decidere quanto grande - o no - questo concetto sarà.

Cos'è un font a colori?

I caratteri a colori sono quasi esattamente come suonano. Caratteri che includono più colori, sfumature o sfumature, trame o trasparenze. Queste opzioni funky non si limitano ad aggiungere colore alle lettere, sono caratteri tipografici specifici con tutti i dettagli inclusi.

I caratteri a colori possono includere forme vettoriali, immagini bitmap o entrambi nei file di carattere, che possono rendere questi caratteri più pesanti dei pacchetti di font standard. Esempi comuni di caratteri a colori includono un carattere emoji o una lettera che contiene icone all'interno. I caratteri a un colore in questo stile sono spesso chiamati caratteri cromatici, poiché contengono solo una tonalità o un grigio.

Il più grande problema con i font a colori in questo momento è che non esiste un vero formato standard. E c'è un problema con tutti questi formati di file: le immagini vettoriali e SVG possono essere ridimensionate con facilità, ma le versioni bitmap potrebbero potenzialmente avere limitazioni di dimensione.

Ci sono in realtà cinque formati da trattare:

  • SBIX (Apple): versione bitmap con supporto nativo su sistemi Mac e iOS
  • CBDT (Google): versione bitmap con supporto nativo su sistemi Android
  • COLR (Microsoft): versione vettoriale con supporto nativo su sistemi Windows 8.1+
  • SVG (W3C): versioni vettoriali e bitmap
  • OpenType SVG (Adobe / Mozilla): versioni vettoriali e bitmap che inseriscono forme SVG nei font OpenType

D'altra parte, i principali attori stanno iniziando ad adottare linee guida per l'utilizzo. Mozilla (la spina dorsale del browser Web Firefox) e Adobe hanno convenuto che OpenType SVG è il formato preferito; altri sono ancora in divenire mentre arrivano a una decisione.

Se vuoi entrare nel nocciolo duro di come funzionano questi caratteri e tutte le specifiche del formato del file, Fontself ha un buon primer.

Come si usano i caratteri di colore?

Uno dei due pensieri si verifica quando vedi per la prima volta un font a colori:

  • Wow, è orribile!
  • Freddo! So esattamente come usarlo!

Indipendentemente dal campo in cui ti trovi, ci sono applicazioni che sono perfettamente adatte per i caratteri a colori. Ma devi usarli nella ragione. (I caratteri a colori sono per lo più parsimoniosi di usi parsimoniosi).

Prova un carattere a colori:

  • Per una tecnica che attira l'attenzione per una parola breve
  • Per un'icona o un elemento in stile logo
  • Per un capolettera per iniziare un lungo blocco di testo
  • Per un trattamento audace in un design altrimenti minimale
  • Per focalizzare l'attenzione su una parola o parole specifiche in un grande blocco di testo
  • Quando il resto del design è semplice
  • Quando la tipografia sarà il tuo elemento artistico principale
  • Quando il progetto richiede qualcosa di divertente e insolito per attirare l'attenzione dell'utente
    • Come non usare i caratteri di colore

      Ci sono molti altri modi per non usare caratteri di colore di quelli che probabilmente puoi contare. Non vuoi tornare come design del sito web ad alcune delle pazzie dei colori lampeggianti, lampeggianti e travolgenti degli anni '90.

      Non usare un carattere di colore:

      • Con le immagini o sopra le immagini
      • Con sfondi occupati
      • Per un sacco di testo
      • Con molte altre tecniche di progettazione, come animazione o movimento; il colore da solo è solitamente sufficiente per creare un impatto visivo
      • Con altre novità o caratteri tipografici speciali

      Una tendenza in evoluzione

      La tendenza dei font a colori sta iniziando a guadagnare terreno da alcuni dei principali attori della tipografia. Il formato OpenType SVG adottato da Adobe e Mozilla potrebbe essere lo strumento e il formato che aiuta questa tendenza a decollare. Adobe ha persino aggiunto font di colore a Photoshop (potresti aver notato alcuni emoji nella palette dei caratteri).

      Ecco come Adobe spiega OpenType SVG:

      ? OpenType-SVG è un formato di carattere in cui un font OpenType ha tutti o solo alcuni dei suoi glifi rappresentati come grafica SVG (grafica vettoriale scalabile). Ciò consente la visualizzazione di più colori e sfumature in un singolo glifo. A causa di queste funzionalità, facciamo riferimento anche ai font OpenType-SVG come "caratteri a colori".

      ? I font OpenType-SVG consentono di mostrare il testo con queste qualità grafiche, pur continuando a consentirne la modifica, l'indicizzazione o la ricerca. Possono anche contenere funzionalità OpenType che consentono la sostituzione di glifi o stili di glifi alternativi.

      I caratteri di colore come Trajan Color Concept e EmojiOne Color appariranno come tipici caratteri nei menu dei font dei programmi, ma potrebbero non mostrare tutto il loro potenziale, poiché molti programmi non hanno ancora il pieno supporto per i componenti dei colori. Se il tuo programma software non supporta il disegno SVG all'interno dei caratteri, i glifi torneranno a uno stile nero solido. Il colore può ancora essere applicato a questo stile di fallback, poiché funzionerà come un tipico font OpenType.

      Inoltre, The State of Web Type ha una sezione dedicata all'aggiornamento del supporto del browser per i caratteri a colori in modo da poter determinare quando è il momento giusto per fare il grande passo.

      In termini di evoluzione dei caratteri a colori e adozione dell'utilizzo, due cose giocheranno un ruolo importante:

      • Adozione e compatibilità con i browser per progetti di web design (in questo momento più font design a colori appaiono in stampa a causa di problemi di compatibilità)
      • Tecniche generali di stile e se le tecniche di progettazione più ornate e colorate sono nel complesso trend

      Prova un font a colori

      Se i caratteri a colori sono la tua passione, puoi scaricare un font a colori per iniziare o crearne uno personale, a seconda del tipo di progetto di design.

      Crea il tuo

      Il tipo di carattere di colore che crei dipende davvero dalle tue competenze software. Un font a colori può includere qualsiasi cosa, dalle immagini delle tue foto preferite a bellissime bolle e tratti in colori sfumati. Puoi farlo da solo o utilizzare uno strumento per aiutare a progettare un font personalizzato.

      • Fontself è un componente aggiuntivo di Adobe Illustrator o Photoshop che ti aiuta a creare caratteri colore personalizzati
      • Puoi disegnare e progettare tutto da zero con questo tutorial di Glifi
      • FontLab ha un'esercitazione video che descrive passo per passo il processo

      Scarica o Incorpora

      Ci sono alcuni bei font di colore là fuori che stanno urlando perché tu li usi in un progetto oggi. Ecco alcuni esempi per far ripartire il flusso creativo del font di colore (più i collegamenti agli altri caratteri di colore utilizzati in precedenza):

      • Digita con orgoglio
      • Telo mare
      • bungee
      • Carattere acquerello
      • Bixa Color
      • Giocattoli per bambini
      • OneLine Bold
      • Guru
      • Neon

      Conclusione

      Sei pronto a saltare sulla tendenza dei font a colori? E 'troppo o il supporto spot è un vero problema per i tuoi progetti?

      Personalmente, trovo che questa tendenza sia molto divertente e abbia un reale utilizzo pratico in progetti di stampa come manifesti di eventi o volantini. Non sono ancora abbastanza convinto quando si tratta di progetti di siti web. Il tempo dirà solo se questa tendenza diventerà davvero la prossima grande cosa nel web design? o un'altra moda passeggera.