CSS 3: Tipo de letra (fuente)

En esta lección se comentan las propiedades CSS definidas en la recomendación CSS Fonts Module Level 3, editada por John Daggett y otros, que se publicó en septiembre de 2018. Estas propiedades permiten al autor de una página web elegir con todo detalle el tipo de letra que se mostrará en el navegador del usuario.

El autor de la página web puede entregar la fuente al navegador mediante el mecanismo de las fuentes web (que se comenta en la lección sobre fuentes web) o esperar que el usuario tenga instalada la fuente deseada en su ordenador. Si la fuente solicitada no está instalada, en algunos de esos casos los navegadores hacen una transformación por software que imita el resultado esperado y en otros no.


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

Interlineado: line-height

La propiedad line-height permite establecer el interlineado de un bloque de texto. El valor se puede expresar en cualquier unidad de longitud, aunque lo más lógico es utilizar porcentajes o em. Si se expresa en porcentajes, el valor 100% corresponde al interlineado normal.

p {
  line-height: 100%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  line-height: 200%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  line-height: 150%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  line-height: 75%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  line-height: 1.5em;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

La propiedad compuesta font

La propiedad compuesta font permite definir simultáneamente las propiedades relacionadas con el tipo de letra: font-style, font-variant (solamente los valores definidos en CSS 2.1 normal y small-caps), font-weight, font-stretch, font-size, line-height y font-family (explicadas más adelante en esta misma página).

Al escribir la propiedad compuesta, el orden en que deben aparecer los valores es el orden en que aparecen las propiedades simples en el párrafo anterior. Las únicas propiedades que deben aparecer obligatoriamente son font-size y font-family. Si se escribe la propiedad line-height debe aparecer separada de font-size por una barra (/).

p {
  font: 150% sans-serif;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font: bold 90% monospace;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font: oblique bold 120% cursive;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font: small-caps 100%/200% serif;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Si las propiedades no están en el orden correcto, o falta alguna de las propiedades obligatorias, los navegadores no aplican ninguna propiedad.

Incorrecto
p {
  font: monospace 150%;
  /* el orden no es correcto */
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto
p {
  font: bold 90%;
  /* falta font-type */
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto
p {
  font: oblique 120% sans-serif bold;
  /* bold debería estar al principio */
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Si los navegadores no entienden una propiedad (como es actualmente -octubre de 2018-, la propiedad font-stretch utilizada en el ejemplo), los navegadores aplican el resto de propiedades.

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  font: condensed 120% sans-serif;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Además, la propiedad font admite los valores caption, icon, menu, message-box, small-caption y status-bar, que hacen referencia a los tipos de letra que utiliza el sistema operativo para esos elementos.

p {
  font: caption;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font: icon;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font: menu;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font: message-box;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font: small-caption;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font: status-bar;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Tipo de letra: font-family

La propiedad font-family permite establecer el tipo de letra (fuente) del elemento. Se puede escribir el nombre concreto de una fuente (escribiéndolo entre comillas si el nombre contiene espacios), pero hay que tener en cuenta que si la persona que ve la página no tiene esa fuente instalada en su ordenador (o la tiene, pero con otro nombre), su navegador utilizará una fuente distinta. Para evitar este problema se puede utilizar uno de los nombres genéricos (serif, sans-serif, monospace, cursive o fantasy). Los navegadores tienen asociados a cada nombre genérico una fuente que sí que está instalada en el ordenador.

p {
  font-family: serif;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-family: sans-serif;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-family: monospace;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-family: cursive;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-family: fantasy;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Si el valor de la propiedad font-family son varios nombres de fuentes separados por comas, el navegador aplicará la primera fuente de la lista que esté instalada en el ordenador. Por ello es conveniente incluir en último lugar uno de los nombres genéricos, por si acaso el resto de fuentes no estuvieran disponibles. Hay que tener en cuenta también que si una fuente no contiene un carácter determinado, el navegador busca ese carácter en las siguientes fuentes de la lista. Los nombres de las fuentes deben escribirse entre comillas si contienen espacios.

p {
  font-family: "Palatino", sans-serif;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-family: "Tahoma", "Geneva", sans-serif;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-family: "Homer Simpson", cursive;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Los nombres de fuentes se pueden escribir en mayúsculas o minúsculas.

p {
  font-family: "Arial", serif;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-family: "arial", serif;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-family: "ARIAL", serif;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Tamaño del tipo de letra: font-size

La propiedad font-size permite establecer el tamaño del tipo de letra (fuente) del elemento. Se puede expresar el tamaño de varias maneras: tamaño absoluto, tamaño relativo, distancia o porcentaje, aunque generalmente se aconseja utilizar unidades relativas (% o em).

Tamaño absoluto

El navegador tiene definidos una serie de tamaños que se llaman xx-small, x-small, small, medium, large, x-large y xx-large. Estos tamaños el navegador los elige en función de la resolución de la pantalla, el tamaño de la fuente, etc.

A continuación se encuentra cada uno de los nombres de tamaños absolutos a su propio tamaño: xx-small, x-small, small, medium, large, x-large y xx-large.

p {
  font-size: x-large;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Tamaño relativo

Se pueden utilizar los valores larger o smaller. Estos valores se interpretan con respecto al elemento padre y se toman el valor siguiente o anterior de la lista de tamaños absolutos.

En el ejemplo siguiente, la hoja de estilo establece que una lista tiene que tener un tamaño menor que el elemento padre. Si se escriben listas anidadas, cada sublista es cada vez más pequeña. Cuando se llega al límite inferior, el navegador puede seguir reduciendo la letra o dejarla en xx-small.

ul {
  font-size: smaller;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Valor numérico con unidades absolutas

Se puede definir un tamaño concreto, por ejemplo, 14pt, 3cm, 20px, etc.

Nota: Hace años (antes de 2010) se desaconsejaba utilizar estas unidades de forma indiscriminada porque los navegadores no permitían reducir ni ampliar los elementos definidos mediante unidades absolutas, pero actualmente no existe esa limitación.

p {
  font-size: 16pt;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Valor numérico con unidades relativas

Se puede definir el tamaño de cada elemento mediante porcentajes (o em o rem, teniendo en cuenta que 1em = 100% y que 1rem = 100%), que se interpretan con respecto al tamaño base.

p {
  font-size: 150%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-size: 120%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-size: 80%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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.

Grosor del trazo (negrita): font-weight

La propiedad font-weight permite elegir el grosor del trazo. Existen nueve valores numéricos (100, 200, 300, 400, 500, 600, 700, 800, 900), del más fino al más grueso. Además, existen los valores normal y bold que deben coincidir respectivamente, con los valores numéricos 400 y 700. Y por último, existen los valores lighter y bolder que significan, respectivamente, un valor inferior y superior en la lista de valores numéricos y se interpretan respecto del elemento padre.

Al definir el grosor con valores numéricos, Firefox, Chrome y Edge muestran tres grosores distintos (de 100 a 500 como normal, 600 y 700 como bold y 800 y 900 más grueso que bold). Esos grosores no se aprecian de la misma manera en cada tipo de letra. En la siguiente lista, cada valor está en el grosor indicado por el propio valor:

p { font-family: sans-serif; }

p.g400 { font-weight: 400; }

p.n { font-weight: normal; }

p.g700 { font-weight: 700; }

p.b { font-weight: bold; }

p.g900 { font-weight: 900; }
ERROR (no puede mostrarse el objeto)
Enlace externo

El valor bolder hace que el elemento se muestre, si es posible, con un grosor mayor que el del elemento en el que está incluido. En el siguiente ejemplo, cada lista se muestra con un grosor mayor que la anterior:

p {
  font-weight: normal;
}

ul {
  font-family: sans-serif;
  font-weight: bolder;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Inclinación (itálica): font-style

Una forma de obtener una variante de un tipo de letra es inclinar las letras. En Tipografía se distinguen dos formas de inclinación:

Para distinguir si una fuente es oblicua o itálica, es necesario fijarse en letras como la "a". La imagen siguiente muestra un ejemplo: la primera línea corresponde a la fuente Aldine (normal e itálica) y la segunda línea corresponde a la fuente Arial (normal y oblicua).

Ejemplo de fuente oblique e italic

La propiedad font-style permite elegir la inclinación: normal, oblique o italic. Para que los navegadores puedan mostrar las variantes oblicua e itálica es necesario que en el ordenador esté instaladas fuentes de ambas variantes, lo que no suele ser habitual.

En general, si no hay instaladas fuentes específicas, los navegadores simplemente inclinan el tipo de letra normal, tanto para oblique como italic. Como esto correspondería más bien a la variante oblicua, se aconseja dar el valor oblique en vez de italic.

p {
  font-family: sans-serif;
  font-size:150200%;
  font-style: normal;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-family: sans-serif;
  font-size: 150%;
  font-style: italic;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-family: sans-serif;
  font-size: 150%;
  font-style: oblique;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Para probar si realmente los navegadores distinguen entre italic y oblique, se debe instalar una fuente que tenga ambas variantes. Por ejemplo, la fuente libre Latin Modern Roman. El ejemplo siguiente puede verse correctamente una vez instalada esa fuente (realmente son 11 fuentes distintas para cubrir las variantes más habituales).

Incorrecto en Chrome Correcto en Firefox Incorrecto en Edge
p.italic {
  font-family: "Latin Modern Roman 10";
  font-style: italic;
}

p.oblique {
  font-family: "Latin Modern Roman 10";
  font-style: oblique;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Actualmente (octubre de 2018), Firefox es el único navegador que aplica esta propiedad correctamente, como se comenta en la página de diferencias entre navegadores. El ejemplo anterior da el siguiente resultado en Firefox:

Ejemplo de fuente oblique e italic

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 2018) las fuentes incluidas en los sistemas operativos no disponen de esas características, así que es imposible aprovecharlas.

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 unicamente 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;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-variant: small-caps;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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. Admite los valores normal, small-caps, all-samll-caps, petite-caps, all-petite-caps, unicase y titling-caps.

p {
  font-variant-caps: normal;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-variant: small-caps;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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.

Hueco
p {

}
ERROR (no puede mostrarse el objeto)
Enlace externo
Correcto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  font-kerning: auto;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Correcto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  font-kerning: normal;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Correcto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  font-kerning: none;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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 carácteres 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.

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:

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
p {

}
ERROR (no puede mostrarse el objeto)
Enlace externo

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:

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  font-kerning: none;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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.

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  font-variant-ligatures: normal;
}
  
ERROR (no puede mostrarse el objeto)
Enlace externo
Correcto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  font-variant-ligatures: none;
}
  
ERROR (no puede mostrarse el objeto)
Enlace externo

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.

Correcto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  font-variant-numeric: proportional-nums;
}
  
ERROR (no puede mostrarse el objeto)
Enlace externo
Correcto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  font-variant-numeric: tabular-nums;
}
  
ERROR (no puede mostrarse el objeto)
Enlace externo

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.

En construcciónFaltan 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

En construcciónFalta explicar y ejemplos.

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

En construcciónFalta explicar y ejemplos.

Síntesis de fuentes: font-synthesis

Admite los valores none, weight y style

En construcciónFalta 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 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.

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

Correcto en Chrome Correcto en Firefox Correcto en Edge
p {
  font-size: 20px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox Incorrecto en Edge
p {
  font-size: 20px;
  font-size-adjust: 1.5;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Incorrecto en Firefox Incorrecto en Edge
p {
  font-size: 20px;
  font-size-adjust: 0.5;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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.

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;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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";
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Nota: Este ejemplo utiliza fuentes en formato woff para que pueda verse correctamente en Internet Explorer 11 (IE 11 no admite fuentes woff2).