Come scegliere le dimensioni dei font sui siti web

Qual è la dimensione giusta dei caratteri su un sito web? Come scegliere le dimensioni dei font sul proprio sito o su quello su cui si sta progettando? È vero che basta mettere testi di corpo 16 pixel e tutto va bene?

Questo articolo vuole provare ad essere una risposta attuale a queste domande e a questi dubbi.

Scegliere le dimensioni del testo, il body text, di un sito web è infatti uno degli aspetti più importanti dell’intera progettazione del sito stesso. Sia che si tratti di decidere che dimensione devono avere i caratteri negli articoli del tuo blog o della tua homepage o del sito o template a cui stai lavorando come web designer.

In questo articolo ti parlerò del perché la maggior parte dei siti web ha testi troppo piccoli, di quali sono i benefici di alzare gli standard delle dimensioni dei font e di come gestire e ottimizzare le dimensioni dei caratteri all’interno del sito. Lo farò attraverso esempi e consigli pratici, andando più nel dettaglio possibile.

Se sei nuovo qui su Grafigata, ti consiglio di iscriverti alla newsletter, per avere accesso ai migliori contenuti e risorsedi graphic design:

E  ora cominciamo con l’articolo, sei pronto?

Via!

La maggior parte dei siti web ha testi troppo piccoli

i-testi-sono-troppo-piccoliPrima di scrivere questo articolo ho girovagato su centinaia di siti web, quotidiani online, blog, portfolio, aggregatori e altro, cercando di farmi una personalissima statistica di quanto siano grandi i caratteri dei testi su questi siti.

La maggior parte dei siti web in circolazione ha font la cui dimensione del corpo di testo è impostata attorno ai 14/16px, alcuni anche meno, pochi attorno ai 18px e ancora meno sopra i 20px.

Questo è un problema.

Internet è uno strumento in cui il ruolo principale lo svolge il contenuto. Il contenuto può essere un’immagine, può essere un video o, come nella maggior parte dei casi, può essere un testo.

Nonostante molte persone, spesso, leggano soltanto titoli e sottotitoli di articoli e contenuti nei siti web, il testo è l’elemento più importante all’interno di un sito web.

È l’elemento più importante perché ne è il contenuto, è quello che l’utente, il visitatore, sta cercando. Si clicca su un articolo per leggerne il testo nella maggior parte dei casi.

Quindi perché limitarne l’efficacia presentandolo in dimensioni troppo piccole? Perché costringere le persone ad avvicinare il viso allo schermo (o a zoommare) per farle leggere meglio?

Fino a poco tempo fa anche questo sito, Grafigata, aveva un corpo di carattere troppo piccolo. Dopo alcuni esperimenti ho deciso di aumentare sensibilmente la dimensione del testo di ben 4px per il body text e di 2/3px per i vari titoli (h1, h2, h3, ecc).

Questo ti permette, secondo gli studi e gli esperimenti che ho fatto, di avere una migliore esperienza utente rispetto a prima e forse rispetto a moltissimi altri siti sparsi per la rete.

Ma non ho creato Grafigata.com per fare la gara a chi c’ha il sitarello più figo. L’ho creato per condividere conoscenze. E quindi in questo articolo vado ad analizzare ogni singolo aspetto relativo alle dimensioni dei testi online.

Andiamo a capire quindi le motivazioni dietro questa scelta di aumentare le dimensioni dei testi. Cerchiamo di comprendere, prima di tutto, quando un testo è troppo piccolo e perché i siti web hanno testi mediamente così piccoli.

Quando è che un testo è troppo piccolo?

questo-testo-e-troppo-piccoloSostanzialmente, quando si fa fatica a leggere. E fin qui…

Come detto prima, la maggior parte dei siti ha dimensioni comprese tra i 14 e i 18 px (non pt, che è un discorso diverso come ti spiego tra poco) mentre pochissimi hanno 20px o più.

Prima di imbattermi nella giustissima critica che potresti farmi, voglio chiarire fin dall’inizio che si, testi di dimensioni “standard” per il web come 16px sono sicuramente leggibili facilmente dalla giusta distanza. Non si parla di drammatiche difficoltà di lettura, ci mancherebbe.

Dimensioni di questo tipo (o anche più piccole) sono perfette per alcuni tipi di utilizzo online, come ad esempio didascalie o altri elementi di interfacce grafiche.

Nei testi però, specialmente se lunghi o complessi, è importante che la leggibilità del testo sia messa al primo posto. Anche qui, però, puoi tranquillamente dirmi che su un cellulare testi di questo tipo si possono leggere tranquillamente, senza problemi. Infatti il grosso problema dei testi di dimensioni “troppo piccole” si riscontra da computer, specialmente quelli con schermi grossi o ad alta risoluzione.

Un testo online deve essere letto il più facilmente possibile da qualsiasi dispositivo. E un testo di dimensioni piccole su schermi grossi non facilità sicuramente la lettura.

Ok ma se c’è questo problema, perché si usano testi così piccoli? Perché la maggior parte dei siti web è progettata in questo modo?

Insomma…

Perché non si usano dimensioni più grandi?

Principalmente si tratta di scelte legate al passato, a quello che c’è sempre stato. Ci si è abituati a determinati standard progettuali senza adattarsi ai cambiamenti delle tecnologie. Questo è insomma uno di quei casi in cui “si è sempre fatto così” porta ad un cattivo design.

Vediamo quindi i motivi principali perché non si usano dimensioni di testo più grandi

Primo motivo: la storia delle dimensioni dei testi

Nell’epoca pre-digitale, nell’ambito della grafica solamente stampata, lo standard per le dimensioni era di 12pt. Si esatto pt, cioè punti tipografici, non pixel. Un punto tipografico, come spiego bene nel corso Font-Ninja, è l’unità di misura per le dimensioni dei testi. Ne esistono diverse tipologie (il punto europeo, quello americano) ma variano tra loro davvero di pochissimo, quindi per comodità qui in questo articolo dirò solamente “punto tipografico”. Anzi, “pt”.

Quel che ci interessa in questo articolo è che negli anni 90 avvennero le prime conversioni standard tra pt e px. Nei primi schermi digitali, la conversione era piuttosto semplice. Sui primi Mac, poiché avevano basse risoluzioni, 12pt era uguale a 12px, su risoluzione di 72 ppi, mentre sui computer Microsoft, 12pt era uguale a 16px su 96ppi.

Durante gli anni ’90 e 2000 si continuò a mantenere gli standard derivanti dalla tipografia su carta anche nel digitale e si continuò a preferire il mantenimento dello standard del 12pt/12px. Siti web con testi di 16px erano davvero pochi e considerati quasi amatoriali.

Negli ultimi anni qualcosa è però cambiato. C’è stato l’avvento da un lato del responsive web design, ovvero la costruzione di siti web che si adattano a tutti gli schermi, dai 27 pollici Full HD agli schermi degli smartphone, e dall’altro lato, soprattutto, di schermi con risoluzioni incredibilmente più elevate rispetto a prima. Lo schermo di un qualsiasi smartphone oggi in circolazione è infinitamente migliore rispetto a quello di un monitor anni ’90.

Questo ha cambiato tutto. Testi di dimensione 12px hanno iniziato a diventare illeggibili su schermi ad alta risoluzione. Addirittura 16px sta iniziando ad essere considerato piccolo e difficile da leggere!

Secondo motivo: si pensa che dimensioni grosse siano “brutte”

dimensioni-di-testo-grosso-uguale-brutteL’ho accennato poco fa ed è strettamente legato al motivo precedente. I designers degli anni ’90, quelli che progettavano i siti fatti bene, avevano come standard i 12px. Quindi siti web con testi più grandi apparivano quasi amatoriali, il classico sito fatto da un ragazzino inesperto o che conosceva poco le regole di design del web dell’epoca.

Questo concetto, seppur mutato pian piano verso i 16px, ancora esiste e permea gran parte del mondo dei progettisti.

C’è questo pregiudizio secondo cui testi più grossi siano infantili, poco seri e non professionali.

Quello che questi progettisti non capiscono è che non è la dimensione del testo a suscitare o meno sensazioni di scarsa serietà o di mancanza di buon design, è il carattere tipografico a farlo. Sono le sue caratteristiche progettuali, il kerning, la gestione dell’interlinea, l’umore del font a suscitare queste sensazioni. Ne avevo parlato nell’articolo su come scegliere il font giusto!

Terzo motivo: “tanto si può zoommare no?”

Certo. Sui browser si può zoommare, è vero. Che è, in effetti, quello che faccio quando vado a finire in siti web (come ad esempio Wikipedia) con testi piccoli, fitti e faticosissimi da leggere.

Però non è sicuramente una cosa su cui un progettista, un designer, dovrebbe fare affidamento no?

Prima di tutto perché non tutti gli utenti sono a conoscenza dello strumento zoom o hanno voglia di usarlo. Anzi, solitamente le persone con problemi di vista sono anziane e conoscono ancora meno di noi giovani gli strumenti necessari anche solo a fare un semplice zoom. Secondo, perché facendo zoom si rischia di “scombinare” il layout del sito.

Obiettivo principale del designer di siti web è offrire all’utente la miglior esperienza possibile senza che lui debba fare niente, neanche schiacciare Ctrl+ per zoommare un po’.

Quarto motivo: si vuole evitare lo scrolling

si-vuole-evitare-scrolling“Lo scrolling lo faccio solo in bagno quando… [censured]”

Spesso c’è questa idea, incredibilmente errata, per cui evitare lo scrolling, cioè lo scorrere con la rotellina del mouse, sia la cosa migliore da fare per migliorare l’esperienza utente.

Si progettano intere pagine web per fare in modo che siano il più brevi possibile in modo tale da non dover “costringere” l’utente a scorrere con la rotellina.

Il problema è che quando si ha a che fare con un sito progettato con un preconcetto errato come questo, ci si ritrova a vedere il testo schiacciato all’interno di una pagina o addirittura di non trovare le informazioni che si stanno cercando perché “non sia mai! L’utente non deve fare scrolling!”.

Quello che progettisti di questo tipo non capiscono è che lo scrolling è un gesto naturale di chi naviga in internet, a differenza dello zoom. Chi visita un sito web dal computer è già pronto con il mouse in mano e col dito sulla rotellina, pronto a scorrere verso il basso per leggere il contenuto. Chi visita da smartphone, appena visita qualunque contenuto, è subito pronto con il dito sullo schermo a scorrere verso il basso.

Cavolo, ci sono intere generazioni come la mia e le successive, cresciute con siti e app come Facebook e Instagram in cui lo scrolling è il metodo principale di navigazione!

Perché evitarlo e costringere il testo in spazi e dimensioni ridotte?

 

Questi erano i motivi principali per cui esistono ancora numerosi siti con dimensioni di testo così piccole. Come hai visto sono motivi facilmente contestabili e legati a concetti superati e non più validi nel web contemporaneo.

Adesso ti voglio parlare dei motivi per cui i testi dovrebbero, invece, essere più grossi, poi ti dirò quanto più grossi e infine ti farò alcuni esempi e casi studio. Ma prima, che ne dici di lasciarmi un piccolo +1 in cambio di tutte le informazioni contenute in questo articolo? Mi faresti davvero contento! 🙂

Grazie mille! E ora andiamo avanti! 😉

Perché usare dimensioni di testo più grandi

Ok, andiamo ad analizzare meglio come mai usare testi più grandi anche solo di pochi pixel comporta un risultato estetico e di usabilità incredibilmente migliore. Anche semplicemente portando il testo principale da 16px a 18px o, ancora meglio, a 20px, porta un cambiamento profondo dell’impatto e dell’usabilità dell’intero sito web.

Vediamo perché.

Si legge meglio anche da distante

Che può sembrare una banalità incredibile ma in realtà è anche questo un aspetto collegato al diverso utilizzo di internet degli ultimi anni. Internet si sta evolvendo e con esso i device con cui vi accediamo. Allo stesso modo cambiano le abitudini delle persone quando usano Internet.

Ad esempio, sta diventando sempre più diffuso (seppur di nicchia) l’accesso ad Internet tramite le smart TV. Dietro la progettazione delle grafiche per le televisioni ci sono dei veri e propri studi analitici su quali siano le distanze da cui osservare lo schermo in base alla dimensione dello stesso (come descritto in questa voce della Wikipedia inglese).

Laddove lo schermo di un cellulare diventa una vera e propria protesi del proprio braccio quando lo usiamo per navigare su Internet, quindi con lo schermo piuttosto vicino al viso, chi utilizza schermi grossi per navigare, ha bisogno di testi che siano facilmente leggibili anche da più distante.

Immaginatevi un sito web con un testo in 12 px su uno schermo QHD di 27 pollici. Come pensate che sarà l’esperienza utente? Pessima, esatto. Zoommando, il testo andrà ad occupare tutta la larghezza dello schermo (o gran parte di essa), rendendo faticoso leggere linea per linea. La soluzione temporanea è aumentare le dimensioni dei caratteri su tutto il browser o su tutto il computer, ma così si dovrebbe andare a modificare le dimensioni ogni volta che si cambia sito.

Invece, un sito web con, ad esempio, un testo in 20px, avrà una buona leggibilità anche da distante, permettendo la lettura su qualsiasi schermo senza occuparne tutta la larghezza zoommando su uno schermo grosso.

Migliora la readability (e non solo la legibility)

In italiano entrambe queste 2 parole, readability e legibility, si dicono “leggibilità” ma, in inglese, hanno una sfumatura di significato estremamente importante nel mondo della tipografia. Ne parlo approfonditamente sia in questo articolo che nel corso Font-Ninja, ma i due significati si possono riassumere in questo modo: readability = leggibilità di un testo, legibility = leggibilità del carattere.

Quindi, la legibility sono quelle caratteristiche che rendono un singolo carattere tipografico più leggibile rispetto ad un altro (x-height, contrasto, ecc), mentre la readability è quell’insieme di proprietà che rendono facilmente leggibile un testo. Quindi kerning, gestione dell’interlinea, la buona divisione dei paragrafi e la dimensione del testo.

Migliorando la readability faremo in modo che l’utente del sito web legga più facilmente il contenuto. Semplice.

Migliora l’esperienza utente

migliora-esperienza-utenteAumentare la dimensione del corpo del testo di qualche pixel (vediamo dopo, nella terza parte dell’articolo, di quanto) migliora anche la usability, o usabilità, e quindi anche l’esperienza utente.

Se l’utente fatica a leggere il contenuto di una pagina, la sua esperienza all’interno del sito web sarà peggiore.

I benefici di una migliore esperienza utente dovuti ad una migliore leggibilità sono molteplici. L’utente eviterà di visitare altri siti per trovare informazioni utili, leggerà il contenuto e probabilmente si ricorderà più facilmente del sito visitato.

È più figo, moderno e d’impatto

Il web design sta cambiando. E i siti web che curano l’aspetto tipografico anche attraverso un testo più grosso sono sicuramente più di impatto.

Garantiscono un migliore impatto visivo ed una maggiore connessione emotiva, come dimostra questo studio scientifico.

Ma i siti con una cura degli aspetti tipografici non sono solamente più di impatto, danno anche l’idea di essere più moderni… Più fighi! 🙂

 

So che prima non lo hai messo il +1, ti ho beccato! Dai, puoi rimediare adesso e farmi un grande favore:

Grazie! E ora andiamo all’aspetto pratico: come usare le dimensioni di testo sul web. Quanto devono essere grossi i testi, come migliorare la gestione dei test su un sito già esistente?

Andiamo nel dettaglio.

Come ottimizzare le dimensioni dei font su un sito web

Se progetti a un sito web, o lavori al tuo portfolio personale o al tuo blog, uno degli aspetti che hai bisogno di considerare fin da subito come cruciale nella tua progettazione è il testo. Quello che in gergo webdesignesco viene chiamato “body text”.

Come hai visto in questo articolo, è un aspetto molto importante all’interno di un sito web e va curato bene fin dall’inizio.

Vediamo quindi alcuni consigli pratici per ottimizzare la gestione dei font su un sito web e, in particolare, usare le dimensioni giuste.

Usa font che scalano bene

roboto-font-per-testi-webLa scelta del font, in tutti gli ambiti della grafica, è di fondamentale importanza. Tanto che io stesso, qui su Grafigata, ho scritto a riguardo 2 mega-articoli: il primo è su come scegliere un font e il secondo è su come abbinarne più di uno.

Nell’ambito della scelta di un font per un sito web, gli aspetti più importanti da considerare nella scelta sono 2.

  • Il primo, e ne abbiamo già parlato, è la leggibilità del font (legibility+readability).
  • Il secondo è la scalabilità dimensionale di un font.

Spieghiamo un po’ meglio il secondo punto và!

Un font, quando scelto per un sito web, deve scalare bene da dimensioni piccole a dimensioni grandi. Cioè, in pratica, deve apparire ben fatto sia in 12px che in 24px.

Ci sono font come il Georgia e l’Arial (due classici della tipografia digitale), che sono stati pensati per i 12/14px e che in dimensioni oltre i 20px tendono ad apparire goffi e fastidiosi.

A seconda del tipo di effetto che vuoi trasmettere, potrai scegliere per un sito web sia font serif (con grazie) che font sans-serif (senza grazie o bastoni).

Tra i font sans-serif che scalano bene e che puoi usare per il tuo sito web ci sono alcuni dei Google Font come il Roboto, il Lato (che uso qui su Grafigata) o l’Open Sans. Ma anche altri font come il Futura o l’Atlas Grotesk.

Tra i font serif, invece, si possono citare i Google Font Merriweather e PT Serif sicuramente, ad esempio.

Prendi come nuovo standard i 20px

E questo non vuol dire che tutti i body text di tutti i siti web d’ora in poi devono essere di 20px.

No, vuol dire che è bene ragionare, come punto di partenza, attorno a questo numero.

Ci sono font che hanno una x-height molto alta e che risultano quindi più grossi di altri (ad esempio, il Lato che stai leggendo o il Verdana). Font come questi non possono essere visualizzati a 22px perché risulterebbe eccessivamente grandi.

Qui su Grafigata ho scelto di scrivere in Lato 20 px andando… ad occhio.

Eh si, perché non puoi basare scelte di design soltanto su statistiche, misure precise e calcoli matematici. Il design di un sito web deve essere piacevole, non “perfetto”.

Quindi il consiglio è: parti da 20px e prova a vedere come si comporta il testo aumentando o diminuendo la dimensione del corpo. Il tuo occhio saprà aiutarti a capire quando si tratta di testi davvero troppo grossi o troppo piccoli.

E le dimensioni dei titoli??

Partendo da 20px per la dimensione del testo, potrai anche ad andare a definire le dimensioni dei vari titoli e sottotitoli h1, h2, h3 ecc in modo graduale.

Spesso si sceglie un diverso font per i titoli rispetto al corpo di testo. Esistono infatti dei font progettati esplicitamente per essere mostrati in grandi dimensioni, i cosiddetti font “display”, come ad esempio l’Akzidenz Grotesk, uno dei font migliori che siano mai stati creati (ho un debole per questo font, si vede?).

Le dimensioni dei titoli possono variare moltissimo da sito a sito a seconda del tipo di necessità e di utilizzo. Ma se parti da almeno 20 px sicuramente farai in modo che si leggano bene 😉

Progetta diverse dimensioni per il mobile

dimensioni-di-testo-nei-cellulariHo accennato più volte questo aspetto nel corso dell’articolo ma ora vado ad approfondire meglio il discorso.

Il 90% di quello che ho scritto finora, vale per gli schermi grossi.

Diciamo da quelli con una larghezza dai 768px in su. Quindi monitor, schermi di portatili, smart TV e tablet in orizzontale.

Per tablet e smartphone il discorso è un pochino diverso. Solitamente, infatti, quando si utilizzano tablet o cellulari, li si utilizza a distanza molto ravvicinata al viso. Si riesce quindi a leggere meglio e a vedere più dettagli.

È ovvio quindi che dimensioni di testo oltre i 20px creano 2 problemi su mobile:

  1. Occupano troppo spazio sullo schermo
  2. Risultano fastidiose ed eccessivamente grosse

Il consiglio quindi è: su mobile e tablet, riduci leggermente le dimensioni dei testi.

Ad esempio qui su Grafigata ho scelto di ridurre da 20px a 18px la dimensione dei caratteri su schermi al di sotto dei 768px.

Per farlo si può usare la classe @media nel proprio foglio di stile CSS, come ho fatto in questo caso:


@media screen and (min-width: 768px) {
body{
font-family: 'Lato', sans-serif;
font-size: 20px;
}

}
@media screen and (max-width: 768px) {
body{
font-family: 'Lato', sans-serif;
font-size: 18px;
}
}

Questa parte di codice, fa si che il testo cambi di dimensione in base alla grandezza del device da cui si sta accedendo. Puoi verificare questo comportamento ridimensionando la finestra del browser da cui stai leggendo questo articolo, se lo stai leggendo da computer.

Gestisci bene interlinea e lunghezza della riga

La dimensione (del testo) non è tutto, dipende come lo usi. Ahemm.

Quando lavori con un testo, qualunque esso sia, devi stare attento a gestirne bene anche gli spazi. Sia il kerning che il tracking ma anche la gestione dell’interlinea (leading) e il calcolo di una buona lunghezza della riga.

Presupponendo che tu abbia scelto un buon font di qualità che non abbia bisogno di modifiche nel kerning e nel tracking, andiamo a vedere gli altri due aspetti.

La gestione dell’interlinea è fondamentale per creare un testo che respiri bene mentre il calcolo di una buona lunghezza della riga fa si che il lettore non perda il segno nel leggere una riga troppo lunga (e che non si metta a leggere tenendo il segno con il dito sullo schermo).

In questo articolo, vengono effettuati tutta una serie di calcoli per determinare i rapporti dimensionali ideali tra gli elementi, ma quello che importa è che l‘interlinea all’interno di un paragrafo sia tale da far respirare il testo (qui su Grafigata è ad esempio impostata ad 1,58) e che la lunghezza della riga sia compresa tra un minimo di 55/60 caratteri ad un massimo di 85/90 (che è già tanto) per favorire una buona leggibilità del testo.

Il resto, come al solito… va ad occhio!

Siti che usano dimensioni di testo in modo perfetto

Negli ultimi anni si sono visti svariati pionieri nell’ambito della tipografia digitale aumentare pian piano le dimensioni dei caratteri sui propri siti web.

E se all’inizio era una cosa fatta solo da web designer visionari, pian piano si sono uniti alla causa un grosso numero di siti web autorevoli e famosi.

In Italia, come spesso succede, è raro trovare siti che stiano al passo con i cambiamenti in corso per cui mi rivolgo oltreoceano per trovare esempi di tipografia online usata molto bene.

Su tutti Medium, la piattaforma della pubblicazione online, i cui designer sono stati bravissimi a creare un sito in cui  non solo leggere contenuti è piacevole, ma in cui si ha voglia di leggerne ancora. Merito dei contenuti di qualità, certo, ma la qualità del design ha contribuito molto.

Medium usa un font proprietario chiamato Medium Content Serif, di dimensioni 21px, mentre per i titoli usa un Sans-Serif, sempre proprietario, con dimensioni fino a 40px. Le dimensioni dei testi cambiano in modo fluido a seconda delle dimensioni in pixel del dispositivo, stessa strategia adottata qui su G!.

medium-font-size

Un altro sito Americano con un ottima attenzione all’evolversi delle necessità degli utenti è il Washington Post, capace di avere una buonissima scalabilità dei testi in base agli schermi utilizzati con dimensioni di 20px su schermi grossi e 18px su quelli più piccoli..

font-washington-postSiti che dovrebbero usare dimensioni di testo più grosse

Qui potrei risolvere la cosa dicendo: tutti. Ma voglio fare 2 piccoli casi studio di come migliorerebbero i contenuti di due famosi siti web con un semplice aumento della dimensione dei caratteri: La Repubblica e Wikipedia.

La Repubblica ha attualmente corpi di testo in Arial, 16px. Se come misura può essere accettabile su mobile, su schermi di dimensioni leggermente più grossi inizia a diventare una dimensione decisamente troppo piccola.

Ecco come sarebbe Repubblica con un Arial in dimensioni 19px, molto meglio:

font-la-repubblica-piu-grossoL’esempio qui sopra si comprende sicuramente meglio da computer che da mobile.

Il secondo esempio, ancora più fastidioso, è quello di Wikipedia in cui io tutte le volte in cui ci vado, la prima cosa che faccio è schiacciare 2 o 3 volte “Ctrl + tasto più”. Infatti usa di default l’impostazione sans-serif (che carica il font sans-serif del browser) di dimensioni 14px.

Un altro problema di Wikipedia è che, su schermi grossi, va ad occupare tutta la larghezza dello schermo, rendendo praticamente impossibile la lettura agevole.

Dovrebbero quindi introdurre dei limiti di larghezza e una dimensione del carattere di almeno 18px per cercare di migliorare l’esperienza utente.

Conclusioni

Gestire la tipografia su un sito web può apparire complicato e spesso si finisce a guardare “quello che hanno sempre fatto tutti” e ad attenersi agli standard. Standard che però sono ormai vecchi e superati dalle nuove esigenze degli utenti.

Quindi spero che con questo articolo io sia riuscito a darti alcuni consigli utili e pratici per il tuo sito web o blog.

Se l’articolo ti è piaciuto condividilo o lascia un commento!

Alla prossima,

Lorenzo.

Fonti, risorse e approfondimenti

Prima di tutto, ti rimando agli altri articoli relativi a font e tipografia che ho scritto su Grafigata, in caso tu voglia approfondire:

Ecco alcuni articoli che mi sono serviti come base per scrivere questo articolo o come approfondimento per comprendere meglio alcuni aspetti:

  • Grazie Lorenzo, mi è piaciuto questo articolo!! Anche io sono una sostenitrice dei font dai 16px in su! Ovviamente considerando sempre il contesto.
    Bene anche che hai parlato delle versioni tablet e mobile, dove il font deve essere leggermente ridotto, io in genere riduco di un paio di valori.
    Un consiglio per te: quando metti dei link, come per esempio in questo articolo il link a “Medium”perchè non fai aprire il sito in bianca piuttosto che caricarlo sulla stessa pagina? Almeno per me è molto fastidioso quando leggo un articolo e cliccando su un link di approfondimento mi si apre sopra la stessa pagina. In queso modo se voglio continuare a leggere il tuo articolo devo tornare indietro con la freccetta del browser. E non è bello anche perché in un certo senso cacci via l’utente dal tuo sito. E’ da un pò che te lo volevo dire!!! 🙂
    Ciao un abbraccio e buon lavoro.
    Mara

    • Ciao Mara!
      Hai assolutamente ragione: di solito metto il _blank per i link esterni mentre lascio la navigazione standard per i link interni ad altri articoli (quasi sempre).
      In questo caso mi sono dimenticato quindi grazie per avermelo fatto notare 🙂 (e ora ho corretto)

      Ad ogni modo ti ringrazio molto per i complimenti sull’articolo! 🙂
      L.

  • Paolo t.

    Un articolo davvero ottimo!

    E mi piace tanto queste nuove modifiche grafiche qui su Grafigata! Tutto molto più bello da visualizzare

  • Marc Sellier

    Complimenti per l’articolo perchè prende in considerazione tantissimi aspetti.
    Sono giorni che lavoro sul mio sito http://www.programmitv.com cercando di migliorare l’esperienza utente. Lo step da implementare oggi sarà proprio quello di aumentare la grandezza del font sperando non vada ad intaccare l’aspetto generico del sito. Ma dopo tutto, come hai detto tu stesso, si tratta di provare e riprovare fino ad avere un aspetto piacevole su tutto il sito.

    Se hai qualche suggerimento da darmi, fa pure 😉

    Ciao, buon lavoro
    Marc

    • Ciao Marc,
      grazie per seguirmi e per questo commento. Credo che il tuo sito sia una buona idea ma forse c’è bisogno di un po’ più di lavoro per rendere il tutto più armonioso e facile da visitare. Ora genera un po’ un effetto confusionario, non pensi?

      • Marc Sellier

        ah cacchio! Se lo dici tu allora comincio a preoccuparmi!
        Puoi darmi qualche dritta utile? Perchè dici che il sito non risulta armonioso e confusionario?

        • L’organizzazione dei contenuti in modo particolare è un po’ disordinata. Troppo spazio dato ai banner pubblicitario in alto, secondo me, prima di tutto. Poi la linea estetica del menu in alto anche da rivedere. Altra cosa: perché come colori hai scelto grigi di sfumature diverse?
          Insomma, l’effetto generale è quello di un sito un po’ raffazzonato. Ma Grafigata nel 2014 era anche peggio 🙂 Quindi mettiti sotto e lavora ogni giorno a migliorare qualche aspetto del sito.
          Non so se sia in WordPress, ma nel caso, prova a valutare l’acquisto di un nuovo tema visivamente più organizzato e pulito 😉
          Non ti arrendere!

          • Marc Sellier

            Ho provato a riorganizzare i contenuti nel migliore dei modi, ma purtroppo non trovo soluzioni più soddisfacenti (è anche vero che non sono un grafico – Se nel frattempo hai qualche consiglio in merito dimmi pure :P).
            Ho scelto quei colori perchè, facendo il confronto con altri siti, non stancano l’occhio.
            Il sito è stato interamente realizzato da me senza WordPress e quindi se devo modificare qualcosa devo farlo io stesso bit dopo bit. Vedrò di studiare altre alternative grafiche appena possibile.

            Grazie per i consigli 🙂 Ciao!

  • Luca Corio

    Ciao Lorenzo, anche io sono appassionato di font e mi ha fatto molto piacere leggere il tuo articolo. Ti faccio i complimenti e ne approfitto per chiederti una cosa che mi sta facendo penare da vari giorni. E’ un aspetto tecnico legato ai CSS, ma anche altrove non ho trovato questa risposta. Vediamo si mi puoi dare una mano e magari diventa uno spunto di riflessione anche per gli altri tuoi lettori, che mi sembrano molto preparati…
    L’utilizzo del comando @media nei CSS mi è chiaro (modificare lo stile in funzione della risoluzione dello schermo), ma sto progettando un sito utilizzando un monitor 24″ Full HD (1920 x 1080) ed un font di dimensioni 20px è davvero bello e leggibile. Sto provando ad usare il comando vm che ridimensiona i caratteri in % rispetto alla dimensione della viewport e pertanto il layout rimane agganciato alla risoluzione (vantaggio di far rimanere il layout del sito praticamente rispetto a qualsiasi monitor) e se si utilizzano schermi ancora più grandi e con risoluzioni maggiori è davvero uno spettacolo. Purtroppo però quando apro la pagina dal mio cellulare (risoluzione sempre Full HD), ma su 5″ il testo diventa troppo piccolo e illegibile (anche se sto vicino al telefono e teoricamente essendo 1920 px il font ha la stessa dimensione che sul 24″). Ovviamente questa risoluzione alta su piccoli schermi (quindi con DPI molto spinti) crea un problema nella gestione dei siti responsive. Io vorrei poter cambiare le % in schermi più “piccoli” in modo da ingrandire proporzionalmente il testo man mano che le misure scendono, ma dovrei riferirmi alle misure in centimetri / millimetri / pollici e non alla risoluzione. Il comando @media può essere una soluzione? Ci sono altre strade? Spero di essermi spiegato e scusa per il lungo commento.

    Grazie 1000 per l’aiuto che vorrei darmi.

    Luca