it-swarm-eu.dev

C'è una dimensione del carattere ottimale?

Per la maggior parte dei progetti di siti Web in cui sono stato coinvolto, la dimensione del carattere per il testo in blocco è di solito 12px - 13px, ma mi chiedo se questa è una buona dimensione. Ricordo di aver letto un articolo in cui si diceva che le dimensioni dei caratteri sui siti Web dovrebbero essere molto più grandi, intorno a 17 pixel perché il testo in blocco corrisponda alle dimensioni dei caratteri stampati.

C'è una dimensione del carattere ottimale. Quando è qualcosa di troppo grande/piccolo per l'utente medio?

Esistono vantaggi/svantaggi per caratteri piccoli/medi/grandi?

Aggiornamento:
Vorrei ottenere la tua esperienza con i test reali delle reazioni degli utenti, ecc. È facile, questo e quello è troppo grande o piccolo, ma ho imparato che gli utenti a volte sorprendono e reagiscono in modo diverso da opinioni di esperti .

Anche la possibilità di modificare le dimensioni dei caratteri è una buona discussione, ma non è ciò che è richiesto qui. Quello che mi interessa sapere di più, è come gli utenti reagiscono alle diverse dimensioni dei caratteri, non come dovrebbero essere in grado di cambiarlo.

56
googletorp

Questo è un argomento ampiamente dibattuto. Uno dei modi migliori in cui ho visto questo spiegato è dalla presentazione Design per sviluppatori: fare schifo i frontend di Idan Gazit.

Questo aveva la seguente diapositiva: alt text Questo è il testo 16px su uno schermo normale e il testo 12pt in un libro. Il messaggio è che 12pt è eccellente per un libro, ma di solito è tenuto molto più vicino al lettore che a uno schermo. Tenendo conto della distanza, il 16px sullo schermo e il 12pt del libro sembrano avere le stesse dimensioni. 12pt su carta = 16px sullo schermo

Ci sono tutti i tipi di eccezioni, dove è preferito il testo più piccolo. Ma per una leggibilità ottimale di testi più lunghi, sono d'accordo con 16px.

Si consiglia di modificare le unità scalabili come em o % rispetto alle unità a dimensione fissa come pt o px. Per saperne di più: Dimensione carattere CSS: em vs. px vs. pt vs. percent

34
user745

Non esiste una dimensione del carattere ottimale. Cercare uno significa dimenticare qualcosa di importante: la leggibilità del testo non è solo un prodotto di dimensioni.

Ho creato circa una dozzina di siti Web come designer dell'interfaccia utente negli ultimi cinque anni e tutti hanno avuto un pubblico diverso. Una delle cose che ho scoperto è che la dimensione non è il fattore più importante. È una combinazione di diversi aspetti relativi alla visualizzazione del testo:

  • contrasto
  • famiglia di font
  • altezza della linea
  • posizione sulla pagina

La combinazione di questi porta a una metrica approssimativa per leggibilità generale e ho scoperto che è l'obiettivo di progettazione più importante per il testo.

Come aneddoto dai test (da quando hai chiesto): ho lavorato su un sito della comunità con 700k visite mensili in cui il pubblico principale era utenti non esperti di computer. Abbiamo usato Verdana 12px per il tipo di corporatura e Arial 14px-16px per i titoli. Occasionalmente scendevamo a Verdana 11px in grigio per un testo meno importante. Durante i test di usabilità sul sito, abbiamo ricevuto un feedback non sulla dimensione del testo, ma su come i colori circostanti del design facessero sembrare che stavi fissando una lampada. Abbiamo interpretato questo come il sito troppo luminoso e regolato il contrasto dell'intero design per renderlo meno brillante. In parte a causa di questi cambiamenti e in parte a causa di cambiamenti nella struttura di navigazione, abbiamo visto un significativo aumento di visualizzazioni di pagina su ogni mese per visitatore.

Una cosa da ricordare sulle dimensioni dei caratteri piccoli è che hanno uno scopo: quando hai bisogno di qualcosa di più piccolo di qualcos'altro (duh!). Ma come progettista dell'interfaccia utente è importante ricordare che il tuo compito è quello di creare chiarezza e usabilità (tra le altre cose) nell'interfaccia e che de-enfatizzando alcuni elementi dell'interfaccia utente è possibile migliorare la sua usabilità. Sta a te decidere quali elementi devono essere ridimensionati e quali aspetti del testo devono essere modificati (dal mio elenco sopra).

20
Rahul

12px sembra funzionare bene per la maggior parte delle persone. Avere qualcosa a 17px rende più difficile la lettura, così come averlo sotto i 10px. Penso che 12-13px siano una buona linea guida.

Ma davvero, dovresti impostare la dimensione del tuo testo su qualcosa come 1em. Questo perché alcuni browser non consentiranno agli utenti di ridimensionare il testo se è impostato in pixel. Indipendentemente dalle dimensioni del testo, le persone con gli occhi nitidi lo ridurranno in modo che possano leggere di più e le persone con problemi di vista aumenteranno il testo.

Basta impostare le cose su 1em e lasciare che le persone e i loro browser risolvano il resto.

È bene testare la tua pagina con caratteri di dimensioni diverse, per vedere se il layout rimane gestibile.

9
Vincent McNabb

Secondo recenti prove scientifiche:

  • 18 e 22 punti porteranno a una leggibilità oggettiva notevolmente migliorata (misurata con eye-tracker)
  • 10 e 12 punti porteranno a una comprensione significativamente compromessa (misurata con domande di comprensione)
  • più grande è, meglio perché la leggibilità oggettiva migliora continuamente con l'aumentare della dimensione del carattere.

Non prendere la mia Parola per questo. Leggi i dettagli nel articolo scientifico .

7
Martin

La dimensione ottimale del carattere è individuale ed è impostata dal sistema operativo/browser dell'utente. Quindi non cambiarlo.

Se devi ingrandire il carattere (ad es. Titoli), fallo relativamente (ad es. 200% o 2em).

Non ridurre mai le dimensioni del carattere e mantenere sempre un buon contrasto per mantenere la leggibilità.

5
George Pavelka

No.
... non in px, comunque.

Le unità giuste per esprimere una dimensione ottimale, se ce n'è una, sarebbero angolo sotteso alla retina.

Se stai guardando px, stai osservando solo uno dei tre fattori necessari per determinare la leggibilità1:

Il dot pitch, o la definizione corretta di "risoluzione" (pixel/distanza), è il modo in cui si converte da px a una distanza effettiva.

La distanza di lettura è necessaria, ovviamente, perché i personaggi della stessa dimensione non sono ugualmente leggibili ovunque.

... e naturalmente la leggibilità aumenta con:

  • px superiore
  • dot pitch più alto (o risoluzione più bassa)
  • distanza di lettura inferiore

1C'è anche il colore del testo, il colore di sfondo, il carattere, ecc. (Il testo in grassetto che è nero su bianco ha bisogno di una dimensione inferiore rispetto al testo in corsivo che è giallo su arancione), ma px, passo dei punti e distanza di lettura coprono ciò che hai bisogno di una decisione basata esclusivamente su dimensione.

3
A.M.

Non dovresti provare a impostare una dimensione del carattere. Puoi usare + N per indicare "ingrandisci la linea di base" (o -N per ridurla). Qualsiasi dimensione specificata sarà errata in alcune circostanze; l'unica opzione praticabile che non richiede agli utenti di intraprendere azioni correttive sul tuo sito è di decidere il browser.

2
Monica Cellio

Dovresti mai usare i pixel per le dimensioni dei caratteri. Cercare di leggere i caratteri 14px su uno schermo da 12 "che supporta la risoluzione Full HD ti darà il testo in caratteri alti 1-2 mm (e un mal di testa in molto meno di un'ora).

2
JanC

12px va bene, ma ciò che è anche importante è che gli utenti abbiano la possibilità di aumentare le dimensioni del carattere e che il tuo sito non si rompa quando ciò accade.

2
Ryan Shripat

Ci sono alcuni post strani e idee sbagliate in questa discussione. Sembra che molte persone vogliano ignorare la scienza e gli aspetti ben studiati di come leggiamo e comprendiamo il testo. In effetti, sto studiando nuovi standard proprio su questo argomento, quindi ecco un po 'dello stato dell'arte attuale:

La scienza dell'arte

La ricerca esistente ha definito che la velocità di lettura ottimale per gli individui normalmente ipovedenti, con un carattere al massimo contrasto, è un'altezza x compresa tra 0,2 ° e 2 ° dell'angolo visivo. L'altezza X è la dimensione verticale effettiva della x minuscola di un font. Ovviamente la dimensione del carattere effettiva varierà in base alla distanza di visualizzazione, ma per fortuna il pixel di riferimento CSS - px - si basa sull'angolo visivo. Un angolo visivo di 0,2 ° è noto come dimensione di stampa critica, in quanto questo è il punto in cui viene raggiunta la massima velocità di lettura. (Sopra 2 °, torna indietro.)

Un px è 0,0213 gradi o 1,278 minuti di arco. Questo si basa su un dispositivo con una densità di pixel di 96 dpi @ distanza 28 pollici. I produttori di dispositivi possono quindi utilizzare il px di riferimento per impostare una dimensione in base alla distanza visiva prevista/prevista. Questo è discusso sugli standard CSS del W3C. I produttori di dispositivi utilizzano il px di riferimento per impostare le dimensioni di rasterizzazione effettive in base alla distanza di visualizzazione prevista. 16px non saranno necessariamente 16 pixel del dispositivo. Su un iPhone con un rapporto di 2: 1 pixel, ad esempio, sarebbero 32 pixel del dispositivo.

Pertanto, la dimensione di stampa critica per il Web è un'altezza x di 9,4 px. A seconda del tipo di carattere specifico, ciò si riferisce a un carattere compreso tra 17 e 20 pixel. Ciò ha comportato standard di accessibilità che indicano che 18px è la dimensione minima del carattere desiderata.

Ma aspetta, c'è di più

C'è anche un livello critico contrasto. Le dimensioni dei caratteri sopra menzionate si riferiscono ad un massimo contrasto. Ma per quanto riguarda i contrasti inferiori? Molti designer incidono seriamente sulla leggibilità dei loro siti utilizzando colori a contrasto più basso. Parte di ciò è dovuta al fallimento di WCAG 2.0 nello specificare i contrasti corretti relativi alla frequenza spaziale. 4.5: 1 è più del necessario per un titolo grosso e grasso, ma 4.5: 1 non è sufficiente per il testo di un corpo piccolo e sottile.

Per un normale avvistamento, il contrasto critico potrebbe essere basso fino al 10% per i titoli con grassi elevati al picco della funzione di sensibilità al contrasto. Ma alle frequenze spaziali molto alte di caratteri piccoli e sottili, il contrasto deve essere 20 volte più alto. Vedi il diagramma seguente, in cui tutto il testo è dello stesso colore CSS (e questo non sta nemmeno discutendo del modo in cui il testo del mangles antialias contrasta al di là di ogni riconoscimento).

contrast sensitivity curve sowing relation to text size

Pertanto, la dimensione del carattere, il contrasto e una serie di altre funzioni di progettazione lavorano insieme per fornire un testo "più leggibile". Indipendentemente da ciò, una dimensione del carattere di 12px raccomandata da molti poster in questo thread è sorprendentemente troppo piccola, e dove si sono inventati quella figura è la supposizione di chiunque. Potresti usare qualcosa come 12px per forse un avviso sul copyright o qualcosa che non vuoi che nessuno legga, ma 12px non è affatto una dimensione appropriata per il testo del contenuto.

I Glifi ce l'hanno

La raccomandazione ufficiale è la dimensione minima di 18 px, tuttavia alcuni caratteri come Verdana (un font progettato per l'uso sul web) possono funzionare fino a 16 px. Ma Times New Roman non dovrebbe mai essere impostato a meno di 18 px in quanto ha un'altezza x molto piccola e una leggibilità generalmente scarsa (grazie Microsoft, ugh). Per un altro carattere che Microsoft ha alterato, proviamo a non usare mai "Courier New", in cui Microsoft ha preso quello che era un carattere monospace generalmente leggibile e poi lo ha reso troppo sottile e leggero. Come, cosa stavano pensando?

Per alcune considerazioni generali sulla scelta del carattere per accessibilità e leggibilità, ho questo preliminare PDF sul mio account gate di ricerca che è possibile scaricare gratuitamente: https: //www.researchgate. net/pubblicazione/336679010_Evaluating_Fonts_Font_Family_Selection_for_Accessibility_Display_Readability

Un commento di chiusura più importante

Più importante di ciò che si imposta come dimensione del carattere, è che si consente agli utenti di ZOOM testo a qualsiasi dimensione desiderata senza interrompere il contenuto. Lo standard attuale specifica lo zoom del 200% senza interruzioni, ma questo è insufficiente. Il 500% è molto più ragionevole dal punto di vista dell'utente.

PRENDERE IN CONSIDERAZIONE:

20/20 è visione media. Le dimensioni dei caratteri che menziono sopra (18px) sono basate su questo utente medio 20/20. 20/40 ha bisogno di DUE VOLTE di quelle dimensioni per la stessa percezione. Gli utenti di 20/200 hanno bisogno di DIECI TEMPI di quelle dimensioni (cioè potrebbero voler ingrandire il 1000%). Cito il 500% come minimo in quanto considera le implicazioni del fatto che la pagina ha caratteri più grandi su di essa e le dimensioni fisiche del dispositivo.

Una tecnologia che manca nella ricerca in questo momento sta ingrandendo i caratteri più piccoli ma ingrandendo di meno i caratteri più grandi, in modo che i titoli di grandi dimensioni non diventino troppo grandi per la leggibilità.

Nel frattempo, considera solo che gran parte delle persone che stanno leggendo il tuo sito non hanno un monitor buono come il tuo e non hanno una vista buona come la tua. Se vuoi avere un'idea di come il tuo sito potrebbe essere visto da alcuni meno fortunati, prendi un monitor economico, spazzatura, piccolo, a bassa risoluzione (potresti averne uno in deposito) e posizionalo a 3-4 metri di distanza (cioè più di un metro di distanza). Sai leggere il tuo sito? Ora ingrandisci il testo: il tuo sito si interrompe a causa dei confini del piccolo monitor?

Questo è il tipo di problema che molti utenti hanno con molti siti. Solo perché hai una visione 20/15 e un bellissimo display retina da 32 "non significa che i tuoi utenti abbiano quasi quel livello di accomodamento visivo.

-Andy

0
Myndex

Concordo con Erik, 16pt sembra essere lo standard migliore per quanto riguarda la leggibilità . Maggiori informazioni qui: http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/

0
Matt Rockwell