Legibilidad tipográfica: Font-size-adjust. Mantener la relación de aspecto entre fuentes 29.10.13
Font-size-adjust: entender esta propiedad Css para mantener la relación de de aspecto entre familias tipográficas y asegurar la legibilidad tipográfica
Legibilidad tipográfica: Font-size-adjust. Mantener la relación de aspecto entre fuentes
Si 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:
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.
Kseso
the obCSServer ᛯ 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 Kseso
Una "media-query" a nivel glifo. No sé cómo andará hoy, pero el soporte que le daban los navegadores era lamentable.
ResponderEliminarUn truco no muy viejo para crear una suerte de "compatibilidad" era usar 'transform: scale()'. Sí, por supuesto, había que saber qué fuente se estaba usando en cada caso; era para diseños donde visualmente se debían equiparar las alturas de fuentes combinadas, o inclusive (y aquí es más "media-query") para que las cajas con el texto no se desacomodaran demasiado cuando se cambiaba la tipografía en algunas palabras de una con respecto a las de otra.
La enorme ventaja de 'font-size-adjust' es que sabe la fuente que el navegador termina utilizando de la lista que le dejamos sugerida. Para otros inventos había que averiguar eso primero, y el único que lo permitía era Internet Explorer. Por comparación, ni siquiera porque entregara el dato así de fácil.
Es evidente que las cosas se están simplificando.
Y que con este comentario no estoy aportando nada, pero hace un tiempo que no aparecían artículos nuevos y ya tenía síndrome de abstinencia. Quería ser el primero en publicar un comentario al tema.