Le basi della tipografia nel Web Design: queste sono le cose da considerare

14 Min.
webdesign di base della tipografia
Ultimo aggiornamento il 24/01/2020

Facile è difficile. Questo è il mio motto. E così è con l'uso della tipografia nel web design, dei font sul sito web - in realtà abbastanza semplice eppure abbastanza complicato. Ecco perché oggi vorrei mostrarvi quali sono le regole tipografiche di base da seguire 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 attraverso i media? Per facilitare questo - la comunicazione - c'è la tipografia. Da un lato è la dottrina dei caratteri, dall'altro è un elemento di design per presentare testi o contenuti in modo intelligente, appropriato o "esteticamente accattivante". La distinzione tra microtipografia e macrotipografia non è rilevante in questo caso.

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

webfonts di base per la tipografia

Non c'è dubbio che i font possano animare e arricchire visivamente un sito web. I caratteri - i caratteri tipografici - sono elementi importanti di qualsiasi buon design. Ma su Internet, cioè nel web design, la questione della tipografia è soggetta a condizioni particolari, che vorrei qui sottolineare e che dovrebbero aiutarvi a capire meglio la questione dei font sulle pagine web.

"Una buona tipografia non cerca tutto ciò che è possibile, ma chiede ciò che è necessario".
Kurt Weidemann

I siti web spesso non sono realizzati da grafici o media designer formati, ma progettati e realizzati da chi cambia carriera. Questo può spiegare perché su molti siti anche le regole grafiche più semplici vengono ignorate. Soprattutto quando si tratta di tipografia, questo diventa subito chiaro. L'uso incontenibile di VERSALIEN poco leggibile, la mancanza di contrasto tra il colore dei caratteri e lo sfondo, nonché la struttura confusa dei testi rendono difficile la lettura da parte degli utenti.

Ma è proprio questo il senso della tipografia: la leggibilità dei testi. Altrimenti, che senso ha avere dei testi sul sito se non sono buoni e piacevoli da leggere? Si dice che ci sia una divergenza di opinioni su come i testi ben leggibili dovrebbero apparire alla fine. Non riesco a capirlo, perché nella grafica semplice, dimostrato e regole tipografiche molto utiliper creare testi di facile lettura. Tipografia.

RAIDBOXES  FREE-DEV programma

Uno di questi è il contrasto - il rapporto di colore tra il colore del carattere e lo 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 ha voluto vendere qui "aquila bianca su sfondo bianco". In questo caso aveva un testo grigio scuro che scorreva su uno sfondo grigio chiaro, quindi il contrasto era pessimo.

Questo può sembrare bello - una questione di gusto, suppongo - ma è estremamente difficile da leggere. Ho riportato questo e ho scoperto che non è un buon progetto per me se riesco a leggere il testo solo con difficoltà. E ho ancora gli occhi sani. Cosa fanno coloro che hanno problemi di vista? Anche un problema spesso sottovalutato - l'accessibilità delle parole chiave. In ogni caso, il progettista ha preso la posizione che questo era il suo progetto e lo avrebbe fatto in questo modo. Abbiamo sentito il detto: "Si può fare così, ma poi è solo merda".

Per me, questa è un'ulteriore prova di quanto siano scarse le conoscenze sulla leggibilità dei testi, cioè sulla buona tipografia. Durante la mia formazione come media designer (stampa) molti anni fa, avevo un grafico e un tipografo esperto da cui ho imparato molto.

Web design e tipografia: i requisiti speciali

webfonts di base per la tipografia

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 integriamo i font, ci occupiamo delle prestazioni del sito web.

Inoltre, occorre garantire che i testi siano ugualmente leggibili sul maggior numero possibile di dispositivi di uscita, il che rappresenta un'ulteriore sfida. Alla fine, con le possibilità del linguaggio di markup CSS si hanno così tanti modi di intervenire nella tipografia di un sito web che le cose diventano rapidamente più complesse di quanto si pensasse.

E naturalmente vogliamo avere un testo ben strutturato, che aumenti anche la leggibilità, che eviti la fatica e che abbia un effetto su Google, cioè sul ranking nel motore di ricerca. Come esempio, i tag headline H1, H2, H3 ecc., l'uso di liste e moduli di markup come grassetto/forte ed em/i, così come i marchi di paragrafo e altri utili elementi HTML.

Sono un amico dei font standard. Fammi capire bene. Voglio dire, non è proprio necessario includere font speciali personalizzati su un sito web. Come esempio del motivo per cui si dovrebbe integrare il proprio font, ecco il font CI. Si tratta di un font sviluppato appositamente per l'azienda, che ha una funzione importante nell'identità aziendale. Oppure sei davvero un bravo designer, artista o fotografo e dai molta importanza a un aspetto stravagante o molto individuale, orientato al design. Ma allora non si tratta necessariamente di grandi blocchi di testo o di informazioni scritte.

Un font CI personalizzato viene solitamente utilizzato dalle aziende più grandi che operano con il proprio reparto IT e la propria server farm. Non ci sono quindi problemi di prestazioni e l'incorporazione dei font CI è tecnicamente monitorata.

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

A volte sembra anche necessario convertire il carattere desiderato in formati adatti al web e integrarli singolarmente. Se questo poi sempre e a lungo termine funzioni perfettamente è un'altra questione. Pertanto preferisco in questo caso Font di Googleperché è veloce, sicuro e facile da usare. Ma anche questo è forse una questione di gusto.

Queste 10 regole tipografiche vi aiuteranno a

webfonts di base per la tipografia

Regole molto semplici e di alto livello: Meno è più. Considerate le abitudini di lettura della gente. Orientatevi verso siti web che presentano e imparano testi editoriali di ampio respiro.

La leggibilità dei testi è soggetta a regole certe, scientificamente fondate. Riguardano non solo la scrittura in sé, ma anche l'ambiente circostante, il contrasto, la chiarezza e la struttura dei testi, nonché la nitidezza dei loro margini.

1. dimensione del carattere

Dipende dal font e dal design di base del sito web. Si prega di notare che l'utente ha la possibilità di modificare la dimensione dei caratteri nel suo browser o smartphone in qualsiasi momento. Provare ad utilizzare 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 viene ancora letto volentieri dalla gente: Si tratta di una larghezza fino ad un massimo di circa 70 caratteri, che è una larghezza di testo standard A4 di un documento Word. Basta dare un'occhiata a SPIEGEL ONLINE and Co. per vedere quanto sono ampi i loro blocchi di testo.

3. spaziatura delle linee

Per una leggibilità ottimale, il cosiddetto "spazio tra le righe", cioè la distanza tra le singole righe di un testo - compresa l'altezza di un paragrafo - è di grande importanza. In rete, a seconda del font, un buon 140-150% di "line-height" si è dimostrato molto efficace.

4. distanza a piedi

Questa è la distanza tra le lettere, che viene manipolata dalla spaziatura delle lettere. Si dovrebbe fare molta attenzione in questo caso e utilizzare questa opzione di progettazione solo con cautela - per esempio con certi titoli. In caso di dubbio, non regolarlo.

5. contrasto

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

6. struttura

Questo significa: buono e testi semanticamente strutturati correttamente! In HTML, questo significa per esempio i tag di titolo H1/H2/H3, i segni di paragrafo, le marcature di lista, l'uso intelligente dell'evidenziazione con il grassetto, il corsivo e il colore, ecc. Ha un effetto diretto sulla leggibilità e anche sul ranking di Google.

7. un massimo di due caratteri

Spesso è sufficiente un documento per pagina web, libro o documento. In casi particolari, può funzionare anche di più, ma è necessario fare attenzione quando si utilizzano più di 2 caratteri per documento.

8. lettere maiuscole

Non utilizzare maiuscole nelle intestazioni e nel menu. Sono molto difficili da leggere. Tuttavia, se si tratta di parole singole, ad esempio in NAVIGAZIONE, è possibile utilizzare le maiuscole. Ma non scrivete in maiuscolo, ma usate i CSS con "...testo-trasformazione:maiuscolo"risolvere".

9. caratteri standard

In caso di dubbio e come ripiego, dovreste scegliere font di sistema collaudati. Arial, Verdana, Georgia sono font di sistema così ben leggibili, che hanno quasi tutti i dispositivi di uscita e sono sempre ben visualizzati.

Un ripiego in CSS è il font successore, come in BMW: "bmwTypeWebBoldAll," "Arial," "Helvetica," sans-serif; Qui Arial, Helvetica e Sans-Serif (il primo font disponibile sotto Sans-Serif) sono i ripiegamenti che vengono visualizzati quando il font di fronte ad esso ("bmwTypeWebBoldAll") non è disponibile.

10. perfezionamento professionale

Il mio suggerimento: Educati alla tipografia attraverso workshop, libri e riviste o anche un video su YouTube sull'argomento. Posso, per esempio questo video consigliare. Anche se Sven Wolfermann sconsiglia l'uso di font di sistema nella sua presentazione alla "MobileTechCon" - a differenza di me - fornisce qui molte informazioni preziose sull'argomento!

Font design con CSS: Ha senso tutto questo?

Una parola sulla progettazione o l'impostazione dei font utilizzando i CSS: Non da ultimo dall'introduzione di CSS3 Le sottili impostazioni per i font di una pagina sono a disposizione degli sviluppatori. 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 cambiare l'altezza della linea, che a volte causa problemi di altezza, distanza e posizionamento, ma anche il spaziatura delle lettere o mettere delle ombre intorno al testo ("testo-ombra"“). È brutto quello che si vede a volte.

Vi consiglio quindi di fare molta attenzione a queste impostazioni e di usare queste tecniche con cautela. Non funzionano ovunque e su piccoli display ostacolano persino il display. Poi bisogna annullare le istruzioni per il desktop tramite "Media Queries", che di nuovo costa tempo e codice. Ha davvero senso? La risposta dovrebbe essere molto chiara e precisa.

I caratteri per il Web: I font Web

webfonts di base per la tipografia

A proposito: BMW usa questo sul suo sito web come si è appena visto: famiglia di caratteri: "bmwTypeWebBoldAll", "Arial", "Helvetica", sans-serif; peso del carattere: normale; - nel testo continuo abbastanza normale Arial. Amazon utilizza Arial anche nella pagina del negozio. La mela, d'altra parte, usa ovviamente font proprio come font web. La compagnia petrolifera TEXACO utilizza i font Adobe. Solo come piccoli esempi.

Fortunatamente, ora ci sono molti fornitori di font web che funzionano bene e sono di solito facili da integrare. Purtroppo questi "web fonts" sono di solito a pagamento, anche se i prezzi variano molto. A titolo di esempio, inoltre Font di Google...sarà menzionato in seguito: Font Adobe (tipo kit), Webtype, Adobe Edge Web Fonts e molti altri - una questione di gusti.

Il vantaggio di questi servizi è ovvio: non vi preoccupate della licenza (vedi sotto "Attenzione: Licenze!"), i font funzionano, e c'è un aiuto o istruzioni per incorporare i font sul vostro sito web (ad es. supporto o forum). Le tariffe sono spesso espandibili e si ha una certa scelta di font interessanti.

Il malinteso con Google Font

Quando nel maggio 2018 è stato introdotto il cosiddetto obbligatorio RGPDper tutti, la comunità della rete ha temuto di utilizzare Font di Google nel panico. Temevano che l'uso del Google Web FontsGoogle come "polpo dei dati", contro il quale questa legislazione è stata indirizzata - non sono conformi alle leggi sulla protezione dei dati e si rischierebbe quindi di incorrere in costosi avvertimenti.

Questo timore ancora diffuso illumina la grande confusione che purtroppo continua ad esistere intorno al RGPD. a beneficio degli avvocati e degli studi legali del web, naturalmente. Se uno deve essere accusato di usare Google Analytics con Google ha completato l'elaborazione dell'ordine e segnala l'uso dei font - e in caso di dubbio cookie - nella politica sulla privacy, il problema è fuori discussione.

Se hai ancora paura, puoi prendere tutti i Integrare i font di Google a livello localeovvero scaricare i Web Fonts di Google e salvarli nel proprio spazio web.

Inoltre, la performance è stata ripetutamente denunciata, il che è stato presumibilmente così male quando i font sono stati utilizzati tramite Google di ricarica. Non viene menzionato il fatto che Google ha un'architettura di server veloce ed estremamente stabile e che ci sono ancora dei ripiegamenti (vedi sopra). Inoltre, si caricano i font da un URL diverso, cosa che può essere fatta contemporaneamente al caricamento dei file dal proprio server. Ma ancora una volta si è dipendenti da Google.

ebook: Misurate le prestazioni del vostro sito come un professionista

Attenzione: Tempi di caricamento!

È abbastanza semplice. I web font integrati esternamente possono aumentare il tempo di caricamento della pagina. Il codice necessario per integrare nella pagina anche i propri font. Solo i font standard, i font di sistema sui computer degli utenti e sugli smartphone, non richiedono tempi di caricamento, perché non vengono caricati tramite un server, non via Internet.

O per dirla in un altro modo: se il vostro sito ha bisogno di tempi di caricamento veloci, forse non ha l'hosting appropriato alle spalle e l'azienda non ha un font CI che deve assolutamente essere integrato, io opterei sempre per lo standard. Così sui font di sistema, come ha fatto Amazon con Arial lo fa. Ha senso.

Naturalmente non si tratta dei kilobyte dei font da caricare. Si tratta del fatto che questi font sono in cima, quindi devono essere scaricati in aggiunta e che il server che dovrebbe consegnarli potrebbe essere debole al momento. Questo non ha un bell'aspetto ed è... evitabile.

Attenzione: licenze!

Ciò che deve essere considerato in ogni caso sono le licenze per i font utilizzati. Se voi Font di Google o i font di sistema, che vengono caricati dal computer dell'utente, si va sul sicuro. Per tutti gli altri font che utilizzate sul vostro sito web, dovete assicurarvi di avere la licenza - e questo può diventare rapidamente abbastanza costoso - per utilizzarli sul vostro sito web, o se si tratta di un carattere libero che a volte causa altre preoccupazioni, per esempio quando pensiamo alle umlaut tedesche e all'Eszett (ß).

Per evitare tutti questi problemi, ho usato font di sistema o Font di Google. Se il cliente vuole assolutamente il proprio font, lo sforzo per questo deve essere generosamente incluso nel calcolo, perché l'integrazione di font esterni nel sito web può talvolta causare qualche problema. Per esempio, con le istruzioni dei CSS e qui, per esempio, che trovo sempre veramente pessimo, quando cerco il nome del font corretto per poter controllare il font per visualizzare correttamente i tag HTML.

Integrare i propri font

webfonts di base per la tipografia

Con i font web e/o i propri font, che avete reso utilizzabili per il vostro sito tramite uno strumento, potete ottenere rapidamente una serie di problemi per il vostro sito. I seguenti fenomeni si verificano spesso:

  • Font tremolante quando la pagina si carica (non è insolito, a volte si vede un font diverso fino a quando il CSS non lo sovrascrive con il font web.
  • Tempi di carico più lunghi attraverso caratteri molto complessi (piuttosto rari).
  • Più comuni sono sfocatura della scritturaDistorsione dovuta a rendering difettoso (su alcuni sistemi).

Per visualizzare il font desiderato sul maggior numero possibile di dispositivi di uscita, sono necessarie diverse varianti dello stesso font. "TTF" è chiaro e ben noto, ma servono anche "EOT" e le due varianti "WOFF". Questo è essenziale se si desidera includere i propri font nella propria pagina. È possibile scaricare questi formati gratuitamente con il generatore di font web generato. Poi si caricano tutti i formati del font in una directory sul server e li si include nel proprio 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'),
      formato url('/deinfont.ttf')('ttf'),
      formato url('/deinfont.eot')('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-faceche integra la vostra scrittura, quanto è complessa - e quindi quanto è incline agli errori.

Poi potete usarli nel vostro codice CSS e assegnarli a classi e ID. In questo modo si possono ottenere alcuni errori che non voglio affrontare qui. Come ho detto, raccomando font standard o di sistema o Font di Googleche si inserisce semplicemente nell'intestazione del sito web tramite il file collegato:

Tipografia e presentazione mobile

webfonts di base per la tipografia

Questo aspetto è generalmente trascurato. Dal mio punto di vista non è assolutamente necessario caricare un font speciale su un piccolo display o uno smartphone. E i ripiegamenti, i font di sistema dei telefoni cellulari? Se devo creare una pagina mobile o ottimizzare una pagina mobile, la prima cosa che risparmio è naturalmente il download di un font web o il mio font personale a causa del tempo di caricamento.

Anche se si tratta di una decisione strategica, che naturalmente deve essere discussa con il cliente, non vedo un solo argomento a favore di un font web o di un font separato per la presentazione mobile.

Naturalmente, non tutti i font di sistema disponibili per il desktop sono disponibili sullo smartphone. Ma dal mio punto di vista, non importa se si dispone di questo o quel font per il sistema Android. Si tratta di informazioni veloci 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, ovvero la velocità di caricamento e il design, dobbiamo concludere che un font separato per il display mobile è superfluo. Da un lato, il carattere influisce sulla velocità di caricamento della pagina mobile, che è particolarmente importante quando la pagina viene richiamata alla fermata dell'autobus. D'altra parte, abbiamo (si spera) ridotto all'essenziale il contenuto e il design della versione mobile del sito web proprio per questi motivi. Perché caricare un sofisticato font web?

L'essenziale è sempre la leggibilità o quello che vogliamo ottenere: impartire conoscenze, intrattenimento letterario, acquistare un prodotto, stabilire un contatto, ordinare una newsletter o vedere l'indirizzo. E per questo, credo, non c'è bisogno di un font speciale o di un web font.

Web Secure Font

In ogni caso, dovreste verificare se uno dei font del sistema è adatto al vostro progetto. Una raccolta completa delle cosiddette istruzioni CSS sicure per i font di sistema o i font sicuri per il web è disponibile su www.cssfontstack.com.

Cosa sono i font sicuri per il web? I font Web-safe sono font preinstallati in molti sistemi operativi. Sebbene gli stessi font non siano installati su tutti i sistemi, è possibile utilizzare un blocco di impostazioni CSS sicuro per il web per selezionare più font che sembrano simili e che sono installati sui diversi sistemi che si desidera supportare. A partire da CSS3, se si desidera utilizzare font diversi da quelli preinstallati, è possibile utilizzare il comando Impostazioni per questi font web uso.

Conclusione

Dovreste considerare molto attentamente se un font di sistema fa lo stesso o anche meglio di un font web o del vostro font. Font consolidati come Verdana, Arial, Trebuchet, Georgia, Times New Roman Tra le altre cose, si possono usare senza esitazione, perché sono sempre facili da leggere. E non abbiamo nemmeno parlato della qualità dei testi, che naturalmente gioca un ruolo decisivo. Ma questa è una questione diversa. Non sottovalutare il tema della tipografia sui siti web. Considerate gli aspetti tecnici, come il tempo di caricamento o le umlaut dei font, ma anche l'usabilità del vostro progetto tipografico, cioè la leggibilità, il contrasto e l'altezza delle linee.

Pensate attentamente se volete usare un font proprio o 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 Font di Google può essere utilizzato. Oppure se si vuole davvero incorporare i font manualmente tramite CSS e caricarli sul server in tutti i formati in anticipo. I font standard che l'utente ha sul suo computer o smartphone e che vengono caricati da lì sono collaudati e non necessitano di alcun tempo di caricamento. Questo è tanto 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 a WordPress -Theme Google ha già dei font a bordo, naturalmente li uso. Perché altrimenti devo svitare o sovrascrivere il tutto. Questo non è molto utile.

Se non è chiaro al identità aziendale di proprietà di un'azienda è un espediente di carattere proprio. 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 non lo fa. Con i font di sistema, con i font standard è possibile creare e riempire meravigliosi design e grandi siti web. Usarli è il modo più sicuro e questo rimarrà tale per un bel po' di tempo. Forse è una questione di gusto, ma forse questo è l'approccio più sensato al tema dei font sui siti web.

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

Mark Max Henckel - Web designer di Amburgo. Media designer formato (stampa), lavora come web designer dal 2000. Prima su mobile.de, dal 2003 lavora in proprio. Dal 2005 blogger su diversi argomenti su diversi blog. Come freelance dal 2007 e dal 2008 presso SPIEGEL ONLINE, ha partecipato al lancio di eintages.de all'interfaccia tra la programmazione e la redazione. Più tardi presso il canale Quality Channel di SPIEGEL (Spiegel QC/Spiegel Media). Libero professionista per libri.de e varie agenzie di grafica e informatica. Dal 2008 è specializzata in WordPress .

Articoli correlati

Commenti su questo articolo

Scrivi un commento

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