basi di tipografia webdesign

Basi di tipografia per il tuo prossimo progetto

Semplice è difficile. Questo è il mio principio guida. E così è con l'uso della tipografia nel web design, dei caratteri sul sito web - in realtà abbastanza semplice e tuttavia abbastanza complicato. Ecco perché vorrei mostrarvi oggi quali basi di tipografia dovreste considerare per visualizzare il testo sul vostro sito web nel miglior modo possibile.

Non è un segreto che per molte persone è difficile esprimersi in modo chiaro e comprensibile. Perché dovrebbe essere più facile tramite i media? Per facilitare questo - 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 qui.

Perché le basi della tipografia nel web design?

basi di tipografia webfonts

Non c'è dubbio che i font possono animare e arricchire visivamente un sito web. I caratteri sono elementi importanti di ogni buon design. Su internet, cioè nel web design, la questione della tipografia è soggetta a condizioni speciali, che vorrei illuminare qui e che dovrebbero aiutarvi a capire 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

I siti web spesso non sono fatti da grafici addestrati o da media designer, ma progettati e realizzati da persone in carriera. Questo può spiegare perché anche le regole grafiche più semplici sono disattese su molti siti web. Questo diventa particolarmente chiaro quando si tratta di tipografia. L'uso sfrenato di VERSALI poco leggibili, la mancanza di contrasto tra il colore dei caratteri e lo sfondo, così come la struttura confusa dei testi rendono difficile la lettura per gli utenti.

Ma la tipografia è proprio questo: la leggibilità dei testi. Altrimenti, che senso ha avere dei testi sul sito web se non sono buoni e piacevoli da leggere? Presumibilmente, le opinioni divergono su come dovrebbero essere i testi leggibili alla fine. Non riesco a capirlo, perché nella grafica abbiamo regole tipografiche semplici, provate e molto sensate per creare testi leggibili. La tipografia, dopo tutto.

Uno di questi è il contrasto, cioè il rapporto tra il colore del carattere e lo sfondo. In un forum una volta avevo 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 - una questione di gusto, suppongo - ma è difficile da leggere. L'ho riportato e ho scoperto che questo 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 fosse il tuo progetto e che l'avrebbe fatto in quel modo. Lo abbiamo già sentito tutti: "Si può fare così, ma poi è solo merda".

Per me, questa è un'ulteriore prova di quanto poco si sappia sulla leggibilità dei testi, cioè sulla buona tipografia. Nella 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à, cioè quelli tecnici. Una buona leggibilità su internet significa che il sito web si carica rapidamente. 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ù possibile leggibili su tutti i dispositivi di output, il che è un'altra sfida. Alla fine, con le possibilità del linguaggio di mark-up CSS, si hanno così tanti modi per intervenire nella tipografia di un sito web che le cose diventano rapidamente più complesse del previsto.

E naturalmente vogliamo avere un testo ben strutturato che aumenta anche la leggibilità, evita la fatica e ha un effetto su Google, cioè sul posizionamento nel motore di ricerca. Per esempio, i tag di intestazione H1, H2, H3, ecc., l'uso di liste e marcatori come Bold/Strong e em/i, così come i segni di paragrafo e altri utili elementi HTML.

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

Un proprio font CI è usato per lo più da grandi aziende che operano con il proprio dipartimento IT e una server farm. Non ci sono problemi di prestazioni e l'incorporazione dei font CI è tecnicamente controllata.

Se sei un designer e vuoi mostrare quello che sai fare, è consigliabile utilizzare servizi esistenti per la tipografia - font web provati e testati - al fine di 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 individualmente. Che questo funzioni sempre bene nel lungo periodo è un'altra questione. Ecco perché preferisco Google Fonts in questi casi, perché è veloce, sicuro e facile da usare. Ma anche questa è forse una questione di gusti.

Consenso*
Questo campo è per la convalida e non deve essere modificato.

Queste 10 regole di tipografia ti aiuteranno

basi di tipografia webfonts

Top e regole molto semplici: Meno è più. Prendete in considerazione le abitudini di lettura delle persone. Orientatevi su siti web che presentano ampi testi editoriali e imparate.

La leggibilità dei testi è soggetta a certe regole scientificamente fondate. Riguardano non solo il carattere in sé, ma anche i tuoi dintorni, il contrasto, la chiarezza e la struttura dei testi e la nitidezza dei loro bordi.

1. dimensione del carattere

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 è chiaramente sottovalutato. È stato determinato quale larghezza di testo la gente ama ancora leggere: È una larghezza massima di circa 70 caratteri, cioè una larghezza di testo standard 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 carattere, un buon 140-150 % di "line-height" si è dimostrato 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, per esempio, i tag di intestazione H1/H2/H3, i segni di paragrafo, i marcatori di lista, l'uso intelligente dell'evidenziazione per mezzo di 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 un font per sito web, libro o documento è sufficiente. In casi speciali, può funzionare di più, ma si dovrebbe fare attenzione all'uso di più di 2 font per documento.

8. capitali

Non usare maiuscole nei titoli e nel menu. Sono difficili da leggere. Tuttavia, se si tratta di singole parole, per esempio nella NAVIGAZIONE, si possono usare le maiuscole. Ma non scriveteli in lettere maiuscole, ma usate i CSS per risolvere il problema con "text-transform:uppercase".

9. caratteri standard

In caso di dubbio e come ripiego, dovreste scegliere font di sistema provati e testati. Arial, Verdana, Georgia sono questi font di sistema ottimamente leggibili, che sono disponibili su quasi tutti i dispositivi di output e vengono sempre visualizzati bene.

In CSS, un fallback è il font che lo segue, come 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: istruisciti sulla tipografia attraverso workshop, libri e riviste, o anche guardando un video su YouTube sull'argomento. Posso raccomandare questo video, per esempio. Anche se Sven Wolfermann sconsiglia i font di sistema nella sua conferenza al "MobileTechCon" - al contrario di me - fornisce molte informazioni preziose sull'argomento qui!

Progettazione di font con CSS: Ha senso?

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

Vi consiglio quindi di stare molto attenti a queste impostazioni e di usare queste tecniche con cautela. Non funzionano dappertutto e ostacolano anche la visualizzazione su piccoli display. Poi bisogna riprendere le istruzioni per il desktop tramite "media queries", che a sua volta costa tempo e codice. Questo ha davvero senso? La risposta deve essere molto chiara e precisa.

Font per il web: i font del web

basi di tipografia webfonts

A proposito: BMW usa questo sul tuo sito web come appena visto: font-family: "bmwTypeWebBoldAll", "Arial", "Helvetica",sans-serif;font-weight: normal; - nel corpo del testo abbastanza normale Arial. Amazon usa anche Arial sul tuo sito web del negozio. Apple, d'altra parte, usa il proprio font come font web. La compagnia petrolifera TEXACO usa Adobe Fonts. Questi sono solo alcuni esempi.

Fortunatamente, ci sono ora molti fornitori di web font che funzionano bene e sono di solito facili da integrare. Sfortunatamente, questi "web font" di solito devono essere pagati, e i prezzi variano molto. Come esempi, oltre a Google Fonts, vorremmo menzionare: Adobe Fonts (Typekit), Webtype, Adobe Edge Web Fonts e molti altri - una questione di gusto.

Il vantaggio di questi servizi è ovvio: non devi preoccuparti delle licenze (vedi sotto "Attenzione: licenze!"), i font funzionano e c'è aiuto, o più precisamente, istruzioni su come integrare i font sul tuo sito web (cioè supporto o forum). Le tariffe sono spesso estendibili e si ha una certa selezione di caratteri eccitanti.

Il malinteso con Google Fonts

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

Questa paura ancora diffusa illumina la purtroppo ancora in corso grande confusione intorno al GDPR. A beneficio degli avvocati e degli studi legali sul web, ovviamente. Se hai concluso un accordo di trattamento degli ordini con Google a causa dell'uso di Google Analytics e fate riferimento all'uso dei caratteri - e in caso di dubbio ai cookie - nella politica sulla privacy, il problema è fuori discussione.

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

Inoltre, la performance, che era presumibilmente così male quando i font venivano caricati tramite Google, è stata ripetutamente denunciata. Resta il fatto che Google ha un'architettura di server veloce ed estremamente stabile e che ci sono ancora dei fallback (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 sei dipendente da Google.

Attenzione: tempi di caricamento!

La questione è abbastanza semplice. I web font integrati esternamente possono aumentare il tempo di caricamento del sito WordPress. Anche il codice necessario per integrare i propri font nel sito WordPress lo fa. Solo i font standard, i font di sistema sui computer e sugli smartphone degli utenti, non richiedono alcun tempo di caricamento perché non vengono caricati tramite un server, non tramite internet.

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

Naturalmente, non si tratta dei kilobyte dei font da caricare. Si tratta del fatto che arrivano in cima, cioè che devono essere scaricati in più, e che il server che dovrebbe consegnarli potrebbe indebolirsi. Questo non ha un bell'aspetto ed è... evitabile.

Attenzione: licenze!

Una cosa che deve essere considerata in ogni caso è la licenza dei font utilizzati. Se usi Google Fonts o i font di sistema, che sono caricati dal computer dell'utente, sei su un sito WordPress sicuro. Con tutti gli altri font che usate sul vostro sito web, dovete assicurarvi di avere la licenza per loro. E questo può diventare rapidamente molto costoso. Sia che si tratti di usarlo sul proprio sito web o che si tratti di un font gratuito che a volte causa altre preoccupazioni, se pensiamo agli umlaut tedeschi e all'eszett (ß), per esempio.

Per evitare tutti questi problemi, uso i font di sistema o Google Fonts. Se il cliente vuole assolutamente il proprio font, si dovrebbe includere lo sforzo per esso generosamente nel calcolo, perché l'integrazione di font esterni nel sito web può talvolta causare alcuni problemi. Per esempio, con le istruzioni CSS e qui per esempio, che trovo sempre molto male, con la ricerca del nome corretto del font 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 i tuoi font che hai reso utilizzabili per il tuo sito WordPress tramite uno strumento, puoi rapidamente incorrere in una serie di problemi per il tuo sito WordPress. Non è raro che si verifichino i seguenti fenomeni:

  • Font tremolante quando si carica il sito WordPress (non è raro, a volte si vede un font diverso fino a quando il CSS lo sovrascrive con il webfont.
  • 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 difettoso (su certi sistemi).

Per poter visualizzare il carattere desiderato sul maggior numero possibile di dispositivi di output, sono necessarie diverse varianti dello stesso carattere. "TTF" è chiaro e conosciuto, ma hai anche bisogno 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 Webfont Generator. Poi caricate tutti i formati del vostro font in una directory sul vostro server e includeteli nel vostro foglio di stile (file CSS) con il percorso come segue:

@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');
}

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

Poi puoi usarli nel tuo codice CSS e assegnarli a classi e ID. In questo modo, possono verificarsi alcuni errori che non voglio trattare qui. Come prima: Raccomando i font standard o di sistema o Google Fonts, che si incorporano semplicemente 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 è fondamentalmente trascurato. Dal mio punto di vista, non è assolutamente necessario caricare un font speciale su un piccolo display o uno smartphone. E i fallback, i caratteri di sistema dei telefoni cellulari? Quando creo un sito WordPress mobile o devo ottimizzarlo per il mobile, la prima cosa che faccio a causa del tempo di caricamento è ovviamente salvare il download di un web font 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 guardiamo la questione da due punti di vista essenziali, cioè 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 web WordPress mobile, che è particolarmente importante quando si recupera alla fermata dell'autobus. D'altra parte, abbiamo (speriamo) ridotto all'essenziale il contenuto e il design della versione mobile del sito web per questi motivi. 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

Dovresti assolutamente controllare se uno dei font di sistema è adatto al tuo progetto. Una collezione completa delle cosiddette istruzioni CSS web-safe per i font di sistema, o più precisamente font web-safe, può essere trovata su CSS Font Stack.

Cosa sono i font web-safe? I font web-safe sono font che sono preinstallati in molti sistemi operativi. Anche se non tutti i sistemi hanno gli stessi font installati, puoi usare un blocco di impostazioni CSS per selezionare diversi font che sembrano simili e che sono installati sui diversi sistemi che vuoi supportare. Se volete usare font diversi da quelli preinstallati da CSS3 in poi, potete usare le impostazioni per questi web font.

Conclusione sulle basi della tipografia

Dovresti considerare molto attentamente se un font di sistema andrà altrettanto bene o addirittura meglio di un font web o del tuo font. Caratteri 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 naturalmente gioca un ruolo decisivo. Ma questo è un altro argomento. Non sottovalutare la questione della tipografia sui 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.

Pensate bene se volete usare il vostro font o un font esterno, o se volete usare i font standard, o più precisamente i font di sistema. Se decidi di usare il tuo font, chiediti se puoi usare questo font o una variante simile con Google Fonts. O se vuoi davvero integrare i font manualmente via 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 provati e testati e non richiedono alcun tempo di caricamento. Questo è ancora più vero per il caricamento mobile, quando si visualizza il tuo sito WordPress su smartphone.

Per me personalmente, di solito non c'è molto da dire sull'uso di un font esterno o di un web font. Se un tema WordPress ha già Google Fonts a bordo, ovviamente lo uso. Perché altrimenti devo rovinare tutto o sovrascrivere. Questo non ha davvero senso.

Se non è chiaramente parte dell'identità aziendale di un'azienda, avere il 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. Usarli è il modo più sicuro e rimarrà tale per un bel po' di tempo. 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

Che domande hai sulle basi della tipografia? Sentitevi liberi di usare la funzione di commento. Vuoi essere informato sui nuovi articoli su WordPress, web design e altro? Allora seguiteci su Twitter, Facebook, LinkedIn o tramite la nostra newsletter.

Ti è piaciuto l'articolo?

Con la tua valutazione ci aiuti a migliorare ancora di più il nostro contenuto.

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato.