Propiedad CSS font-size-adjust

La propiedad font-size-adjust preserva la legibilidad del texto cuando la font-family principal no está disponible y se sustituye por una fuente alternativa. Para ello, obliga al texto renderizado a mantener una x-height objetivo independientemente de cuál sea la fuente de la pila que se use.

Por qué importa la x-height

La x-height es la altura de las letras minúsculas (como la letra "x"), medida desde la línea base. La em-height es el tamaño completo de la fuente. La relación entre ambas se denomina valor de aspecto de la fuente:

aspect value = x-height / em-height

Dos fuentes con el mismo font-size pueden parecer notablemente distintas en tamaño porque sus valores de aspecto difieren. Por ejemplo, Verdana (valor de aspecto ~ 0.58) parece más grande y legible que Georgia (~ 0.52) al mismo tamaño de punto. Por eso, cuando una fuente alternativa reemplaza a la fuente principal, el texto sustituido puede verse demasiado grande o demasiado pequeño aunque font-size no haya cambiado.

font-size-adjust resuelve esto. Cuando se le asigna un número, el navegador escala la fuente en uso para que su x-height sea igual a ese número multiplicado por el font-size actual. El tamaño visual de las letras minúsculas se mantiene constante sin importar qué fuente gane en la cadena de alternativas.

Un flujo de trabajo práctico: toma el valor de aspecto de tu fuente preferida (la primera opción) y pásalo como valor de font-size-adjust. Las fuentes alternativas se ajustarán entonces para coincidir con el aspecto de tu fuente preferida.

Valor inicial	none
Se aplica a	Todos los elementos. También se aplica a ::first-letter y ::first-line.
Heredada	Sí.
Animable	Sí.
Versión	CSS2.1
Sintaxis DOM	object.style.fontSizeAdjust = "0.5";

Nota: La compatibilidad de font-size-adjust con los navegadores es escasa. Firefox la soportó hasta la versión 118, luego la eliminó en la versión 119 (2023), y nunca ha estado disponible en Chrome, Safari ni Edge. En la práctica, ya no se puede depender de ella. El enfoque moderno más robusto es alojar las fuentes de forma propia (para que la alternativa rara vez se active) y ajustar la fuente alternativa con los descriptores size-adjust, ascent-override y descent-override dentro de una regla @font-face.

Sintaxis

Sintaxis de la propiedad CSS font-size-adjust

font-size-adjust: number | none | initial | inherit;

Ejemplo de la propiedad font-size-adjust

En el siguiente ejemplo, ambos párrafos solicitan una fuente que probablemente no esté instalada ("Made Up Font") y recurren a sans-serif como alternativa. El segundo párrafo añade font-size-adjust, por lo que su texto alternativo se normaliza a una x-height fija. En un navegador que aún implemente la propiedad, el párrafo ajustado se leerá de forma más consistente:

<!DOCTYPE html>
<html>
  <head>
    <title>font-size-adjust example</title>
    <style>
      p {
        font-family: "Made Up Font", sans-serif;
        font-size: 20px;
      }
      .adjusted {
        font-size-adjust: 0.5;
      }
    </style>
  </head>
  <body>
    <h1>font-size-adjust</h1>
    <p>Without font-size-adjust: the fallback font keeps its own x-height.</p>
    <p class="adjusted">
      With font-size-adjust: 0.5 the fallback x-height is normalized.
    </p>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción
none	Sin ajuste del tamaño de fuente. Este es el valor predeterminado de la propiedad.
number	Un número positivo que representa la relación de aspecto (x-height dividida por em-height).
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Compatibilidad con navegadores

Navegador	Compatibilidad
Chrome	Sin soporte
Firefox	1.5–118 (eliminado en v119)
Safari	Sin soporte
Edge	Sin soporte
Opera	Sin soporte

Práctica

¿Cuál es la función principal de la propiedad 'font-size-adjust' en CSS?

Controla el grosor de la fuente.Preserva la x-height de una fuente y garantiza que no se distorsione al cambiarla.Ajusta el color de la fuente.Garantiza que la legibilidad de las letras minúsculas se preserve cuando se cambia la fuente.Redimensiona la fuente para ajustarse al ancho del viewport.

Ver también

Propiedad CSS font-size — establece el tamaño real del texto.
Propiedad CSS font-family — define la pila de fuentes y sus alternativas.
Regla CSS @font-face — carga fuentes personalizadas y ajusta las alternativas con size-adjust.
Abreviatura CSS font — establece múltiples propiedades de fuente a la vez.