Uso del estilo CSS font-size-adjust

La propiedad CSS font-size-adjust indica al navegador la relación de aspecto entre el tamaño de la letra mayúscula y minúscula. Así, en vez de especificar únicamente el tamaño de la fuente por su altura (de la letra mayúscula), el navegador calcula el tamaño de fuente de forma que su tamaño real sea:

font-size × font-size-adjust / {relación min/may original de la fuente}

Por ejemplo, si utilizamos la fuente Times New Roman veremos que tiene un font-size-adjust de 0,448. Por contra, una fuente Verdana tiene como 0,546, y la fuente Arial tiene 0,520.

Así, si usamos una fuente Verdana e indicamos a la fuente Arial como posible sustituta, sin usar tendremos algo así:

<blockquote style="font-family:Verdana,Arial,sans-serif;font-size:14pt"
 >Ejemplo de texto Verdana</blockquote>

y en ambos casos el navegador usaría una fuente de 14 puntos que veríamos así:

Ejemplo de texto Verdana

Si no tenemos instalada la fuente Verdana veríamos el texto tal que así:

Ejemplo de texto Verdana

La apariencia de la fuente Verdana es más grande que la de la fuente Arial. Un motivo es el tamaño de las letras minúsculas. Mientras que en la fuente Verdana su tamaño es 14pt×0.546=7.644pt, para la fuente Arial es 14pt×0.52=7.28pt. Y en el caso de Times New Roman sería 6.272pt. Y en todos los casos el tamaño de la letra mayúscula sería 14pt.

El estilo font-size-adjust nos permite indicar al navegador cuál es el tamaño óptimo de la fuente, diciéndole cuál es el tamaño de la letra minúscula que queremos (la más abundante en el texto). En el ejemplo anterior, como sabemos que la relación de aspecto de la fuente Verdana es 0,546, se lo indicamos al navegador:

<blockquote 
 style="font-family:Verdana,Arial,sans-serif;font-size:14pt;font-size-adjust:0.546"
 >Ejemplo de texto Verdana</blockquote>

Si el valor que usamos para font-size-adjust es el correcto, una persona que tenga la fuente Verdana no notará cambios, pero una persona que no la tenga verá esto:

Ejemplo de texto
Ejemplo de texto

Vemos que la legibilidad de ambos textos es similar (aunque no la longitud). Hay inconvenientes:

Este cuadro ilustra las virtudes e inconvenientes. El valor de font-size-adjust que denominamos nativo lo hemos obtenido ajustando el tamaño de la letra b de 500 píxeles usando el cuadro del pie del documento, y es el que hemos indicado al principio del artículo.

  Verdana
fsa=0.546
Arial
fsa=0.52
Times New Roman
fsa=0.448
Courier New
fsa=0.424
Texto sin ajuste:
font-size: 14pt
font-size-adjust: none
Ejemplo de texto Ejemplo de texto Ejemplo de texto Ejemplo de texto
Ajuste manual a partir del fsa:
font-size: 14pt × fsa/0.546
font-size-adjust: none
Ejemplo de texto Ejemplo de texto Ejemplo de texto Ejemplo de texto
Ajuste automático:
font-size: 14pt
font-size-adjust: 0.546
Ejemplo de texto Ejemplo de texto Ejemplo de texto Ejemplo de texto

Esta propiedad actúa modificando el tamaño de letra efectivo usado, de forma que la altura de una letra minúscula sea la especificada como font-size×font-size-adjust. Así, si el navegador soporta font-size-adjust, se aplica siempre y no sólo cuando se pasa una lista de fuentes. En la práctica modifica el cálculo de tal forma que las filas 2 y 3 de la tabla anterior deberían ser iguales (salvo discrepancias debidas al motor de renderizado de las fuentes).

Normalización de la legibilidad y aspecto general de la fuente

De la tabla anterior vemos que tratar de usar font-size-adjust para tratar de homogenizar fuentes similares, puede tener sentido. Pero por sí sólo no funciona para tratar de homogeneizar diferentes familias, como letras monoespaciadas y letras proporcionales. Eso exige un poco de afinamiento.

  1. Maquetamos nuestro texto con las fuentes originales:
    <p style="font-family:Verdana,sans-serif;font-size:10.5pt">Este texto es el tipo sans-serif, <span style="font-family:'Lucida Console',monospace;font-size:10pt"> mientras que este otro es del tipo monospace</span>, que debe ser coherente.</p>

    Este texto es el tipo sans-serif, mientras que este otro es del tipo monospace, que debe ser coherente.

    Hemos marcado el texto monoespaciado como 10pt porque casi siempre el texto monoespaciado parece más grande que el proporcional.

  2. Si calculamos el fsa de la familia Lucida Console vemos que vale 0.532, así que en vez del valor a ojo de 10pt, usamos 10.5×0.546/0.532=10.78pt, y tenemos:
    <p style="font-family:Verdana,sans-serif;font-size:10.5pt">Este texto es el tipo sans-serif, <span style="font-family:'Lucida Console',monospace;font-size:10.78pt;">mientras que este otro es del tipo monospace</span>, que debe ser coherente.</p>

    Este texto es el tipo sans-serif, mientras que este otro es del tipo monospace, que debe ser coherente.

    Aunque parecen iguales, si se amplia resulta que es más exacto el último ajuste.

  3. Incluimos las fuentes sustitutivas, e incluso más decorativas:
    <p style="font-family:Verdana,Arial,sans-serif;font-size:10.5pt;font-size-adjust:0.546">Este texto es el tipo sans-serif, <span style="font-family:'Lucida Console',monospace;font-size:10.78pt;font-size-adjust:0.532">mientras que este otro es del tipo monospace</span>, que debe ser coherente.</p>

    Este texto es el tipo sans-serif, mientras que este otro es del tipo monospace, que debe ser coherente.

Caso práctico con las fuentes clásicas de Postscript

A continuación vemos un caso más práctico. Separamos el estilo del texto en un bloque STYLE (podría ser un fichero CSS externo) y damos más sentido a la integración de fuentes usando la etiqueta CODE, que se espera genera un texto monoespaciado, en vez de la etiqueta abstracta SPAN:

A)
Este texto es el tipo serif, mientras que este otro es del tipo monospace, que debe ser coherente.

Que si no aplicáramos estas técnicas, y si tienes las fuentes originales, se vería así:

B)
Este texto es el tipo serif, mientras que este otro es del tipo monospace, que debe ser coherente.

Si no aplicamos estas técnicas, pero resulta que las fuentes previstas no están instaladas y el navegador recurre a las fuentes Times New Roman y Courier New tendremos:

C)
Este texto es el tipo serif, mientras que este otro es del tipo monospace, que debe ser coherente.

Lo que sin aplicar estas técnicas se vería como:

D)
Este texto es el tipo serif, mientras que este otro es del tipo monospace, que debe ser coherente.

Caso práctico con tipografía moderna

A)
Este texto es el tipo sans-serif, mientras que este otro es del tipo monospace, que debe ser coherente.
B)
Este texto es el tipo sans-serif, mientras que este otro es del tipo monospace, que debe ser coherente.
C)
Este texto es el tipo sans-serif, mientras que este otro es del tipo monospace, que debe ser coherente.
D)
Este texto es el tipo sans-serif, mientras que este otro es del tipo monospace, que debe ser coherente.

Cálculo del fsa

Estas dos letras, a 500px, pueden utilizarse para obtener el tamaño apropiado de font-size-adjust de una fuente:

bb
 

Referencias: FontDeck.

Valores ya calculados

font-family font-size-adjust
Sin ajuste Valor obtenido Ajuste al valor obtenido Ajuste a 0.546
Courier
(Nimbus Mono L)
0.418
PT Mono 0.500
Andale Mono 0.510
Bitstream Vera Sans Mono 0.548
Source Code Pro 0.486
Courier New 0.424
Lucida Console 0.532
Luxi Mono 0.530
Droid Sans Mono 0.538
Oxygen Mono 0.536
Liberation Mono 0.530
Bitstream Vera Serif 0.520
Verdana 0.546
Bitstream Vera Sans 0.548
Ubuntu Mono 0.466
Consolas 0.491
Inconsolata 0.460
Nobile 0.572
AvantGarde
(URW Gothic L)
0.547
Open Sans 0.536
Trebuchet 0.524
Ubuntu 0.522
PT Serif 0.500
Droid Sans 0.538
Arial 0.520
Liberation Sans 0.530
Nokia Pure Text 0.502
Luxi Sans 0.532
Cantarell 0.482
Georgia 0.485
Roboto 0.530
Tahoma 0.546
Segoe UI 0.502
PT Sans 0.500
Palatino
(URW Palladio L)
0.472
Droid Serif 0.536
Bitstream Charter 0.482
Helvetica
(Nimbus Sans L)
0.526
Gill Sans MT 0.450
Times New Roman 0.448
Liberation Serif 0.460
Luxi Serif 0.530
Calibri 0.470
Times
(Nimbus Roman No9 L)
0.450