Impostare automaticamente l'altezza del font tramite CSS

di Morgan Pizzini,

Nel design web, la leggibilità del testo può variare notevolmente quando il font principale non è disponibile e il browser utilizza un font di fallback con proporzioni diverse.

.text {
  font-family: "Mio-font", Arial, sans-serif;
}

La proprietà CSS font-size-adjust è stata creata appositamente per mantenere un aspetto coerente del testo, regolando la dimensione dei caratteri minuscoli in rapporto a quella dei maiuscoli, così da preservare l'equilibrio visivo tra i vari font.

.text {
  font-family: "Mio-font", Arial, sans-serif;
  font-size-adjust: ex-height 0.5;
}

Il suo funzionamento si basa sull'aspect value, cioè il rapporto tra l'altezza della lettera "x" (x-height) e la dimensione complessiva del font. Poiché la leggibilità dipende soprattutto dalle lettere minuscole, questa proprietà permette di adattare automaticamente la dimensione del font di fallback per far coincidere la sua x-height con quella del font principale.

Font-size-adjust può assumere un valore numerico che definisce la proporzione desiderata o la parola chiave from-font, che lascia al browser il compito di calcolare l'adattamento in base al font originale. È anche possibile specificare una tipologia di riferimento: ex-height per la x, cap-height lettere maiuscole, ch-width spazio orizzonatale occupato dal carattere, ic-width o ic-height per cinese, giapponese e coreano.

Commenti

Visualizza/aggiungi commenti

| Condividi su: LinkedIn, Facebook

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi