soy Kseso y esto EsCSS

Legibilidad tipográfica: Font-size-adjust. Mantener la relación de aspecto entre fuentes

Legibilidad tipográfica: Font-size-adjust. Mantener la relación de aspecto entre fuentes

·Por Kseso ✎ 1

Legibilidad tipográficaSi de entrada digo, una vez más, que el aspecto tipográfico de la web es el aspecto primordial y al que más atención debería prestarse no te sonará a nuevo.

Si a continuación vuelvo a afirmar que son muchos los que descuidan esta parte o no prestan la atención necesaria a ello, tampoco te extrañarías.

También es cierto que en muchos casos se atiende a ello pero de forma parcial y poco efectiva. Porque en la mayoría de los casos sólo se actúa sobre la familia font-family y el tamaño de la tipografía font-size. Esto es, el tamaño (largo) de la letra 'm' en la familia elegida.

Y este enfoque olvida un detalle importantísimo como es que una tipografía no es más o menos legible por su tamaño (en base a esa longitud) sino por la altura de sus trazos a un determinado tamaño. O mejor dicho, por la relación entre ambos.

Mira la imagen siguiente. Distintas familias tipográficas con el mismo tamaño de fuente (16px) en una captura de google fonts:

distinto tamaño para el mismo font-size

Font-size-adjust

El tamaño aparente y la legibilidad de una fuente depende menos de su valor 'font-size' (longitud de la letra 'm') que del valor 'x-height' (altura de la 'x'), o, mejor aún, de la proporción entre estos dos valores, llamado el valor de la relación de aspecto (tamaño de la 'm' dividido por la altura de la 'x').

A modo de ilustración: en la familia tipográfica Verdana, al declarar un tamaño de fuente de 100 unidades, la altura de la letra 'x' resulta de 58 unidades. Así su relación de aspecto es de 58/100=.58.

Sin embargo en la Arial esta relación es de .48

Esta diferencia hará que a valores pequeños de font-size sea más legible la verdana que la arial. Y que a tamaños grandes aparente ser mayor la verdana.

Así que para preservar la legibilidad (y aparente tamaño) cuando se declaran dos familias tipográficas de relación de aspecto significativamente dispar, Css tiene definida la propiedad font-size-adjust

font-family: familia-1, familia-2; font-size-adjust: N;

Donde N en la declaración anterior es un número. Y para calcular dicho valor, esto es, para mantener la altura de la 'x' en caso de utilizar 'familia-2' en vez de 'familia-1' la especificación provee la siguiente fórmula:
c = ( a / a' ) s donde cada letra es:
s = 'font-size' de la primera opción de fuentes
a = valor de relación de la fuente seleccionada en primer término
a' = valor de relación de la fuente disponible (familia-2)
c = 'font-size' a aplicar a la fuente disponible (familia-2)

Así que en base a la fórmula anterior, el valor de 'N' en la propiedad fant-size-adjust es el resultante de dividir c (o el tamaño con el que se tendrá que dibujar 'familia-2') entre el valor declarado para 'font-size'. Así la relación de aspecto de la letra 'x' (y la legibilidad y tamaño aparente) se mantendrá constante.

En esta página tienes calculado las relaciones de diversas tipografías. No he verificado la exactitud de los valores que ofrecen.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso