Guida CSS3: i font – parte prima

Bentrovato a questo nuovo appuntamento con la guida CSS3!

Quest’oggi affronteremo un tema fondamentale: l’utilizzo di font, predefiniti e personalizzati.

Nonostante sul web ci sia ormai un grand’utilizzo di materiale visivo — immagini, video, animazioni, etc. — il ruolo ricoperto dalle informazioni, quindi dal testo, è fondamentale. È produttivo, quindi, dedicare del tempo a formattare le varie parti testuali — paragrafi, titoli, etc. — in modo da catturare l’attenzione del nostro utente.

Iniziamo ad imparare come utilizzare i font predefiniti.

Usare i font

La proprietà che il CSS utilizza per attribuire uno specifico font ad un elemento è font-family. Ad esempio, se volessimo utilizzare il font Helvetica all’interno di un paragrafo, scriveremo:

p {
   font-family: Helvetica;
}

È bene però considerare che il valore specificato da font-family funziona esclusivamente se l’utente che visita il sito ha installato tra i font di sistema il font in questione, in questo caso Helvetica. Nel caso il font mancasse, infatti, il prescelto per la sostituzione sarebbe quello usato di default dal browser: generalmente il Times New Roman e le sue varianti.

Per questo motivo è bene specificare dei valori supplementari per la proprietà font-family. In questo modo, se il primo font specificato non fosse disponibile sulla macchina dell’utente, il browser passerebbe al secondo, al terzo e così via. Questa combinazione di molteplici valori è generalmente composta da: un font, da altri font e da un font generico ad interpretazione del sistema. Specificando, ad esempio:

p {
   font-family: Arial, Helvetica, sans-serif; 
}

Il browser proverà prima di tutto a mostrare il paragrafo con il font Arial, poi con quello Helvetica se sul sistema non dovesse essere Arial e, infine, con un qualsiasi font sans-serif, ovvero senza grazie.

A tale proposito, per chi fosse completamente a digiuno di termini tipografici, elenco le tre principali famiglie di font:

  1. sans-serif, ovvero senza grazie — sono generalmente i più utilizzati nel mondo del web in quanto i suoi sostenitori bocciano le grazie, inadatte ad alcune particolari risoluzioni di schermo. Alcuni esempi di font-family sans-serif sono:  

    Arial, Helvetica, sans-serif;
    Verdana, Arial, Helvetica, sans-serif;
    Tahoma, “Lucida Grande”, Arial, sans-serif;
    “Lucida Sans Unicode”, “Lucida Grande”, sans-serif;
    “Trebuchet MS”, Helvetica, sans-serif;
    Geneva, Arial, Helvetica, sans-serif;

  2. serif, ovvero con le grazie — i sostenitori di queste famiglie sono persuasi che le grazie, che ricordano i libri su carta stampata, rendano più facile e scorrevole la lettura, specialmente di lunghi testi. Alcuni esempi di font-family serif sono:  

    “Times New Roman”, Times, serif;
    “Palatino Linotype”, “Book Antiqua”, Palatino, serif;
    Baskerville, “Palatino Linotype”, Times, serif;
    Georgia, “Times New Roman”, Times, serif;

  3. monospaced — spesso utilizzati per evidenziare codici. Alcuni esempi di font-family monospaced sono:  

    “Courier New”, Courier, monospace;
    “Lucida Console”, Monaco, monospace;

N.B. come puoi notare, quando i nomi di font sono composti da più parole, è necessario racchiuderlo tra doppi apici: “ ”.

Web font

Con le font-family elencate finora, però, ci atteniamo ad utilizzare i font comunemente diffusi nei principali sistemi operativi. Se volessimo, invece, utilizzare dei font più particolari? Prima di tutto dobbiamo considerare un aspetto fondamentale: il formato.

Non tutti i browser sono in grado di leggere gli stessi formati di font. Stiliamo, quindi, una lista dei principali formati e dei relativi browser compatibili:

  • eot — ovvero Embedded Open Type. Funziona unicamente su Internet Explorer;
  • ttf o otf — ovvero True Type Font o Open Type Font. È supportato dalla maggior parte dei browser, con eccezione per le versioni di IE precedenti alla 9 e di Opera Mobile;
  • svg — ovvero Scalable Vector Graphic. Non sono propriamente, come suggerisce il nome, dei font, bensì dei vettori grafici che possono essere scalati senza perdita di qualità. Solo Safari per Mac e per iOS supportano questo formato;
  • woff — ovvero Web Open Font Format. Supportato da quasi tutti i browser ad eccezione delle versioni di IE precedenti alla 9 e di Opera Mini. Nella sua versione 2.0 (che aumenta la seppur già efficiente compressione) è supportato solo da Chrome e Firefox.

N.B. cliccando sul nome del formato puoi visionare la relativa pagina del sito caniuse.com in modo da avere una panoramica completa e facilmente comprensibile della compatibilità.

Sei confuso? Non sai come districarti in questa giungla di compatibilità sovrapposte senza lasciare pericolose zone d’ombra nel tuo codice? Tranquillo! Fortunatamente non dovrai scegliere, ma potrai utilizzare tutti i formati citati con la direttiva @font-face.

@font-face si occupa, infatti, di comunicare al browser il nome da attribuire alla nuova font-family e soprattutto le directory che contengono tutti i formati del nostro font. Il browser effettuerà da solo la scelta a seconda della propria compatibilità. Ad esempio:

@font-face {
   font-family: 'luminariregular';
   src: url('fonts/luminari-webfont.eot');
   src: url('fonts/luminari-webfont.eot?#iefix') format('embedded-opentype'),
        url(fonts/'luminari-webfont.woff2') format('woff2'),
        url('fonts/luminari-webfont.woff') format('woff'),
        url('fonts/luminari-webfont.ttf') format('truetype'),
        url('fonts/luminari-webfont.svg#luminariregular') format('svg');
}

Come puoi vedere, l’attributo src indica la directory dove si trova il file mentre la proprietà format, indica il tipo di formato. Il postfisso ?#iefix si occupa di rendere il formato eot compatibile anche con le versioni più obsolete di IE, dalla 6 alla 8. Così facendo, possiamo assegnare ad un paragrafo il font Luminari Regular:

p {
   font-family: ‘luminariregular’;
}

Ma come fare se si dispone, come comunemente accade, di un solo formato? Semplice! Font Squirrel — utilissima risorsa online — non solo dispone di un’ampia libreria di font gratuiti ma mette a disposizione anche un generatore online.

Per utilizzarlo ti basta aprire questo link, selezionare upload fonts, selezionare il tipo di configurazione tra basic, optimal (consigliata da loro e anche da me) ed expert, ed accertarti di avere la licenza. Una volta eseguiti questi semplici passaggi non ti resta che scaricare il tuo kit per disporre di una cartella con tutti i formati e con un file css e uno html che ti mostrano, rispettivamente, le regole CSS da impostare ed un esempio di utilizzo.

Font Squirrel

Continuando a parlare di strumenti online, è doveroso segnalare anche Google Fonts. Questo comodissimo portale sviluppato dall’azienda di Mountain View è in grado di farci selezionare uno o più font da una vasta libreria e di implementarlo nel nostro sito semplicemente richiamando la risorsa attraverso il tag html link, la direttiva @font-face oppure uno snippet JavaScript.

Accediamo al sito tramite questo link, selezioniamo il font che vogliamo utilizzare — in questo esempio Open Sans — e clicchiamo su quick use per ricevere le istruzioni su come utilizzarlo.

Seleziona font

Istruzioni rapide Google Fonts

È possibile anche scaricare i font selezionati per utilizzarli in forma di pacchetto, proprio come avviene per Font Squirrel.

Conclusioni

Adesso che sappiamo come inserire dei font grazie all’utilizzo di CSS, possiamo passare alla personalizzazione del nostro testo. Nella prossima lezione, infatti, studieremo come colorare il testo, come gestire le dimensioni (in px, em e percentuali), come trasformarlo e decorarlo, come gestire le spaziature (line-height, letter-spacing, word-spacing, etc.) e infine come utilizzare la proprietà text-shadow per gestire le ombre.

Sarà un articolo interessantissimo: non mancare!

Infine ti ricordo che, come sempre, puoi scaricare il codice completo di questa lezione tramite questo link.

GUIDA CSS3: INDICE LEZIONI
1) Introduzione e selettori
2) Pseudo classi e pseudo elementi
3) Ereditarietà
4) I font – parte prima

Tag:

L'autore

Da sempre appassionato di nuove tecnologie, guadagno il pane quotidiano scrivendo fiumi di funzioni, tonnellate di script, sciami di variabili: insomma un infinità di codice! Amante dei viaggi e del viaggio, scompongo le mie esperienze lontano da casa in complesse logiche procedurali e in stupendi design. Ancora in cerca del tag giusto per descrivere la mia vita.

Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

  • Guida CSS3: ereditarietà

    Bentrovato ad un nuovo appuntamento con la guida CSS3! Nel corso di questo articolo ci soffermeremo su un aspetto fondamentale che condiziona...

  • Selettore :not
    Guida CSS3: pseudo classi e pseudo elementi

    Bentrovato a questo nuovo articolo della guida CSS3! Come preannunciato nel capitolo precedente, quest’oggi ci occuperemo di pseudo classi e pseudo...

  • Guida CSS3: introduzione e selettori

    Benvenuto! Quest’oggi inauguriamo un nuovo filone di articoli che andrà, progressivamente, a formare un’esaustiva guida ai CSS3. Poiché in...

5 commenti

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo