Ti­po­gra­fia nel web design re­spon­si­ve: caratteri adatti

Se cerchi un font per il tuo sito web, in rete puoi trovare una va­stis­si­ma offerta di font re­spon­si­ve (caratteri reattivi per le tue pagine web). Ti pre­sen­tia­mo alcuni dei caratteri più co­no­sciu­ti e gratuiti.

Font gratuiti per il web design re­spon­si­ve

I font per il web sono perfetti come base per la ti­po­gra­fia nel web design re­spon­si­ve, in quanto si basano su grafici vet­to­ria­li scalabili li­be­ra­men­te. Ri­chia­man­do un sito che utilizza font, i caratteri vengono scaricati da un server e in seguito inseriti nella pagina per la vi­sua­liz­za­zio­ne sul browser dell’utente. I font reattivi sono adatti alle esigenze del relativo browser e del display del di­spo­si­ti­vo uti­liz­za­to.

Diverse piat­ta­for­me internet for­ni­sco­no font re­spon­si­ve pronti per il download, in parte gratis, in parte a pagamento. Tra i fornitori noti di font a pagamento rientrano ad esempio Adobe Fonts o Fon­tspring, che offrono un’ampia selezione di caratteri famosi, inclusi molti classici. In al­ter­na­ti­va è possibile uti­liz­za­re la vasta offerta di font gratuiti. Non tutti i font di­spo­ni­bi­li lì sono adatti a un uso generico: alcuni sono troppo giocosi o insoliti e quindi con­si­glia­bi­li solo per esigenze spe­ci­fi­che; altri non con­ten­go­no lettere accentate o altri caratteri speciali. In generale, il set di caratteri dei font varia, talvolta in modo si­gni­fi­ca­ti­vo. As­si­cu­ra­ti quindi di scegliere, per il tuo web design re­spon­si­ve, un font che includa un numero di caratteri suf­fi­cien­te­men­te ampio. A titolo esem­pli­fi­ca­ti­vo, ti pre­sen­tia­mo alcuni Google Fonts versatili per il tuo sito web.

Esempi di ti­po­gra­fia web su Google Fonts

La piat­ta­for­ma Google Fonts, lanciata nel 2010, viene uti­liz­za­ta da molti web designer come pool di caratteri per una ti­po­gra­fia reattiva. Fin dall’inizio sono stati offerti esclu­si­va­men­te font open source, che possono essere uti­liz­za­ti sia per scopi com­mer­cia­li e non. Hai a di­spo­si­zio­ne oltre 1.900 diversi font per il web. Puoi scaricare tutti i font e in­te­grar­li nel tuo sito web tramite un codice.

Open Sans

“Open Sans” è un carattere senza grazie molto popolare con un aspetto classico e sobrio. Rientra tra i font per il web standard. Fu creato da Steve Matteson ed è stato ot­ti­miz­za­to per l’uso sul web, per di­spo­si­ti­vi mobili e per la stampa.

Close

Lato

“Lato” è un altro carattere molto popolare senza grazie. È stato svi­lup­pa­to da Łukasz Dziedzic con il supporto di Google.

Close

Roboto

“Roboto” fu uti­liz­za­to in­nan­zi­tut­to come carattere per il sistema operativo Android e da quel momento è stato con­ti­nua­men­te mi­glio­ra­to. Questo font senza grazie consiste di lettere re­la­ti­va­men­te piccole, grazie alle quali in una riga entrano più caratteri di quanti ne en­tre­reb­be­ro con un altro.

Close

Source Serif 4

“Source Serif 4” è un carattere ti­po­gra­fi­co svi­lup­pa­to da Adobe, che fa parte della famiglia di font Source. Il font con grazie può essere uti­liz­za­to come com­ple­men­to al font senza grazie “Source Sans 3” e al font mo­no­spa­zio “Source Code Pro”, anch’essi messi a di­spo­si­zio­ne da Adobe gra­tui­ta­men­te.

Close

Playfair Display

Se desideri uti­liz­za­re un font con grazie, il carattere “Playfair Display” è un’ottima scelta. Puoi scegliere tra diversi stili di caratteri più de­co­ra­ti­vi.

Close

Inserire i caratteri tramite Google Fonts

Molti font per il web si trovano su database di diversi fornitori. I caratteri qui pre­sen­ta­ti si trovano sia su Google Fonts sia su Adobe Edge Web Fonts e Font Squirrel. Ti mostriamo come inserire il carattere “Open Sans” tramite Google Fonts.

• Inserisci nel campo di ricerca “Open Sans” e seleziona il carattere. Poi fai clic sul pulsante “Get font” (ottieni font).
• A questo punto ti vengono nuo­va­men­te mostrate le in­for­ma­zio­ni più im­por­tan­ti relative al font. Prosegui facendo clic sul pulsante “Get embed code” (ottieni il codice in­cor­po­ra­to).
• Ora ti viene mostrato un codice per la sezione <head> delle tue pagine web e per il documento CSS. Hai inoltre la pos­si­bi­li­tà di impostare lo stile de­si­de­ra­to del carattere re­spon­si­ve.
• Per includere “Open Sans” in HTML, inserisci nella sezione <head> il codice cor­ri­spon­den­te (che contiene anche il link a Google Fonts). L’istru­zio­ne sarà quindi la seguente:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>So binden Sie einen Webfont von Google ein</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
</body>
</html>

Con il secondo codice definisci il carattere in CSS:

/ *Applicare il carattere – Esempio per Open Sans* /
body {
    font-family: "Open Sans", sans-serif;
    font-weight: 400; / *Peso normale* /
    font-style: normal;
}

Come puoi vedere, inserire un font uti­liz­zan­do questo servizio di Google è de­ci­sa­men­te facile. Insieme a questa variante per inserire il carattere puoi uti­liz­za­re inoltre la direttiva @import nel CSS.

Con­clu­sio­ne: per un web design re­spon­si­ve ci sono molti caratteri gratis

Per siti web adattivi esiste un’ampia gamma di caratteri a di­spo­si­zio­ne. Come web designer puoi uti­liz­za­re font gratuiti da Google Fonts, Font Squirrel e altri. Dovresti però sapere che proprio i caratteri più popolari come “Open Sans”, “Roboto” o “Lato” sono quelli più uti­liz­za­ti sul web. Un carattere per­so­na­liz­za­to e unico (so­prat­tut­to specifico per una sola azienda) non è di­spo­ni­bi­le gra­tui­ta­men­te. I font gratuiti ti danno una grande libertà nell’ambito del web design re­spon­si­ve. Inoltre, l’in­se­ri­men­to nei siti è piuttosto veloce e in tal modo i vi­si­ta­to­ri e le vi­si­ta­tri­ci potranno godere dei vantaggi dei font reattivi in po­chis­si­mo tempo.