Tipo de letra (fuente) (2). CSS. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco. www.mclibre.org

Estas propiedades permiten elegir con todo detalle el tipo de letra que se mostrará en el navegador del usuario.

En esta lección se comentan las propiedades relacionadas con características tipográficas, que en su mayoría no estaban incluidas en CSS 2, publicada en mayo de 1998.

Subfamilias tipográficas

En Tipografía existen lo que se llaman subfamilias tipográficas, es decir, fuentes que son variaciones de una fuente determinada. Algunas de las posibles variaciones son:

Las propiedades font-weight, font-style y font-variant le indican al navegador qué variación es la que debería mostrar. El navegador es el que tiene que decidir qué fuente (de las instaladas en el ordenador en el que se están viendo las páginas) debe utilizar o, si es capaz de ello, simular la propiedad.

Características tipográficas

Las fuentes en formato OpenType pueden incluir muchas características tipográficas (lista de características en Wikipedia). En CSS 3 se han añadido propiedades para poder acceder a esas características. Por desgracia, actualmente (octubre de 2022) las fuentes incluidas en los sistemas operativos no suelen disponer de esas características.

En Internet se pueden encontrar fuentes que sí incluyen algunas de esas características y podemos utilizarlas mediante el mecanismo de las fuentes web. En los ejemplos de este apartado se utilizan algunas de estas fuentes.

La propiedad compuesta font-variant

En CSS 2, la propiedad font-variant únicamente admitía los valores normal y small-caps, que permite mostrar un tipo de letra en versalitas.

Las versalitas son tipos en las que todos los caracteres están en mayúsculas, aunque con el tamaño de las minúsculas (en principio, con la altura de la letra x del tipo, aunque no siempre es así).

p {
  font-variant: normal;
}

p {
  font-variant: small-caps;
}

En CSS 3, font-variant se ha convertido en una propiedad compuesta, que además de las versalitas permite seleccionar varias características tipográficas disponibles en las fuentes OTF (y en algunos casos, TTF).

Versalitas: font-variant-caps

La propiedad font-variant-caps permite mostrar un tipo de letra en versalitas (tipo de letra en el que las letras minúsculas tienen la forma pero no el tamaño de las letras mayúsculas). Admite los valores:

normal: minúsculas y mayúsculas tienen formas distintas
small-caps: minúsculas y mayúsculas tiene la misma forma pero tamaños distintos
all-small-caps: minúsculas y mayúsculas tiene la misma forma y tamaño
petite-caps: minúsculas y mayúsculas tiene la misma forma pero tamaños distintos (inferior a small-caps)
all-petite-caps: minúsculas y mayúsculas tiene la misma forma y tamaño (inferior a small-caps)
unicase: sólo las mayúsculas se muestran en versalitas
titling-caps: variante de versalitas en las que las mayúsculas son más finas que las mayúsculas en versalitas estándar

p {
  font-variant-caps: normal;
}

p {
  font-variant: small-caps;
}

p {
  font-variant: all-small-caps;
}

p {
  font-variant: petite-caps;
}

p {
  font-variant: all-petite-caps;
}

p {
  font-variant: unicase;
}

p {
  font-variant: titling-caps;
}

Kerning: font-kerning

La propiedad font-kerning permite aplicar kerning (interletraje) al tipo de letra. El kerning es la posibilidad de acercar más o menos dos letras consecutivas aprovechando la forma de las letras. Admite los valores auto, normal y none.

p {

}

p {
  font-kerning: auto;
}

p {
  font-kerning: normal;
}

p {
  font-kerning: none;
}

Ligaduras: font-variant-ligatures

La propiedad font-variant-ligatures permite aplicar ligaduras en el tipo de letra. Las ligaduras es la posibilidad de unir dos caracteres consecutivos. Admite los valores normal, none, common-ligatures, no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures, contextual y no-contextual.

No he podido encontrar ningún ejemplo de ligadura real en las fuentes habituales de Windows, pero en Internet se pueden encontrar fuentes con ligaduras. Un ejemplo es la fuente libre Pecita.

p {
  font-variant-ligatures: normal;
}

p {
  font-variant-ligatures: none;
}

Se suele dar como ejemplo de ligadura la unión de letras "f" consecutivas, como muestra el siguiente ejemplo en el que las letras "f" consecutivas se muestran sin espacio entre ellas:

p {

}

Pero en realidad no es una ligadura sino un efecto de kerning, como demuestra el siguiente ejemplo en el que al desactivar el kerning las letras "f" consecutivas se muestran entonces con espacio entre ellas:

p {
  font-kerning: none;
}

Formato de números: font-variant-numeric

La propiedad font-variant-numeric permite mostrar números con formatos especiales. Admite los valores normal, lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal y slashed-zeros.

No he podido encontrar ningún ejemplo de formato de números en las fuentes habituales de Windows, pero en Internet se pueden encontrar fuentes con formato de números. Un ejemplo es la fuente gratuita Anivers Regular.

p {
  font-variant-numeric: proportional-nums;
}

p {
  font-variant-numeric: tabular-nums;
}

Posición: font-variant-position

La propiedad font-variant-position permite elegir la posición del carácter. Admite los valores normal, sub y super.

Faltan ejemplos.

Tamaño y sustitución de caracteres asiáticos: font-variant-east-asian

La propiedad font-variant-east-asian permite elegir el tipo de sustitución y la anchura de caracteres en los lenguajes asiáticos orientales. Admite los valores normal, jis78, jis83, jis90, jis04, simplified, traditional, full-width, proportional-width y ruby

Falta explicar y ejemplos.

Características de fuentes OpenType: font-feature-settings

Falta explicar y ejemplos.

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 minúsculas 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.

Nota: La propiedad font-size-adjust se introdujo en la recomendación CSS 2, pero no se incluyó en la recomendación CSS 2.1, por lo que en CSS 2 se consideraba obsoleta. Sin embargo, esta propiedad se recuperó en la recomendación CSS Fonts Module Level 3, publicada en septiembre de 2018.

Firefox interpreta parcialmente esta propiedad, mientras que Google Chrome no interpreta esta propiedad, como se comenta en la página de diferencias entre navegadores.

p {
  font-size: 20px;
}

p {
  font-size: 20px;
  font-size-adjust: 1.5;
}

p {
  font-size: 20px;
  font-size-adjust: 0.5;
}

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 y ultra-expanded.

Nota: La propiedad font-stretch se introdujo en la recomendación CSS 2, pero no se incluyó en la recomendación CSS 2.1, por lo que en CSS 2 se consideraba obsoleta. Sin embargo, esta propiedad se recuperó en la recomendación CSS Fonts Module Level 3, publicada en septiembre de 2019.

Los tipos de letra no suelen incluir todas estas versiones, y como los navegadores no la emulan por software, esta propiedad no tiene efecto en la mayoría de tipos de letra.

p {
  font-stretch: ultra-expanded;
}

El problema es que las fuentes expandidas y condensadas se suelen distribuir como fuentes distintas. Una forma de poder utilizar esta propiedad consiste en asociar las variantes a la propiedad font-stretch mediante una regla-arroba @font-face.

@font-face {
  font-family: "Encode Sans";
  font-stretch: normal;
  src: url("encode-sans-v2-latin-regular.woff") format("woff");
}

@font-face {
  font-family: "Encode Sans";
  font-stretch: condensed;
  src: url("encode-sans-condensed-v2-latin-regular.woff") format("woff");
}

@font-face {
  font-family: "Encode Sans";
  font-stretch: expanded;
  src: url("encode-sans-expanded-v2-latin-regular.woff") format("woff");
}

.condensed {
  font-stretch: condensed;
}

.expanded {
  font-stretch: expanded;
}

p {
  font-family: "Encode Sans";
}

CSS: Tipo de letra (fuente) (2)