basi di tipografia webdesign

Nozioni di base di tipografia per il tuo prossimo progetto

La semplicità è difficile. Questo è il mio principio guida. E così è per l'uso della tipografia nel web design, dei caratteri sul sito web: in realtà è molto semplice e allo stesso tempo molto complicato. Ecco perché oggi vorrei mostrarti quali sono le basi della tipografia che dovresti prendere in considerazione per visualizzare il testo sul tuo sito web nel miglior modo possibile.

Non è un segreto che per molte persone sia difficile esprimersi in modo chiaro e comprensibile. Perché dovrebbe essere più facile attraverso i media? Per rendere più semplice la comunicazione, c'è la tipografia. Da un lato è lo studio dei caratteri, dall'altro è un elemento di design per presentare testi o contenuti in modo intelligente, appropriato o "esteticamente piacevole". Il fatto che si faccia una distinzione tra microtipografia e macrotipografia non è rilevante in questo caso.

Perché le basi della tipografia nel web design?

basi di tipografia webfonts

Non c'è dubbio che i font possano ravvivare e arricchire visivamente un sito web. I caratteri sono elementi importanti di ogni buon design. Su internet, ovvero nel web design, la tipografia è soggetta a condizioni particolari, che vorrei illustrare in questa sede e che dovrebbero aiutarti a comprendere meglio la questione dei font sui siti web.

"La buona tipografia non cerca tutto ciò che è ancora possibile, ma chiede ciò che è necessario".

- Kurt Weidemann

Spesso i siti web non sono realizzati da grafici o media designer esperti, ma sono progettati e realizzati da persone in carriera. Questo può spiegare perché in molti siti web vengono disattese anche le regole grafiche più semplici. Questo diventa particolarmente chiaro quando si parla di tipografia. L'uso sfrenato di VERSALI poco leggibili, la mancanza di contrasto tra il colore dei caratteri e lo sfondo e la struttura confusa dei testi rendono difficile la lettura da parte degli utenti.

Ma è proprio questo l'obiettivo della tipografia: la leggibilità dei testi. Altrimenti, che senso ha avere dei testi sul sito web se non sono buoni e piacevoli da leggere? A quanto pare, le opinioni divergono su come dovrebbero apparire i testi leggibili alla fine. Non riesco a capirlo, perché nella grafica abbiamo regole tipografiche semplici, collaudate e molto sensate per creare testi leggibili. La tipografia, dopotutto.

Uno di questi è il contrasto, ovvero il rapporto tra il colore del carattere e quello dello sfondo. In un forum una volta ho criticato un layout web presentato con orgoglio proprio per questo motivo. Nella grafica, chiamiamo il fenomeno che il presunto web designer voleva vendere qui "aquila bianca su sfondo bianco". In questo caso, aveva un testo continuo grigio scuro su uno sfondo grigio chiaro, cioè un contrasto insufficiente.

Può sembrare bello - questione di gusti, suppongo - ma è difficile da leggere. L'ho segnalato e ho scoperto che non era un buon design per me se potevo leggere il testo solo con difficoltà. E ho ancora gli occhi sani. Cosa fanno coloro che hanno problemi di vista? Questo è anche un problema spesso sottovalutato: l'accessibilità delle parole chiave. In ogni caso, il progettista ha ritenuto che il progetto fosse suo e che l'avrebbe fatto in quel modo. Lo abbiamo già sentito tutti: "Puoi farlo in questo modo, ma poi è solo merda".

Per me questa è un'ulteriore prova di quanto sia scarsa la conoscenza della leggibilità dei testi, ovvero della buona tipografia. Durante la mia formazione come media designer (stampa) molti anni fa, avevo un grafico e tipografo esperto da cui ho potuto imparare molto.

Web design e tipografia

basi di tipografia webfonts

Nel web design, tuttavia, abbiamo altri requisiti per la tipografia oltre alla leggibilità, ovvero quelli tecnici. Una buona leggibilità su internet significa che il sito si carica velocemente. Quindi, quando si tratta di integrare i font, abbiamo a che fare con le prestazioni di WordPress.

Inoltre, bisogna assicurarsi che i testi siano il più leggibili possibile su tutti i dispositivi di output, il che rappresenta un'altra sfida. Alla fine, con le possibilità del linguaggio di mark-up CSS, hai così tanti modi per intervenire sulla tipografia di un sito web che le cose diventano rapidamente più complesse del previsto.

E naturalmente vogliamo avere un testo ben strutturato che aumenti anche la leggibilità, eviti l'affaticamento e abbia un effetto su Google, cioè sul posizionamento nel motore di ricerca. Ad esempio, i tag di intestazione H1, H2, H3, ecc., l'uso di elenchi e marcatori come Bold/Strong ed em/i, nonché i segni di paragrafo e altri elementi HTML utili.

Sono un amico dei font standard. Lasciatemi dire che prima di tutto. Insomma, non è necessario integrare i propri font speciali in un sito web. Un esempio del perché dovresti integrare il tuo font è il font CI. In altre parole, un font che è stato sviluppato appositamente per l'azienda e che ha una funzione importante nell'identità aziendale. Oppure sei un designer, un artista o un fotografo davvero bravo e dai importanza a un aspetto stravagante o molto personalizzato. Ma non si tratta necessariamente di grandi blocchi di testo o di informazioni scritte.

Un font CI proprio è utilizzato soprattutto dalle grandi aziende che operano con un proprio reparto IT e una server farm. Non ci sono problemi di prestazioni e l'incorporazione dei font CI è tecnicamente monitorata.

Se sei un designer e vuoi mostrare ciò che sai fare, è consigliabile utilizzare i servizi esistenti per la tipografia - font web provati e testati - per integrare il font desiderato nel tuo sito web in modo sicuro ed efficiente.

A volte sembra anche scontato convertire il carattere desiderato in formati compatibili con il web e integrarli singolarmente. Se questo funziona sempre bene nel lungo periodo è un'altra questione. Per questo motivo preferisco Google Fonts in questi casi, perché è veloce, sicuro e facile da usare. Ma anche questa è forse una questione di gusti.

"*" indica i campi obbligatori

Desidero iscrivermi alla newsletter per essere informato sui nuovi articoli del blog, sugli ebook, sulle funzionalità e sulle novità di WordPress. Posso ritirare il mio consenso in qualsiasi momento. Si prega di prendere nota della nostra Politica sulla Privacy.
Questo campo è per la convalida e non deve essere modificato.

Queste 10 regole di tipografia ti aiuteranno

basi di tipografia webfonts

Regole top e molto semplici: Meno è meglio. Tieni conto delle abitudini di lettura delle persone. Orientati sui siti web che presentano testi editoriali approfonditi e impara.

La leggibilità dei testi è soggetta a determinate regole basate su dati scientifici. Non riguardano solo il carattere tipografico in sé, ma anche l'ambiente circostante, il contrasto, la chiarezza e la struttura dei testi e la nitidezza dei bordi.

1. dimensione dei caratteri

Dipende dal font e si basa sul design di base del sito web. Si prega di notare che l'utente ha sempre la possibilità di cambiare la dimensione del carattere nel tuo browser o smartphone. Cercate di prendere le dimensioni relative dei caratteri, cioè %, EM/REM o piccolo/normale/medio/grande.

2. larghezza della linea

Questo aspetto è chiaramente sottovalutato. È stato determinato quale sia la larghezza del testo che le persone amano ancora leggere: La larghezza massima è di circa 70 caratteri, ovvero la larghezza standard del testo A4 di un documento Word. Basta dare un'occhiata a SPIEGEL ONLINE e simili per vedere quanto sono larghi i loro blocchi di testo.

3. interlinea

Per una leggibilità ottimale, il cosiddetto bleed-through, cioè la distanza tra le singole righe di un testo - anche l'altezza di un paragrafo - è di grande importanza. A seconda del font, un buon 140-150% di "line-height" si è dimostrato valido sul web.

4a larghezza del barile

Questa è la spaziatura tra le lettere, che viene manipolata da "letter-spacing". Dovresti stare molto attento qui e usare questa opzione di design solo con cautela - per esempio, con certe intestazioni. In caso di dubbio, non regolarlo.

5. contrasto

Il rapporto tra il colore e il colore dello sfondo è chiamato contrasto. Questo dovrebbe essere molto alto per un testo continuo. Il contrasto massimo è naturalmente il testo nero su uno sfondo bianco. Questo è facile da leggere.

6. struttura

Questo significa: testi ben strutturati e semanticamente corretti! In HTML questo significa, ad esempio, i tag di intestazione H1/H2/H3, i segni di paragrafo, i segni di elenco, l'uso intelligente dell'evidenziazione tramite grassetto, corsivo e colore. Questo ha un effetto diretto sulla leggibilità e anche sul ranking di Google.

7. un massimo di due tipi di carattere

Spesso è sufficiente un font per sito web, libro o documento. In casi particolari, può andare bene anche un numero maggiore di font, ma è bene fare attenzione all'utilizzo di più di 2 font per documento.

8. Capitali

Non usare le maiuscole nei titoli e nel menù. Sono difficili da leggere. Tuttavia, se si tratta di singole parole, ad esempio nella NAVIGAZIONE, puoi usare le maiuscole. Ma non scriverli in maiuscolo, bensì utilizza i CSS per risolvere il problema con "text-transform:uppercase".

9. caratteri standard

In caso di dubbio e come ripiego, dovresti scegliere i font di sistema provati e testati. Arial, Verdana, Georgia sono font di sistema di eccellente leggibilità, disponibili su quasi tutti i dispositivi di output e sempre ben visualizzati.

In CSS, un fallback è il font che lo segue, ad esempio per BMW: "bmwTypeWebBoldAll", "Arial", "Helvetica",sans-serif; qui Arial, Helvetica e Sans Serif (cioè il primo font disponibile sotto Sans Serif) sono i fallback che vengono visualizzati se il font che lo precede ("bmwTypeWebBoldAll") non è disponibile.

10. formazione

Il mio consiglio: informati sulla tipografia attraverso workshop, libri e riviste, o anche guardando un video su YouTube sull'argomento. Ad esempio, posso consigliare questo video. Sebbene Sven Wolfermann sconsigli i font di sistema nella sua conferenza al "MobileTechCon" - contrariamente a me - qui fornisce molte informazioni preziose sull'argomento!

Progettazione di font con i CSS: Ha senso?

Una parola sul design dei font, o più precisamente sulla loro impostazione tramite i CSS: Non da ultimo, dopo l'introduzione di CSS3, gli sviluppatori hanno a disposizione una serie di opzioni per impostare i font di un sito WordPress. Ma hanno davvero sempre senso? Per cosa li uso e quando? Cosa voglio ottenere? Leggibilità? Un bel design? Non tutti i codificatori - o i loro clienti - sembrano pensarci. A volte fanno tutto il possibile. Non solo modificano l'altezza delle righe, il che a volte causa problemi di altezza, spaziatura e posizionamento, ma modificano anche la spaziatura delle lettere o mettono delle ombre intorno al testo ("text-shadow"). È terribile quello che a volte si vede.

Ti consiglio quindi di fare molta attenzione a queste impostazioni e di utilizzare queste tecniche con cautela. Non funzionano dappertutto e ostacolano persino la visualizzazione su schermi di piccole dimensioni. Poi devi riprendere le istruzioni per il desktop tramite le "media queries", che a loro volta costano tempo e codice. Ha davvero senso? La risposta deve essere molto chiara e precisa.

Font per il web: i font per il web

basi di tipografia webfonts

A proposito: BMW utilizza questo sul suo sito web come appena visto: font-family: "bmwTypeWebBoldAll", "Arial", "Helvetica",sans-serif;font-weight: normal; - nel testo del corpo abbastanza normale Arial. Anche Amazon utilizza Arial sul suo sito web. Apple, invece, utilizza il proprio font come font web. La compagnia petrolifera TEXACO utilizza Adobe Fonts. Questi sono solo alcuni esempi.

Fortunatamente, oggi esistono molti fornitori di font web che funzionano bene e sono solitamente facili da integrare. Purtroppo questi "web font" devono essere pagati e i prezzi variano notevolmente. Come esempi, oltre a Google Fonts, vogliamo citare: Adobe Fonts (Typekit), Webtype, Adobe Edge Web Fonts e molti altri ancora - una questione di gusti.

Il vantaggio di questi servizi è evidente: non devi preoccuparti delle licenze (vedi sotto "Attenzione: le licenze!"), i font funzionano e c'è un aiuto, o più precisamente, istruzioni su come integrare i font sul tuo sito web (ad esempio il supporto o i forum). Le tariffe sono spesso estendibili e hai a disposizione una certa selezione di font interessanti.

Il malinteso con Google Fonts

Quando il cosiddetto DSGVO è stato reso vincolante per tutti in Mai 2018, la comunità della rete è andata nel panico per l'uso dei Google Fonts. Le persone temevano che l'uso di Google Web Fonts - Google come la "piovra dei dati" contro cui era diretta questa legislazione - non fosse conforme alle leggi sulla protezione dei dati e che quindi avrebbero rischiato costosi avvisi.

Questo timore, ancora molto diffuso, evidenzia la grande confusione che purtroppo regna ancora intorno al GDPR. A vantaggio degli avvocati e degli studi legali sul web, ovviamente. Se hai stipulato un contratto di elaborazione ordini con Google a causa dell'uso di Google Analytics e fai riferimento all'uso dei caratteri - e in caso di dubbio ai cookie - nell'informativa sulla privacy, il problema è fuori discussione.

Se hai ancora paura, puoi anche integrare tutti i Google Font in locale, cioè scaricare i Google Web Font e salvarli sul tuo spazio web.

Inoltre, le prestazioni, che sarebbero state pessime quando i font venivano caricati tramite Google, sono state ripetutamente denunciate. Non va dimenticato che Google ha un'architettura di server veloce ed estremamente stabile e che ci sono comunque dei ripieghi (vedi sopra). Inoltre, si caricano i font da un altro URL, il che può avvenire contemporaneamente al caricamento dei file dal proprio server. Ma ancora una volta dipendi da Google.

Attenzione: tempi di caricamento!

La questione è piuttosto semplice. I web font integrati esternamente possono aumentare il tempo di caricamento del sito WordPress. Il codice necessario per integrare i tuoi font nel sito web WordPress è disponibile. Solo i font standard, quelli di sistema sui computer e sugli smartphone degli utenti, non richiedono tempi di caricamento perché non vengono caricati da un server, né da internet.

O per dirla in un altro modo: se il tuo sito web WordPress ha bisogno di tempi di caricamento rapidi, forse l'hosting WordPress corrispondente non è in grado di sostenerlo e l'azienda non ha un font CI che deve assolutamente essere integrato, sceglierei sempre lo standard. In altre parole, i font di sistema, come fa Amazon con Arial. Questo ha senso.

Ovviamente non si tratta dei kilobyte dei font da caricare. Si tratta del fatto che vengono forniti in cima, cioè devono essere scaricati in aggiunta, e che il server che dovrebbe consegnarli potrebbe indebolirsi. Questo non è un buon segno ed è... evitabile.

Attenzione: licenze!

Un aspetto da tenere in considerazione in ogni caso è la licenza dei font utilizzati. Se utilizzi Google Fonts o font di sistema, che vengono caricati dal computer dell'utente, sei su un sito WordPress sicuro. Per tutti gli altri font che utilizzi sul tuo sito web, devi assicurarti di avere la relativa licenza. E questo può diventare rapidamente molto costoso. Sia che si tratti di utilizzarlo sul proprio sito web, sia che si tratti di un font gratuito che a volte causa altre preoccupazioni, se pensiamo alle umlaut tedesche e all'eszett (ß), per esempio.

Per evitare tutti questi problemi, utilizzo i font di sistema o Google Fonts. Se il cliente desidera assolutamente un proprio font, dovresti includere generosamente nel calcolo il relativo costo, perché l'integrazione di font esterni nel sito web può talvolta causare alcuni problemi. Per esempio, con le istruzioni CSS e qui per esempio, cosa che trovo sempre pessima, con la ricerca del nome del font corretto per poter accedere correttamente al font per la visualizzazione dei tag HTML.

Integrare i propri font

basi di tipografia webfonts

Con i web font e/o con i tuoi font, che hai reso utilizzabili per il tuo sito WordPress tramite uno strumento, puoi incorrere rapidamente in una serie di problemi per il tuo sito WordPress. Non è raro che si verifichino i seguenti fenomeni:

  • Font tremolante durante il caricamento del sito WordPress (non è raro, a volte si vede un font diverso finché il CSS non lo sovrascrive con il font web.
  • Tempi di caricamento più lunghi a causa di font molto complessi (piuttosto rari).
  • Più comuni sono la sfocatura del tipo, la distorsione dovuta a un rendering errato (su alcuni sistemi).

Per poter visualizzare il font desiderato sul maggior numero possibile di dispositivi di output, hai bisogno di diverse varianti dello stesso font. "TTF" è chiaro e conosciuto, ma hai bisogno anche di "EOT" e delle due varianti "WOFF". Questo è essenziale se vuoi integrare i tuoi font nel tuo sito WordPress. Puoi generare questi formati gratuitamente con il Generatore di Webfont. Quindi carica tutti i formati del tuo font in una directory sul tuo server e includili nel tuo foglio di stile (file CSS) con il seguente percorso:

@font-face {
font-family: 'Dein Font';
font-style: normal;
font-weight: normal;
src: local('Dein Font'),
      url('/deinfont.woff2') format('woff2'),
      url('/deinfont.woff') format('woff'),
      url('/deinfont.ttf') format('ttf'),
      url('/deinfont.eot') format('eot');
}

@font-face {
font-family: 'Dein Font';
font-style: italic;
font-weight: normal;
src: local('Dein Font Italic'), vbx
      url('/deinfont-italic.woff2') format('woff2'),
      url('/deinfont-italic.woff') format('woff'),
      url('/deinfont-italic.ttf') format('ttf'),
      url('/deinfont-italic.eot') format('eot');
}

Puoi vedere da questo codice @font-face, che integra il tuo font, quanto sia complessa la questione - e quindi quanto sia soggetta a errori.

Poi potrai utilizzarli nel tuo codice CSS e assegnarli a classi e ID. In questo modo possono verificarsi alcuni errori che non voglio trattare in questa sede. Come prima: Ti consiglio di utilizzare font standard o di sistema o Google Fonts, che dovrai semplicemente incorporare tramite il file collegato nell'intestazione del sito web:

<link href='https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i' rel='stylesheet' type='text/css'>

Tipografia e presentazione mobile

basi di tipografia webfonts

Questo aspetto viene sostanzialmente trascurato. Dal mio punto di vista, non è assolutamente necessario caricare un font speciale su un display piccolo o su uno smartphone. E i fallback, i font di sistema dei telefoni cellulari? Quando creo un sito WordPress per dispositivi mobili o devo ottimizzarlo per i dispositivi mobili, la prima cosa che faccio a causa del tempo di caricamento è ovviamente risparmiare il download di un font web o di un font personalizzato.

Mentre è una decisione strategica che ovviamente deve essere discussa con il cliente, non vedo un solo argomento a favore di un font web o un font personalizzato nel rendering mobile.

Naturalmente, non tutti i font di sistema che esistono per il desktop sono disponibili sullo smartphone. Ma dal mio punto di vista, non importa se hai questo o quel font per il sistema Android. Si tratta di informazioni rapide e di una buona leggibilità. Questo è sicuramente garantito su Android e Apple con i loro font web-safe.

Se consideriamo la questione da due punti di vista essenziali, ovvero la velocità di caricamento e il design, dobbiamo concludere che un font separato per la visualizzazione mobile è superfluo. Da un lato, il font influisce sulla velocità di caricamento del sito WordPress per dispositivi mobili, il che è particolarmente importante quando lo si recupera alla fermata dell'autobus. D'altra parte, per questi motivi abbiamo (speriamo) ridotto all'essenziale il contenuto e il design della versione mobile del sito. Perché caricare un font web sofisticato?

L'essenziale è sempre la leggibilità o ciò che vogliamo ottenere: Impartire conoscenze, intrattenimento letterario, comprare un prodotto, prendere un contatto, ordinare una newsletter o visualizzare un indirizzo. E per questo, penso, non c'è bisogno di nessun font speciale e nessun webfont.

Font sicuri per il web

Devi assolutamente verificare se uno dei font di sistema è adatto al tuo progetto. Una raccolta completa delle cosiddette istruzioni CSS web-safe per i font di sistema, o più precisamente per i font web-safe, si trova su CSS Font Stack.

Cosa sono i font web-safe? I font Web-safe sono font preinstallati in molti sistemi operativi. Anche se non tutti i sistemi hanno installato gli stessi font, puoi utilizzare un blocco web-safe di impostazioni CSS per selezionare diversi font che hanno un aspetto simile e che sono installati sui diversi sistemi che vuoi supportare. Se vuoi utilizzare font diversi da quelli preinstallati a partire da CSS3, puoi utilizzare le impostazioni di questi web font.

Conclusione sulle basi della tipografia

Dovresti valutare con molta attenzione se un font di sistema può andare bene o addirittura meglio di un font web o del tuo font. Font collaudati come Verdana, Arial, Trebuchet, Georgia, Times New Roman e altri possono essere utilizzati senza esitazione, perché sono sempre leggibili. E non abbiamo ancora parlato della qualità del contenuto dei testi, che ovviamente gioca un ruolo decisivo. Ma questo è un altro argomento. Non sottovalutare la questione della tipografia nei siti web. Considera gli aspetti tecnici, come il tempo di caricamento o le umlaut nei font, ma anche la facilità d'uso del tuo design tipografico, cioè la leggibilità, il contrasto e l'altezza delle linee.

Pensa bene se vuoi usare il tuo font o un font esterno, oppure se vuoi usare i font standard o, più precisamente, i font di sistema. Se decidi di usare un tuo font, chiediti se puoi usare questo font o una variante simile con Google Fonts. Oppure se vuoi davvero integrare i font manualmente tramite CSS e caricarli prima sul server in tutti i formati. I font standard che l'utente ha sul computer o sullo smartphone e che vengono caricati da lì sono collaudati e non richiedono tempi di caricamento. Questo vale ancora di più per il caricamento da mobile, quando si visualizza il sito WordPress su smartphone.

Per me personalmente non c'è molto da dire sull'utilizzo di un font esterno o di un font web. Se un tema WordPress è già dotato di Google Fonts, ovviamente lo utilizzo. Perché altrimenti devo rovinare tutto o sovrascriverlo. Non ha davvero senso.

Se non fa chiaramente parte della corporate identity di un'azienda, avere un proprio font è un espediente. E la maggior parte dei clienti non ha né tempo né denaro per questo. Molte strade portano a Roma - ma probabilmente non l'uso sbagliato della tipografia su un sito web e nel web design. Con i font di sistema, con i font standard, si possono creare e riempire meravigliosi design e grandi siti web. Utilizzarli è il modo più sicuro e lo sarà ancora per un bel po'. Forse è una questione di gusti, ma forse questo è l'approccio più sensato al tema dei font sui siti web.

Le tue domande sulle basi della tipografia

Quali domande hai sulle basi della tipografia? Sentiti libero di utilizzare la funzione di commento. Vuoi essere informato sui nuovi articoli su WordPress, sul web design e molto altro? Allora seguici su Twitter e Facebook, LinkedIn o tramite la nostra newsletter.

Ti è piaciuto l'articolo?

Con la tua valutazione ci aiuti a migliorare ancora di più i nostri contenuti. Grazie!

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato. I campi obbligatori sono contrassegnati da *.