Tipografia nel responsive web design: caratteri adatti
Se cercate un font per il vostro sito web, in rete potete trovare una vastissima offerta di font responsive (caratteri reattivi per il vostro sito Internet). Nella terza e ultima parte della nostra serie vi mostreremo come realizzare una tipografia reattiva sul vostro sito.
Font gratuiti per il responsive web design
I font sono perfetti come base per la tipografia nel responsive web design, in quanto si basano su grafici vettoriali scalabili liberamente. Richiamando un sito che utilizza font, i caratteri vengono scaricati da un server e in seguito inseriti nella pagina per la visualizzazione sul browser del visitatore. I font reattivi sono adatti alle esigenze del relativo browser e del display del dispositivo utilizzato.
Diverse piattaforme internet forniscono font responsive pronti per il download, in parte gratis, in parte a pagamento. Fornitori famosi di font a pagamento sono per esempio Typekit o Fontspring, che offrono un’ampia scelta di font famosi, tra cui molti classici. In alternativa è possibile utilizzare la vasta offerta di font gratuiti. Raccolte di font gratuiti sono disponibili per esempio su Google Fonts, Adobe Edge Web Fonts, Font Squirrel, DaFont. Non tutti i caratteri disponibili su questi siti sono adatti a qualsiasi situazione: alcuni sono troppo vivaci o insoliti e pertanto consigliabili solo in alcune occasioni; alcuni non sono dotati di lettere accentate o altri caratteri particolari (generalmente la circonferenza del carattere varia di molto). È consigliabile pertanto che per il vostro responsive web design scegliate un carattere che comprenda un numero sufficiente di caratteri. A titolo esemplare qui di seguito riportiamo alcuni Google Fonts utilizzabili in modo versatile per il vostro sito.
Esempi di tipografia web su Google Fonts
La piattaforma Google Fonts, lanciata nel 2010, viene utilizzata da molti web designer come pool di caratteri per una tipografia reattiva. Sin dall’inizio furono offerti esclusivamente font reattivi utilizzabili per scopi commerciali e non. Avete la scelta tra oltre 700 font. Tutti i font sono scaricabili e dotati di un codice da inserire nella vostra pagina.
Open Sans
“Open Sans” è un carattere senza grazie molto popolare con un aspetto classico e sobrio. Fu creato da Steve Matteson ed è stato ottimizzato per l’uso sul web, per dispositivi mobili e per la stampa.
Lato
“Lato” è un altro carattere molto popolare senza grazie. È stato sviluppato da Łukasz Dziedzic con il supporto di Google.
Roboto
“Roboto” fu utilizzato innanzitutto come carattere per il sistema operativo Android e da quel momento è stato continuamente migliorato. Questo font senza grazie consiste di lettere relativamente piccole, grazie alle quali in una riga entrano più caratteri di quanti ne entrerebbero con un altro.
Source Serif Pro
“Source Serif Pro” fu creato per l’azienda Adobe Systems. Il font con grazie serve come complemento al font senza grazie “Source Sans Pro” e al carattere Monospace “Source Code Pro”, che Adobe mette a disposizione in modo gratuito.
Playfair Display
Se volete utilizzare un font con grazie, il carattere “Playfair Display” è un’ottima scelta. Potete scegliere tra sei diversi stili.
Inserire i caratteri tramite Google Fonts
Molti font si trovano su diverse banche dati. I caratteri qui presentati si trovano sia su Google Fonts sia su Adobe Edge Web Fonts e Font Squirrel. Vi mostriamo come inserire il carattere “Open Sans” tramite Google Fonts.
- Inserite “Open Sans” nel campo di ricerca e cliccate sul bottone “Quick use” contrassegnato da una freccia.
- Inoltre vi presentiamo ancora una volta i diversi stili del carattere, tra i quali potete scegliere i vostri preferiti. Potete anche specificare se volete utilizzare altri caratteri rispetto ai classici caratteri latini.
- Inoltre viene visualizzato rispettivamente un codice per l’<head> del vostro sito e per il documento CSS.
- Per inserire “Open Sans” nell’HTML, incorporate nell’<head> il codice corrispondente (che contiene anche il link di Google Fonts). L’istruzione dovrebbe apparire in questo modo:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Come inserire un font di Google</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
</head>
<body>
</body>
</html>
- Con il secondo codice definite il carattere nel CSS:
body {
font-family: 'Open Sans', sans-serif;
font-size: 100%
}
Come potete vedere, inserire un font utilizzando questo servizio di Google è decisamente facile. Insieme a questa variante per inserire il carattere potete utilizzare inoltre la direttiva @import nel CSS o anche il linguaggio JavaScript.
Riepilogo: per un responsive web design ci sono molti caratteri gratis
Per siti web adattivi esiste un’ampia gamma di caratteri a disposizione. Come web designer potete utilizzare font gratuiti da Google Fonts, Adobe Edge Web Fonts, Font Squirrel e altri. Dovreste però sapere che proprio i caratteri più popolari come “Open Sans”, “Roboto” o “Lato” sono quelli più utilizzati sul web. Un carattere personalizzato e unico (soprattutto specifico per una sola azienda) non sono disponibili gratuitamente. I font gratuiti vi danno una grande libertà nell’ambito del responsive web design. Inoltre l’inserimento nei siti è piuttosto veloce e in tal modo i vostri visitatori potranno godere dei vantaggi dei font reattivi in pochissimo tempo.
Come mettere in pratica tutto quello che vi abbiamo mostrato nella parte uno e due sulla tipografia nel responsive web design, ve lo spieghiamo nella terza parte della nostra serie.
Articoli simili
Tipografia nel responsive web design: formattazioni CSS
Nel responsive web design la tipografia è un campo trascurato, nonostante la realizzazione di un carattere reattivo non sia più un segreto per pochi. Ma come si fa a realizzarlo? E quali font sono adatti a una scrittura responsive? Vi offriamo una panoramica su come realizzare una tipografia reattiva e come inserirla sul vostro sito tramite i CSS.
Tipografia nel responsive web design: nozioni base
Su internet si trovano numerosi testi con diversi caratteri. La diffusione del responsive web design si riflette anche sulla tipografia nei siti web e la visualizzazione dei caratteri dovrebbe adattarsi sempre alla schermata del dispositivo utilizzato. La tipografia reattiva deve avere una visualizzazione flessibile e utilizzare font adatti. In questo primo articolo vi offriamo una panoramica dei…
Icon fonts: il web design basato su icone vettoriali
Utilizzate un icon font per inserire una funzionale icona vettoriale sul vostro sito web. Al contrario delle immagini pixel classiche, quelle vettoriali hanno il vantaggio di lasciarsi scalare a piacere senza alcuna perdita di qualità. Inoltre l’inserimento su CSS (Cascading Style Sheets) offre ulteriori possibilità di agire direttamente sul codice. Molti progetti open source mettono a…
I migliori font per il web: perché i caratteri sicuri per il web sono così importanti
Per font web-safe si intendono quei caratteri che possono essere utilizzati sul web senza problemi. Il fattore chiave qui è se i rispettivi font possono essere visualizzati correttamente dal maggior numero possibile di browser. Scopriamo perché il numero di caratteri sicuri per il web è in costante crescita e perché i font per il web giocano un ruolo così importante per il successo delle aziende…
Come inserire un icon font nel vostro documento HTML
Di regola le icone vengono inserite tramite attributo “class” nel documento HTML. Questo principio vale anche per Font Awesome, uno degli icon font più usati, che comprende più di 600 icone vettoriali, ed è caratterizzato dalla semplicità di utilizzo ed è aggiornato regolarmente. Inoltre, il pacchetto di installazione contiene un file CSS quasi interamente configurato che semplifica…
