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%;
}
p {
line-height: 200%;
}
p {
line-height: 150%;
}
p {
line-height: 75%;
}
p {
line-height: 1.5em;
}
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;
}
p {
font: bold 90% monospace;
}
p {
font: oblique bold 120% cursive;
}
p {
font: small-caps 100%/200% serif;
}
Si las propiedades no están en el orden correcto, o falta alguna de las propiedades obligatorias, los navegadores no aplican ninguna propiedad.
p {
font: monospace 150%;
/* el orden no es correcto */
}
p {
font: bold 90%;
/* falta font-type */
}
p {
font: oblique 120% sans-serif bold;
/* bold debería estar al principio */
}
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 2022) el valor condensed, aunque sí los valores 120% y sans-serif. El motivo es que la fuente que utilizan 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;
}
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;
}
p {
font: icon;
}
p {
font: menu;
}
p {
font: message-box;
}
p {
font: small-caption;
}
p {
font: status-bar;
}
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;
}
p {
font-family: "Segoe UI";
}
p {
font-family: "Homer Simpson UI";
}
p {
font-family: serif;
}
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;
}
p {
font-family: sans-serif;
}
p {
font-family: monospace;
}
p {
font-family: cursive;
}
p {
font-family: fantasy;
}
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;
}
p {
font-family: "Segoe IU", sans-serif;
}
p {
font-family: "Courier New", monospace;
}
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;
}
p {
font-family: "ARIAL", serif;
}
p {
font-family: "ArIaL", serif;
}
p {
font-family: "a r i a l", serif;
}
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;
}
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;
}
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;
}
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%;
}
p {
font-size: 120%;
}
p {
font-size: 80%;
}
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:
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;
}
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:
oblicua: la forma de la letra no cambia, simplemente se inclina
itálicas: además de inclinarse, la forma de algunas letras cambia
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).
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;
}
p {
font-family: sans-serif;
font-size: 150%;
font-style: italic;
}
p {
font-family: sans-serif;
font-size: 150%;
font-style: oblique;
}
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.
p.oblique {
font-family: "Latin Modern Roman";
font-style: oblique;
}
p.italic {
font-family: "Latin Modern Roman";
font-style: italic;
}
