Utilizza dimensioni di carattere leggibili

Questa regola viene attivata quando PageSpeed Insights rileva che il testo nella pagina è troppo piccolo per risultare leggibile.

Panoramica

Le dimensioni del carattere web possono essere specificate attraverso quattro unità comuni: pixel (px), punti (pt), EM (em) e percentuali (%).

  • I pixel sono "pixel CSS" e variano in base alla densità e alle dimensioni del dispositivo.
  • I punti vengono definiti in rapporto ai pixel. Un singolo pixel corrisponde a 0,75 punti*.
  • Le EM e le percentuali sono unità "relative", nel senso che dipendono dalle proprietà e dalle dimensioni ereditate del carattere utilizzato. 1 EM equivale al 100%.

* Vedi note aggiuntive.

Anche l'area visibile influisce sulle dimensioni dei caratteri nei dispositivi mobili. Una pagina senza un'area visibile configurata correttamente viene rimpicciolita sui dispositivi mobili e, spesso, il testo che contiene risulta illeggibile a causa delle dimensioni ridotte.

Consigli

Come prima cosa, configura un'area visibile per assicurarti che i caratteri vengano ridimensionati come previsto nei diversi dispositivi. Dopo avere configurato un'area visibile, implementa i consigli aggiuntivi riportati di seguito.

  1. Utilizza una dimensione di carattere di base di 16 pixel CSS. Regola le dimensioni secondo le esigenze in base alle proprietà del carattere utilizzato.
  2. Utilizza le dimensioni proporzionali alla dimensione base per definire il ridimensionamento tipografico.
  3. Il testo richiede l'inserimento di spazi verticali tra i caratteri e potrebbe essere necessario modificarlo per ciascun carattere. Generalmente è consigliabile utilizzare l'altezza riga predefinita del browser di 1,2 em.
  4. Limita il numero di caratteri utilizzati e il ridimensionamento tipografico: troppi caratteri e dimensioni danno origine a layout di pagina disordinati ed eccessivamente complessi.

Ad esempio, lo snippet CSS riportato di seguito definisce una dimensione di carattere standard di 16 pixel CSS, in cui le classi CSS "small" e "large" hanno una dimensione pari rispettivamente al 75% (12 pixel CSS) e al 125% (20 pixel CSS) del carattere standard:

body {
  font-size: 16px;
}

.small {
  font-size: 12px; /* 75% of the baseline */
}

.large {
  font-size: 20px; /* 125% of the baseline */
}

Per ulteriori consigli sui caratteri validi per i dispositivi mobili, consulta le Android typography guidelines (Linee guida Android per la gestione della tipografia).

Informazioni aggiuntive

La specifica CSS 2.1 deve essere consultata con attenzione per comprendere la modalità di definizione delle unità di lunghezza. Contiene ulteriori unità che non sono state incluse qui: pollici, centimetri, millimetri e pica. Quello che può facilmente sfuggire è che un pollice CSS non corrisponde sempre a un pollice fisico.

Tutte le unità assolute vengono definite in relazione alle altre: 1 pixel corrisponde a 0,75 punti; 1 punto a 1/72 pollici; 1 pollice a 2,54 centimetri e così via. Tuttavia, è il dispositivo a decidere in che modo "ancorare" tali unità. Ad esempio, quando stampi su carta, 1 pollice è ancorato a 1 pollice fisico e, di conseguenza, tutte le altre unità dovrebbero essere rapportate a quest'ultimo. Quando viene visualizzato su un cellulare, tuttavia, i dispositivi eseguono l'ancoraggio a quello che viene definito il "pixel di riferimento". Un pixel CSS viene definito in base a questo pixel di riferimento e tutte le altre unità (pollici, centimetri e così via) vengono modificate sulla base del pixel CSS. Di conseguenza, su un cellulare, un pollice CSS viene solitamente visualizzato con dimensioni più piccole di un pollice fisico effettivo.

Per questo motivo, è consigliabile definire le dimensioni del carattere utilizzando i pixel. Alcuni designer e sviluppatori possono incorrere in errore quando vengono utilizzati pollici o punti: si tratta infatti di dimensioni fisiche che, però, non corrispondono necessariamente alle rispettive dimensioni reali. Le dimensioni di un pixel possono essere sempre considerate modificabili a seconda del dispositivo su cui esso viene visualizzato.

Infine, ciascun carattere presenta caratteristiche proprie: dimensioni, spaziatura e così via. Per impostazione predefinita, nel browser ogni carattere verrà visualizzato con una dimensione pari a 16 px (pixel CSS). Nella maggior parte dei casi, si tratta di un buon valore predefinito, ma potresti doverlo modificare per un carattere specifico: le dimensioni predefinite potrebbero cioè dover essere ridotte o aumentate per adattarsi alle diverse proprietà del carattere. A questo punto, dopo che le dimensioni predefinite sono state impostate, devono essere definiti caratteri più grandi e più piccoli in proporzione alle dimensioni predefinite utilizzando i pixel. Questi possono poi essere utilizzati per regolare le dimensioni del testo per i contenuti principali, secondari e per altri tipi di contenuti sulla pagina.

Alcuni browser per dispositivi mobili potrebbero cercare di ridimensionare i caratteri per le pagine senza un'area visibile adeguatamente configurata. Questo comportamento di ridimensionamento varia a seconda del browser e non deve essere ritenuto affidabile per pubblicare caratteri leggibili sui dispositivi mobili. PageSpeed Insights consente di visualizzare il testo all'interno della pagina senza applicare alcun ridimensionamento del carattere specifico per browser.