GratisOnWeb Forum Il punto di incontro per Webmaster e Popolo della Rete

[Lucignolo]

[CSS] Rendere "accessibile" la dimensione dei font

Ogni Webmaster deve fare i conti con l'accessibilità delle proprie pagine web.
Tuttavia non tutti danno il giusto peso alla dimensione dei caratteri.
I browser di navigazione sono già predisposti per aumentare o diminuire la grandezza del carattere mediante le impostazioni dalla barra del menu, tuttavia sarà capitato a molti di accorgersi che anche intervenendovi il risultato non cambia ed il font resta troppo piccolo o troppo grande.
Questo accade perchè il creatore del sito ha impostato un font a dimensione fissa, impostando una grandezza specifica in pixel tipo:

body {
font-size:10px;
}

In questo modo, se l'utente volesse aumentare la dimensione del carattere agendo sul browser, il foglio di stile non lo consentirebbe e la pagina resterebbe impostata sui 10 px, ovvero un carattere estremamente piccolo e decisamente poco "leggibile" dai browser impostati con una definizione molto alta (es. 1024x768 e superiori) o da chi ha problemi di vista.

Per ovviare a tutto questo, esistono due soluzioni:

1. creare fogli di stile diversi, impostati con font di varie dimensioni e che verranno caricati manualmente dal navigatore stesso, agendo ad esempio su un pulsante inserito nella pagina
2. utilizzare una codifica diversa dei font

La soluzione 1. non è delle più agevoli, in quanto necessita la creazione di diversi fogli di stile che differiscono tra loro solo per la dimensione del carattere, e richiede l'utilizzo di codice javascript, non supportato dai browser di tutti i navigatori, quindi la affronteremo in altra sede.

Vediamo, invece, come utilizzare la soluzione 2..
L'attributo font-size dei CSS, oltre alle dimensioni in px, offre diverse opzioni:

- large
- larger
- medium
- small
- smaller
- x-large
- x-small
- xx-large
- xx-small

che definiscono una grandezza determinata (es. x-small corrisponde a 10px) ma modificabile e l'utente potrà quindi cambiarla dal menu del browser.

[Google]