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 lección aprenderás las propiedades que te permiten describir el tipo de letra (la fuente) en una página web:

• la propiedad compuesta font
• tipo de letra
• tamaño del tipo de letra
• Subfamilias tipográficas
  • anchura
  • inclinación
  • versalitas
  • grosor del trazo

La propiedad compuesta font

La propiedad compuesta font te permite definir simultáneamente las propiedades relacionadas con el tipo de letra: font-style, font-variant, font-weight, font-size, font-family y line-height (explicadas más adelante en esta misma página).

En esta propiedad compuesta es importante el orden en que aparecen las propiedades. El orden correcto es el que aparece en el párrafo anterior, aunque algunas pueden no definirse. Desgraciadamente, Mozilla e Internet Explorer no interpretan de la misma manera esta propiedad, por lo que quizás sea más seguro escribir las propiedades por separado.

	p { font: bold oblique serif; }	Esto es un párrafo con fuente serif (en Windows suele ser Times), negrita y oblicua.
	p { font-weight: bold; font-style: oblique; font-family: serif; }	Esto es un párrafo con fuente serif (en Windows suele ser Times), negrita y oblicua.

Debería estudiar qué propiedades hay que escribir necesariamente y cuáles se pueden saltar y si hay interpretaciones comunes para IE y Mozilla.

Volver al índice

Tipo de letra

La propiedad font-family te permite establecer el tipo de letra (fuente) del elemento. Puedes escribir el nombre concreto de una fuente (escribiéndolo entre comillas si el nombre contiene espacios), ten en cuenta que si la persona que ve tu 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 puedes utilizar un nombre genérico (serif, sans-serif, cursive, fantasy, monospace). El navegador del usuario tiene asociado a cada nombre genérico una fuente que sí que está instalada en su ordenador.

Si en esta propiedad escribes varios nombres de fuentes separados por espacios, el navegador aplicará la primera fuente de la lista que tenga. Lo que se suele hacer es escribir uno o dos nombres concretos y después un nombre genérico, por si acaso. Ten en cuenta que si una fuente no contiene un carácter determinado, el navegador también lo busca en las siguientes fuentes.

Volver al índice

Tamaño del tipo de letra

La propiedad font-size te permite establecer el tamaño del tipo de letra (fuente) del elemento. Puedes expresar el tamaño de varias maneras: tamaño absoluto, tamaño relativo, distancia o porcentaje.

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.

Como muestra, aquí puedes ver como muestra tu navegador cada uno de los tamaños: xx-small, x-small, small, medium, large, x-large y xx-large.

Tamaño relativo

Puedes 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 escribes 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.

Valor numérico

Puedes definir un tamaño concreto, por ejemplo, 14pt, 3cm, etc. Esta forma de definir el tamaño se utiliza cuando diseñas una página para una resolución determinada y quieres conservar un determinado diseño (distribución de elementos en la página, etc.). Conviene evitar este tipo de diseños tan rígidos.

Si se definen los tamaños con valores numéricos, Internet Explorer mantiene el tamaño del tipo de letra cuando se modifica el tamaño con el menú Ver > Tamaño de texto, pero Firefox no lo mantiene cuando se modifica el tamaño con el menú Ver > Tamaño del texto.

Valor relativo

Puedes definir el tamaño de cada elemento mediante porcentajes, que se interpretan con respecto al tamaño base. Esta es quizá la forma más conveniente de expresar los tamaños, pues permite que el usuario elija el tamaño más adecuado a su pantalla.

Volver al índice

Subfamilías 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:

• la anchura
• la inclinación
• versalitas
• el grosor del trazo

Las propiedades font-style, font-stretch, font-weight, 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.

Volver al índice

Anchura

La propiedad font-stretch te permite elegir que el tipo de letra se muestre más o menos condensado o expandido Desgraciadamente, ni Mozilla ni Internet Explorer son capaces de interpretar esta propiedad. De hecho, está propiedad desaparecerá seguramente de la recomendación CSS 2.1.

Si tu navegador no es capaz de interpretar esta propiedad, los valores permitidos siguientes ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded se verán todos con el mismo tipo de letra. Si es capaz, los verás en tipos de letra distintos más o menos anchos.

Volver al índice

Inclinación

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 contigua 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 te permite elegir la inclinación: normal, oblique o italic. Desgraciadamente, tanto Mozilla como Internet Explorer no distinguen entre itálica y oblicua y muestran en los dos casos la variante oblicua, puesto que no modifican ninguna letra, solamente las inclinan).

Volver al índice

Versalitas

Las versalitas son mayúsculas con el tamaño de las minúsculas (en principio, con la altura de la letra x del tipo, aunque no siempre es así). La propiedad font-variant te permite elegir esta variante (los valores posibles son normal y small-caps).

Cuando un texto está en versalitas, Internet Explorer hace todas las letras (mayúsculas o minúsculas) del mismo tamaño, mientras que en Mozilla las mayúsculas son más grandes.

Volver al índice

Grosor del trazo

La propiedad font-weight te 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.

Desgraciadamente, Mozilla sólo muestra dos grosores distintos e Internet Explorer tres, por lo que en esta lista verás sólo 2 o 3 grosores distintos:

• 100, 200, 300, 400, 500, 600, 700, 800, 900
• normal y bold
• lighter y bolder

Volver al índice