Basi di tipografia nel web design: queste sono le cose che dovresti tenere a mente

Mark Max Henckel Ultimo aggiornamento 21.10.2020
14 Min.
basi di tipografia webdesign
Ultimo aggiornamento 21.10.2020

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é oggi voglio mostrarvi quali principi di tipografia dovreste seguire per visualizzare il testo sul vostro sito web nel miglior modo possibile.

Non è un segreto che molte persone trovano 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 tipografici, e 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.

Tipografia nel web design - perché è così importante?

basi di tipografia webfonts

Non c'è dubbio che i font possono animare e arricchire visivamente un sito web. I caratteri - typefaces - 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 in molte pagine. Specialmente quando si tratta di tipografia, questo diventa rapidamente ovvio. L'uso sfrenato di VERSALIEN poco leggibile, la mancanza di contrasto tra il colore del carattere 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. Perché mai dovresti avere dei testi sul tuo sito web se non sono buoni e piacevoli da leggere? Presumibilmente, le opinioni differiscono su come dovrebbero essere alla fine i buoni testi leggibili. Non riesco a capirlo, perché abbiamo nel grafico semplice, provato e regole tipografiche molto sensateper creare testi ben leggibili. Tipografia e basta.

Uno di questi è il contrasto - cioè il rapporto cromatico 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 stava cercando di vendere qui "aquila bianca su sfondo bianco". In questo caso, aveva il testo del corpo grigio scuro su uno sfondo grigio chiaro, quindi un contrasto molto povero.

Questo può sembrare abbastanza bello - questione di gusto probabilmente - ma è estremamente brutto da leggere. L'ho riportato e ho scoperto che questo non è un buon design per me se posso leggere il testo solo con difficoltà. E ho ancora gli occhi sani. Cosa fanno coloro che hanno una vista limitata? Anche un problema spesso sottovalutato: l'accessibilità delle parole chiave. In ogni caso, il progettista ha ritenuto che fosse il suo progetto e che l'avrebbe fatto in quel modo. L'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: i requisiti speciali

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 anche che la pagina si carica rapidamente. Quindi, quando si tratta di integrare i font, abbiamo a che fare con le prestazioni del sito web.

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 markup CSS, si hanno così tanti modi per intervenire nella tipografia di un sito web che la questione diventa rapidamente più complessa 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 markup come Bold/Strong e em/i, così come i segni di paragrafo e altri elementi HTML significativi.

Sono un fan dei font standard. Questo è per cominciare. Voglio dire, non è davvero necessario integrare font speciali su un sito web. Come esempio, perché si integra un font proprio, il font CI è menzionato qui. Cioè, un font sviluppato appositamente per l'azienda, che ha una funzione importante nell'identità aziendale. Oppure uno è un designer, un artista o un fotografo molto bravo e dà 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 quindi problemi di prestazioni e l'incorporazione dei font CI è tecnicamente controllata.

Se sei un designer e vuoi mostrare cosa sai fare, è consigliabile utilizzare i servizi esistenti per la tipografia - su font web collaudati - per integrare il font desiderato in modo sicuro ed efficiente nel vostro sito web.

A volte sembra anche scontato convertire lo stile di carattere desiderato in formati adatti al web e integrarli singolarmente. Che poi questo funzioni sempre e alla lunga perfettamente, è un'altra questione. Perciò preferisco in questi casi Google Fontsperché è veloce, sicuro e facile da usare. Ma questa è forse anche una questione di gusto.

Queste 10 regole di tipografia ti aiuteranno

basi di tipografia webfonts

Top e regole molto semplici: Meno è più. Considera le abitudini di lettura della gente. Orientatevi verso 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 suoi 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 suo 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 fino a un massimo di circa 70 caratteri, quindi una larghezza di testo standard A4 di un documento Word. Di nuovo, basta guardare SPIEGEL ONLINE e Co. 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: bene e testi strutturati semanticamente in modo corretto! 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, e molto altro. 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 pagina web, libro o documento è sufficiente. In casi speciali, può funzionare di più, ma dovresti stare attento a usare più di 2 font per documento.

8. capitali

Evitare l'uso delle maiuscole nei titoli e nel menu. Sono molto difficili da leggere. Ma se si tratta di singole parole, per esempio nella NAVIGAZIONE, si possono usare le maiuscole. Ma non scriveteli in maiuscolo, ma usate i CSS con "trasformazione del testo:maiuscolo".

9. caratteri standard

In caso di dubbio e come ripiego, dovreste scegliere font di sistema collaudati. Arial, Verdana, Georgia sono tali font di sistema molto leggibili, che hanno quasi tutti i dispositivi di output e sono sempre visualizzati bene.

Un fallback è nel CSS del font successore, come BMW: "bmwTypeWebBoldAll", "Arial", "Helvetica", sans-serif; Qui, Arial, Helvetica e Sans-Serif (il primo carattere sotto Sans-Serif) sono i fallback che vengono visualizzati se il carattere prima di loro è ("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 ad esempio questo video raccomandato. Anche se Sven Wolfermann sconsiglia i font di sistema nella sua presentazione al "MobileTechCon" - al contrario di me - fornisce molte informazioni preziose sull'argomento qui!

Progettazione di font con CSS: Ha senso?

Una parola sul design o sull'impostazione dei font usando i CSS: Non da ultimo dall'introduzione di CSS3 Gli sviluppatori hanno a disposizione delle sottili impostazioni per i font di una pagina. 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 della linea, che a volte causa problemi con le altezze, la spaziatura e il posizionamento, ma cambiano anche il interlinea o mettere ombre intorno al testo ("text-shadow“). Male, quello che si può vedere a volte.

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 di nuovo costa tempo e codice. Questo ha davvero senso? La risposta deve essere molto chiara e precisa.

Stili di caratteri per il web: I caratteri web

basi di tipografia webfonts

A proposito: BMW lo usa sul suo sito web, come avete appena visto: font-family: "bmwTypeWebBoldAll", "Arial", "Helvetica", sans-serif; font-weight: normal; - nel corpo del testo abbastanza normale Arial. Amazon usa anche Arial sulla pagina del negozio. Apple, d'altra parte, usa il suo il proprio font come webfont. La compagnia petrolifera TEXACO usa i font Adobe. Solo come piccoli esempi.

Fortunatamente, ci sono ora molti fornitori di web font che funzionano bene e sono di solito facili da integrare. Sfortunatamente, questi "web font" sono di solito a pagamento, con prezzi molto variabili. Come esempi, oltre a Google Fontssono i seguenti: Font Adobe (Typekit), Webtype, Adobe Edge Web Fonts e molti altri - questione di gusti.

Il vantaggio di questi servizi è ovvio: non hai preoccupazioni di licenza (vedi sotto "Attenzione: licenze!"), i font funzionano e c'è aiuto o istruzioni per integrare i font sul tuo sito web (cioè supporto o forum). Le tariffe sono spesso estendibili e si ha una certa scelta di caratteri interessanti.

Il malinteso con Google Fonts

Quando il cosiddetto RGPD è stato reso obbligatorio per tutti nel maggio 2018, la comunità della rete ha evitato l'uso di Google Fonts panico. La gente temeva che l'uso del Google Web Fonts - – Google come la "piovra di dati" contro cui questa legislazione è stata diretta - non sarebbe conforme alle leggi sulla protezione dei dati e rischierebbe quindi costosi avvertimenti.

Questa paura ancora diffusa illumina la purtroppo ancora in corso grande confusione intorno al RGPD. A beneficio degli avvocati e degli studi legali sul web, ovviamente. Se siete preoccupati per l'uso di Google Analytics con Google per l'uso di Google Analytics e fare riferimento all'uso dei caratteri - e in caso di dubbio a cookie - nella politica sulla privacy, il problema è fuori dal tavolo.

Se avete ancora paura, potete usare tutti i Google Fonts anche localmentescaricare i Google Web Fonts e salvarli sul proprio spazio web.

Inoltre, è stato ripetutamente denunciato il rendimento, che era presumibilmente così male quando i caratteri sono stati utilizzati tramite Google carichi. 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 URL diverso, il che può avvenire nello stesso momento in cui si caricano i file dal proprio server. Ma siete ancora una volta dipendenti da Google.

Attenzione: tempi di caricamento!

La questione è semplice. I web font integrati esternamente possono aumentare il tempo di caricamento della pagina. Anche il codice necessario per integrare i propri font nella pagina. 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 ha bisogno di tempi di caricamento veloci, forse non hai l'hosting adeguato dietro e l'azienda non ha un font CI che deve assolutamente essere integrato, andrei sempre per lo standard. Quindi sui font di sistema, come fa Amazon con Arial fa. Questo ha senso.

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

Attenzione: licenze!

Quello che dovete considerare in ogni caso sono le licenze per i font usati. Se usate Google Fonts o i font di sistema, che sono caricati dal computer dell'utente, siete al sicuro. Per tutti gli altri font che usi sul tuo sito web, devi assicurarti di possedere la licenza per loro - e questo può diventare rapidamente abbastanza costoso - per poterli usare sul tuo sito web, o se è un font gratuito che a volte causa altri problemi, come gli umlaut tedeschi e l'Eszett (ß).

Per evitare tutti questi problemi, uso solo 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, quello che trovo sempre molto male, quando cerco il nome corretto del font, per poter controllare correttamente il font per la visualizzazione dei tag HTML.

Integrare i propri font

basi di tipografia webfonts

Con i web font e/o i font personalizzati che avete reso utilizzabili per il vostro sito tramite uno strumento, potete rapidamente incorrere in una serie di problemi per il vostro sito. Non è raro che si verifichino i seguenti fenomeni:

  • Font tremolante quando si carica la pagina (non è raro, a volte si vede un font diverso finché il CSS non lo sovrascrive con il webfont.
  • Tempi di caricamento più lunghi a causa di caratteri molto complessi (piuttosto rari).
  • Più comuni sono Sfocatura del caratteredistorsione dovuta a un rendering difettoso (su certi sistemi).

Per essere in grado di visualizzare il font desiderato sul maggior numero possibile di dispositivi di output, avete bisogno di diverse varianti di esso. "TTF" è chiaro e conosciuto, ma avete anche bisogno di "EOT" e delle due varianti "WOFF". Questo è essenziale se vuoi includere i tuoi font nella tua pagina. È possibile ottenere questi formati gratuitamente con il Generatore di webfont per generarli gratuitamente. Dopo di che caricate tutti i formati del vostro font in una directory del vostro server e includeteli nel vostro foglio di stile (file CSS) con il percorso seguente:

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

Si può vedere da questo Codice @font-faceche integra il vostro font, quanto è complessa questa cosa - e quindi quanto è soggetta a errori.

Poi puoi usarli nel tuo codice CSS e assegnarli a classi e ID. Ci possono essere alcuni errori lungo la strada, che non coprirò qui. Come ho detto, raccomando i font standard o di sistema o Google Fontsche puoi semplicemente aggiungere al file collegato nell'intestazione del tuo sito web:

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

Tipografia e visualizzazione 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 faccio un sito mobile o devo ottimizzare il mobile, la prima cosa che risparmio a causa del tempo di caricamento è ovviamente scaricare un web font o 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 avete 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 principali, 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 della pagina 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 proprio per queste ragioni. 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 font web-safe può essere trovata su www.cssfontstack.com.

Cosa sono i font sicuri per il web? I font web-safe sono font che vengono preinstallati in molti sistemi operativi. Anche se non tutti i sistemi hanno gli stessi font installati, puoi usare un blocco di impostazioni CSS sicuro per il web per selezionare più font che sembrano simili e che sono installati sui diversi sistemi che vuoi supportare. Se vuoi usare font diversi da quelli preinstallati da CSS3, puoi usare l'opzione Impostazioni per questi web font impostazioni del carattere.

Conclusione

Dovresti considerare molto attentamente se un font di sistema andrà altrettanto bene o addirittura meglio di un font web o di un font personalizzato. Caratteri collaudati come Verdana, Arial, Trebuchet, Georgia, Times New Roman, ecc. e altri possono essere utilizzati senza esitazione, poiché sono sempre ben leggibili. E non abbiamo nemmeno 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 dei font, ma anche la facilità d'uso del tuo design tipografico, cioè la leggibilità, il contrasto e l'altezza delle linee.

Pensate attentamente se volete usare il vostro font o uno esterno, o se volete usare font standard o font di sistema. Se decidete di usare il vostro font, chiedetevi se volete usare questo font o una variante simile con Google Fonts può essere utilizzato. O se vuoi davvero incorporare i font a mano 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 provati e testati e non hanno bisogno di alcun tempo di caricamento. Questo è ancora più vero per il caricamento mobile, quando si visualizza la pagina 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 WordPress -Theme Google Fonts ha già a bordo, uso quello ovviamente. Perché altrimenti devo rovinare tutto o sovrascrivere. Questo non ha davvero senso.

Se non è chiaro al identità aziendale di un'azienda, un font personalizzato è un espediente. E la maggior parte dei clienti non ha né tempo né denaro per questo. Molte strade portano a Roma - ma l'uso sbagliato della tipografia su un sito web e nel web design probabilmente no. 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 per andare, e rimarrà così 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.

Immagine contribuita: Ksenia Makagonova [Unsplash]
Altre immagini: Alexander Andrews [Unsplash], rawpixel [Pexels], Magda Ehlers [Pexels], Kristian Strand [Unsplash], Aaron Burden [Unsplash], RAIDBOXES

Mark Max Henckel - Webdesigner di Amburgo. Media designer di formazione (stampa), lavora come web designer dal 2000. Prima a mobile.de, dal 2003 lavoratore autonomo. Da 2005 blogger su diversi argomenti su diversi blog propri. Come freelance dal 2007 e 2008 presso SPIEGEL ONLINE, coinvolto nel lancio di einestages.de all'interfaccia tra programmazione e redazione. Più tardi alla società di marketing SPIEGEL Quality Channel (Spiegel QC/Spiegel Media). Freelancer per libri.de e varie agenzie grafiche e informatiche. Dal 2008 specializzato in WordPress .

Articoli correlati

Commenti su questo articolo

Scrivi un commento

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