CSS: Tipo de letra (fuente) (1)

En esta lección y en las lecciones CSS Fuentes (2) y CSS Fuentes web se comentan las propiedades CSS definidas en la recomendación CSS Fonts Module Level 3, publicada en septiembre de 2018.

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 "clásicas", que ya estaban incluidas en CSS 2, publicada en mayo de 1998.

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 alguna de las propiedades incluidas en la propiedad compuesta, aplican el resto de propiedades.

En el ejemplo siguiente, los navegadores no aplican actualmente (octubre de 2021) el valor condensed, aunque sí los valores 120% y sans-serif. El motivo es que la fuente no incluye esa variante (en el apartado dedicado a la propiedad font-stretch se comenta cómo conseguir definir variantes en fuentes que dispongan de esas variantes, utilizando la regla-arroba @font-face).

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.

La propiedad font-family puede tomar como valor el nombre concreto de una fuente. El nombre de la fuente debe escribirse entre comillas si contiene espacios (y puede escribirse entre comillas si no contiene espacios). Si el ordenador no tiene instalada la fuente indicada, el navegador utilizará una fuente de la familia genérica serif (que se explica a continuación). En los ejemplos siguientes si no está instalada alguna de las fuentes Arial, Segoe UI u Homer Simpson, el ejemplo se verá en el mismo tipo de letra que el cuarto ejemplo.

p {
  font-family: Arial;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-family: "Segoe UI";
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-family: "Homer Simpson UI";
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-family: serif;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Para evitar este problema se puede utilizar uno de los nombres de familia de fuentes genéricos serif, sans-serif, monospace, cursive y fantasy. Los navegadores tienen asociados a cada nombre genérico una fuente que sí que está instalada en el ordenador (salvo en el caso de la familia genérica fantasy que puede no tener asociada ninguna fuente especial).

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

serif afim10 sans-serif afim10 monospace afim10 cursive afim10

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.

p {
  font-family: "Constantia", serif;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-family: "Segoe IU", sans-serif;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-family: "Consolas", monospace;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Los nombres de fuentes se pueden escribir en mayúsculas o minúsculas. En lo ejemplos siguientes se escribe la fuente Arial de cuatro maneras distintas. La última forma es incorrecta (porque el nombre de la fuente está escrito con espacios), por lo que el ejemplo se ve con una fuente serif.

Nota: En una enumeración de fuentes, lo lógico es poner al final la familia genérica a la que pertenecen el resto de fuentes. Así, en los ejemplos siguientes lo lógico sería haber escrito la familia genérica sans-serif. Pero estos ejemplos no se ha hecho así para que se pueda identificar fácilmente cuándo el navegador no puede aplicar la fuente (concretamente, en el último ejemplo).

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
p {
  font-family: "a r i a l", 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, los navegadores 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 utilizar una fuente que tenga ambas variantes, por ejemplo, la fuente libre Latin Modern Roman. El ejemplo siguiente utiliza fuentes web para mostrar esa fuente aunque no esté instalada en el ordenador del usuario.

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

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

Nota: Firefox aplica esta propiedad correctamente, mientras que Chrome no lo hace, como se comenta en la página de diferencias entre navegadores.