Non c'è modo di quantificare tutte le opzioni di carattere disponibili per i progettisti di siti web. Quasi ogni giorno un nuovo carattere compare nella mia casella di posta o nel feed di Twitter. Ma non tutti questi tipi di caratteri, per quanto belli, sono adatti alla progettazione di un sito web.
Quando si tratta di selezionare il font perfetto, si pensa a una varietà di cose tra cui compatibilità, tempo di caricamento e scopo del progetto. Oggi abbiamo sette suggerimenti per aiutarti a selezionare e utilizzare il miglior font web per il tuo progetto di design.
1. Inizia con i Fondamenti
Lavorare con i caratteri web è come qualsiasi altro progetto tipografico. Inizia con i fondamentali.
- Serif vs. sans serif: Esistono altre categorie di tipi, ma in termini di web design, quasi tutti i progetti si basano su una di queste opzioni. (E i caratteri sans serif sono la scelta dominante).
- Crenatura, tracciamento e conduzione: La quantità di spazio che circonda il testo può essere tanto importante quanto il carattere tipografico. Il crenatura è lo spazio tra le coppie di lettere; mentre il tracciamento è lo spazio tra i caratteri di gruppo. L'interlinea è la quantità di spazio tra le righe di testo (ovvero l'altezza della riga).
- leggibilità: Quando si lavora con il testo per il web, il numero di caratteri per riga può essere importante. Pensa alle dimensioni dello schermo in cui verrà visualizzato il testo e progettalo per essere facile da leggere.
- Sillabazione: Basta non farlo. I trattini fanno un pasticcio di testo sullo schermo.
- Allineamento e giustificazione La maggior parte applicabile a grandi blocchi di testo, ma pensa a come il testo si allinea sullo schermo - a sinistra, a destra o al centro - e se i blocchi di testo avranno bordi sfilacciati o saranno pienamente giustificati.
- Numero di caratteri tipografici: Come con qualsiasi progetto, non più di tre caratteri tipografici? a meno che tu non abbia una buona ragione.
- Ricorda il contrasto: Non importa quale carattere si seleziona se non c'è abbastanza contrasto tra il testo e lo sfondo affinché sia leggibile. Gli elementi che contribuiscono al contrasto includono dimensioni, peso della traccia, colore e spazio.
2. Considera la compatibilità
Una delle cose che rende difficile la tipografia web è che i browser cambiano e ricevono aggiornamenti. Ti consigliamo di selezionare un carattere tipografico compatibile con le moderne interfacce Web utilizzate su entrambi i dispositivi desktop e mobili.
Sembra facile, giusto? Potrebbe richiedere test su più dispositivi per trovare qualcosa che funzioni senza problemi.
Avrai ancora più fortuna se ti attieni a una famiglia di tipi che è design per il Web o utilizzando le opzioni di Google Fonts o la regola @ font-face. (Puoi saperne di più su quest'ultimo e su come funziona da Six Revisions.)
3. Utilizzare un servizio
Parlando di Google Fonts, molti designer scelgono di utilizzare un servizio di font web. È una buona idea e può rendere molte delle possibili questioni tecniche facili da superare.
A parte Google (probabilmente l'opzione più popolare), ci sono una varietà di altre scelte. Mentre Google Fonts è un servizio gratuito, i livelli di prezzo per gli altri variano da livelli di opzioni gratuiti a kit più costosi.
- Adobe Typekit
- Fonts.com
- Webtype
- Fontspring
Ognuno di questi servizi ha migliaia di opzioni di tipo e sono abbastanza facili da usare. La cosa bella di queste opzioni è che possono fornire una vasta libreria di tipi senza dover spendere soldi per molti singoli caratteri. Lo svantaggio è che la maggior parte dei caratteri tipografici sono disponibili solo per l'utilizzo online e non nei progetti stampati.
4. Prendi in considerazione il tono e il messaggio
Inizia con il tipo. A volte la selezione dei font arriva quasi come un ripensamento; le cose si uniranno più facilmente se si determinano prima le opzioni di tipo. Quindi pensa a come il testo verrà riprodotto con altri elementi di design come il colore e le immagini.
La scelta di un carattere tipografico può mettere il cervello in sovraccarico visivo con tutte le scelte disponibili. È più facile navigare tra tutte le confusioni di font se hai un'idea di ciò che stai cercando dall'inizio.
È fondamentale assicurarsi che il carattere tipografico selezionato corrisponda al tono e al messaggio del progetto su cui si sta lavorando. Ecco alcune domande per aiutarti a mapparlo:
- Il progetto è formale o casuale?
- Il testo dovrebbe essere in grassetto o più leggero?
- Il carattere tipografico è grande o piccolo?
- Come si abbinerà a colori o immagini?
- L'umore delle lettere corrisponde alle parole che vengono lette?
5. Va bene guardare i suggerimenti
Una delle cose che Google Fonts fa eccezionalmente bene è che permette all'utente di guardare le combinazioni di caratteri e di creare suggerimenti di combinazioni di caratteri. Non c'è vergogna nell'usare una di queste opzioni. (La libreria Adobe Typekit fa anche un ottimo lavoro per aiutare gli utenti a selezionare i caratteri tipografici in base a come verranno utilizzati. Dai un'occhiata agli strumenti sul lato destro dello schermo per avere una guida.)
L'abbinamento dei caratteri può essere difficile. Non è un vestito forte per ogni designer. Ottenere aiuto è OK. Fai attenzione alle combinazioni di font sovrautilizzate; la prima opzione che vedi potrebbe essere quella più usata.
Ricorda i tuoi principi di base per l'abbinamento dei caratteri e cerca le forme delle lettere che sono simili per umore, tratto e altezza x. Pensa alla forma e al taglio delle lettere e scegli i caratteri tipografici con contorni simili. È una buona idea mescolare e abbinare stili di tipo e selezionare una coppia serif e sans serif o un carattere tipografico sans serif e novità.
6. Pensa ai tempi di caricamento
Se un carattere non si carica velocemente, cerca un'altra opzione. Gli utenti non hanno pazienza per i siti Web lenti. Non importa quanto sia fantastico il carattere tipografico, è necessario caricarlo a una velocità prossima al lampo per essere efficace.
Quando si seleziona un carattere tipografico, testarlo per la velocità. (La maggior parte dei servizi di tipo ti aiuterà con questo, incluso Google.) Quindi pensa ad altri modi per ridurre al minimo i tempi di caricamento.
- Utilizzare un numero limitato di caratteri tipografici.
- Per ogni carattere, seleziona solo gli stili che intendi utilizzare.
- Scegli solo le lingue che userai per un font specifico.
7. Sii Choosy
Non è necessario utilizzare Helvetica, Arial o Droid Sans per creare la tipografia Web. Prenditi il tuo tempo e sii esigente quando selezioni una tavolozza di font.
Typewolf è una grande risorsa quando si tratta di evitare i caratteri popolari. Il sito si posiziona tra le prime 10 opzioni più popolari in una varietà di categorie: serif, sans serif, slap serif, monospaced e così via. Ha anche alcune liste divertenti per alternative a caratteri tipografici popolari come quelli sopra menzionati.
Bonus: 10 fantastici caratteri web
Abril Fatface
Josefin Slab
Lato
League Gothic
Apri Sans
PT Sans
Roboto Slab
Stallo
Ubuntu
Vollkorn
Conclusione
Scegliere un font web perfetto può essere uno di quei processi che si sente incredibilmente gratificante - quando trovi la combinazione perfetta - o ti viene voglia di tirarti i capelli - quando niente sembra funzionare. Ma puoi lavorare su tutte le opzioni disponibili per trovare un carattere e un sistema che funzioni per i progetti di design del tuo sito web.
Come scegli un font web? Esiste un processo diverso dai passaggi sopra descritti? Ci piacerebbe che anche tu condividessi i tuoi suggerimenti nei commenti.