CSS 3: Tipo de letra (fuente)

Los tipos de letras pueden ser tan diferentes que no existe un método universal de clasificación y denominación de los tipos de letra. En las hojas de estilo esta situación se resuelve mediante propiedades que permiten describir el aspecto general del tipo de letra y es el navegador el que escoge, de entre los tipos de letra instalados en el ordenador, el que mejor se adapta a esa descripción.

En esta página se comentan las propiedades que permiten describir el tipo de letra (la fuente) en una página web:

Propiedades de tipo de letra CSS 2

Las propiedades relacionadas con el tipo de letra definidas en la recomendación CSS 2.1 y que también se encuentran en la futura recomendación CSS 3: Fuentes son las siguientes:

Estas propiedades se explican detalladamente en la lección CSS 2: Tipo de letra (fuente).

Ajuste del tamaño del tipo de letra: font-size-adjust

Cada tipo de letra tiene una proporción distinta entre el tamaño del tipo y el tamaño de la letra x de ese mismo tipo (para entendernos, una proporción distinta entre los tamaños de las letras mayúsculas y minúsculas). Es decir, que para un tamaño determinado, unos tipos de letras tienen las letras minusuculas más grandes que otros (y por tanto, son más legibles a tamaños pequeños).

Esto puede provocar problemas cuando el navegador no pueden mostrar el tipo de letra indicado por el autor y debe sustituirlo por otro. Si el tipo de letra que elige el navegador tiene unas minúsculas más pequeñas que las del tipo de letra elegido por el autor de la página, puede que el texto sea ilegible, ya que la propiedad font-size únicamente indica el tamaño del tipo.

La propiedad font-size-adjust permite establecer la proporción entre el tamaño del tipo y el de la letra x, indicándolo como número decimal, mediante

Nota: Internet Explorer no interpreta esta propiedad, como se comenta en la página de diferencias entre Firefox e Internet Explorer (Chrome tampoco). Firefox la interpreta desde la versión 3. Lo que hace Firefox es multiplicar el valor de font-size por el de font-size-adjust y dar a la letra minúscula x ese tamaño.

Correcto en Firefox Incorrecto en Internet Explorer Incorrecto en Chrome
p {
  font-size: 16px;
  font-size-adjust: 1.5;
}

Esta letra x tiene 16 x 1.5 = 24 px de altura.

Correcto en Firefox Incorrecto en Internet Explorer Incorrecto en Chrome
p {
  font-size: 16px;
  font-size-adjust: 0.5;
}

Esta letra x tiene 16 x 0.5 = 8 px de altura.

Anchura: font-stretch

La propiedad font-stretch permite elegir que un tipo de letra más o menos condensado o expandido. Los valores permitidos son los siguientes: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded.

Los navegadores no son capaces de interpretar esta propiedad, que no está incluida en la recomendación CSS 2.1, aunque sí que está incluida en la futura recomendación CSS 3: Fuentes, actualmente (octubre de 2014) en elaboración.

Incorrecto en Firefox Incorrecto en Internet Explorer Incorrecto en Chrome
p {
  font-stretch: ultra-condensed;
}

Este párrafo está en el tipo ultra-condensado

Incorrecto en Firefox Incorrecto en Internet Explorer Incorrecto en Chrome
p {
  font-stretch: ultra-expanded;
}

Este párrafo está en el tipo ultra-extendido