Fuentes mixtas visualmente estables

Cuando se mezclan diferentes familias de fuentes, por ejemplo, cuando se insertan fragmentos de código intercalados o se cambian las familias de fuentes para diferentes temas, las diferencias en la "altura de x" (la altura de las letras minúsculas) pueden hacer que una fuente parezca mucho más pequeña o más grande que la otra. Esto puede provocar una legibilidad deficiente y cambios de diseño.

La propiedad font-size-adjust te permite normalizar el tamaño visual del texto ajustando el tamaño de la fuente según una métrica de fuente específica (por lo general, la altura de x).

Pasos de implementación

1. OBLIGATORIO: Aplica font-size-adjust a los elementos en los que la coherencia de la fuente sea fundamental, como los contenedores que usan fuentes web o los bloques con familias de fuentes mixtas.
2. OBLIGATORIO: Usa la palabra clave from-font en los elementos para que el tamaño de la fuente en los elementos anidados coincida automáticamente con las proporciones de la fuente principal.
3. OBLIGATORIO: Usa un valor de anulación de la relación de aspecto numérico específico para font-size-adjust (p.ej., font-size-adjust: 0.5) para normalizar las proporciones de forma independiente cuando las proporciones de la fuente en las que se basa provienen de diferentes temas.

Ejemplo: Normalización automática de la altura de x

Usar from-font es el enfoque más sólido. Extrae la relación de aspecto de la altura de la x de la primera fuente disponible y la aplica a las fuentes de los elementos secundarios.

.content-area {
  font-family: "MyCustomWebFont";
  /* Automatically extract and apply x-height ratio from MyCustomWebFont */
  font-size-adjust: from-font;
}
.content-area span{
  font-family: "MyOtherCustomWebFont"
}

Ejemplo: Especifica una altura de x determinada

Cuando la fuente que se ajustará no es un elemento secundario de la fuente en la que se basa el tamaño, especifica un valor para ajustar la altura de x.

.theme{
  font-family: Verdana, sans-serif;
}
.theme.alternate{
  font-family: Times;
  /* Set to the aspect ratio (x-height / font-size) of the primary font */
  font-size-adjust: 0.51;
}

Estrategias de resguardo

OBLIGATORIO: En los navegadores que no admiten font-size-adjust, las fuentes se renderizarán con su valor natural de font-size. Debes proporcionar una estrategia de resguardo válida para los navegadores no compatibles con un bloque @supports para mitigar este problema:

• Usa @supports not (font-size-adjust: from-font) para detectar la compatibilidad con font-size-adjust y proporcionar estilos de resguardo (p.ej., altura de línea o tamaño de fuente ajustados).
• Elige fuentes con alturas de x similares a las de tu fuente principal.
• Aplica anulaciones específicas de font-size y line-height para familias de fuentes alternativas y anidadas.

/* Feature detection for font-size-adjust */
@supports not (font-size-adjust: from-font) {
  .content-area {
    /* Manual adjustment for browsers without support (if needed) */
    line-height: 1.6;
    font-size: 1.2rem;
  }
}