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.
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.
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” è 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” è un altro carattere molto popolare senza grazie. È stato sviluppato da Łukasz Dziedzic con il supporto di Google.
“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” 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.
Se volete utilizzare un font con grazie, il carattere “Playfair Display” è un’ottima scelta. Potete scegliere tra sei diversi stili.
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.
<!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>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.
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.
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...
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...
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...
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.
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...
Offri ai tuoi clienti servizi professionali e affidabili con l'hosting di IONOS.
Scopri i pacchetti
Dominio omaggio per un anno