# 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 página se comentan las propiedades que permiten describir el tipo de letra (la fuente) en una página web:

## La propiedad compuesta font

La propiedad compuesta font permite definir simultáneamente las propiedades relacionadas con el tipo de letra: font-style, font-variant, font-weight, 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;
    }
| Esto es un párrafo con fuente sans-serif (en Windows suele ser Arial) al 150%.
    p {
      font: bold 90% monospace;
    }
| Esto es un párrafo con fuente monospace (en Windows suele ser Courier) al 90% y en negrita.
    p {
      font: oblique bold 120% cursive;
    }
| Esto es un párrafo con fuente cursive (en Windows suele ser Comic Sans) al 120%, en negrita y en cursiva.
    p {
      font: small-caps 100%/200% serif;
    }
| Esto es un párrafo con fuente serif (en Windows suele ser Times New Roman) al 100%, con un interlineado doble, y en versalitas.

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

    p {
      font: monospace 150%;
      /* el orden no es correcto */
    }
| Esto debería ser un párrafo con fuente monospace (en Windows suele ser Courier) al 150%.
    p {
      font: bold 90%;
      /* falta font-type */
    }
| Esto debería ser un párrafo al 90% y en negrita.

Si los primeros valores son correctos, pero al final hay valores que deberían estar en otro lugar, los navegadores aplican los valores correctos e ignoran los valores finales (font-family también se ignora).

    p {
      font: oblique 120% sans-serif bold;
      /* bold debería estar al principio */
    }
| Esto debería ser un párrafo con fuente sans-serif (en Windows suele ser Arial) al 120%, y en negrita.
    p {
      font: 120% sans-serif small-caps;
    /* small-caps debería estar al principio */
    }
| Esto debería ser un párrafo con fuente sans-serif (en Windows suele ser Arial) al 120% y en versalitas.

Además, la propiedad font admite los valores caption, icon, menu, message-box, small-caption y status-bar.

    p {
      font: caption;
    }
| Este párrafo se muestra como un caption.
    p {
      font: icon;
    }
| Este párrafo se muestra como un icon.
    p {
      font: menu;
    }
| Este párrafo se muestra como un menu.
    p {
      font: message-box;
    }
| Este párrafo se muestra como un message-box.
    p {
      font: small-caption;
    }
| Este párrafo se muestra como un small-caption.
    p {
      font: status-bar;
    }
| Este párrafo se muestra como un status-bar.

Volver al principio de la página

## 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, cursive, fantasy o monospace). Los navegadores tienen asociados a cada nombre genérico una fuente que sí que está instalada en el ordenador.

    p {
      font-family: serif;
    }
| Esto es un párrafo con fuente serif (en Windows suele ser Times New Roman)
    p {
      font-family: sans-serif;
    }
| Esto es un párrafo con fuente sans-serif (en Windows suele ser Arial)
    p {
      font-family: cursive;
    }
| Esto es un párrafo con fuente cursive (en Windows suele ser Comic Sans)
    p {
      font-family: fantasy;
    }
| Esto es un párrafo con fuente fantasy (en Windows suele ser Verdana)
    p {
      font-family: monospace;
    }
| Esto es un párrafo con fuente monospace (en Windows suele ser Courier)

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;
    }
| Esto es un párrafo con fuente "Palatino" o, si no está instalada en el ordenador cliente, sans-serif (en Windows suele ser Arial)
    p {
      font-family: "Tahoma", "Geneva", sans-serif;
    }
| Esto es un párrafo con fuente "Tahoma" o, si no está instalada en el ordenador cliente, "Geneva" o, si tampoco está instalada en el ordenador cliente, sans-serif (en Windows suele ser Arial)
    p {
      font-family: "Homer Simpson", cursive;
    }
| Esto es un párrafo con fuente "Homer Simpson" o, si no está instalada en el ordenador cliente, cursive (en Windows suele ser Comic Sans)

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

    p {
      font-family: "Arial", serif;
    }
| Esto es un párrafo con fuente "Arial" o, si no está instalada en el ordenador cliente, serif (en Windows suele ser Times New Roman)
    p {
      font-family: "arial", serif;
    }
| Esto es un párrafo con fuente "arial" o, si no está instalada en el ordenador cliente, serif (en Windows suele ser Times New Roman)
    p {
      font-family: "ARIAL", serif;
    }
| Esto es un párrafo con fuente "ARIAL" o, si no está instalada en el ordenador cliente, serif (en Windows suele ser Times New Roman)

Volver al principio de la página

## Tamaño del tipo de letra: font-size y font-size-adjust

### Tamaño: 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;
    }
| Esto es un párrafo de tamaño 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;
    }
| Lista 1 Lista 2 Lista 3 Lista 4

#### Valor numérico

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

    p {
      font-size: 16pt;
    }
| Esto es un párrafo de tamaño 16pt.

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,
- Chrome mantiene el tamaño del tipo de letra cuando se modifica el tamaño con el menú Ver > Tamaño de texto,
- Firefox no lo mantiene cuando se modifica el tamaño con el menú Configuración > Avanzada > Contenido web.

#### Valor relativo

Se puede definir el tamaño de cada elemento mediante porcentajes (o em, teniendo en cuenta que 1em = 100%), 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.

    p {
      font-size: 150%;
    }
| Esto es un párrafo de tamaño 150%.

    p {
      font-size: 120%;
    }
| Esto es un párrafo de tamaño 120%.

    p {
      font-size: 80%;
    }
| Esto es un párrafo de tamaño 80%.

Volver al principio de la página

### Ajuste de tamaño: 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 y se indica como número decimal.

Esta propiedad no está incluida en la recomendación CSS 2.1, aunque sí que está incluida en la recomendación CSS 3 Fonts (actualmente -diciembre de 2011- en fase de borrador).

Nota: Internet Explorer no interpreta esta propiedad, como se comenta en la página de diferencias entre Firefox e Internet Explorer (Chrome tampoco). Firefox la interpreta desde la versión 3. Lo que hace Firefox es multiplicar el valor de font-size por el de font-size-adjust y dar a la letra minúscula x ese tamaño.

    p {
      font-size: 16px;
      font-size-adjust: 1.5;
    }
| Esta letra x tiene 16 x 1.5 = 24 px de altura.

    p {
      font-size: 16px;
      font-size-adjust: 0.5;
    }
| Esta letra x tiene 16 x 0.5 = 8 px de altura.

Volver al principio de la página

## 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.

Estas propiedades son interpretadas con limitaciones por Firefox, Internet Explorer y Chrome.

Volver al principio de la página

### 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, ultra-expanded.

los navegadores no son capaces de interpretar esta propiedad, que no está incluida en la recomendación CSS 2.1, aunque sí que está incluida en la recomendación CSS 3 Fonts (actualmente -diciembre de 2011- en fase de borrador).

    p {
      font-stretch: ultra-condensed;
    }
| Este párrafo está en el tipo ultra-condensado
    p {
      font-stretch: ultra-expanded;
    }
| Este párrafo está en el tipo ultra-extendido

Volver al principio de la página

### 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. Desgraciadamente, los navegadores no distinguen entre itálica y oblicua y muestran en los dos casos la variante oblicua, como puede verse en el ejemplo siguiente. Por tanto, al utilizar esta propiedad es más apropiado dar el valor oblique, que es el que aplican realmente los navegadores.

    p {
      font-family: sans-serif;
      font-size: 200%;
      font-style: normal;
    }
| Este párrafo está en el tipo normal
    p {
      font-family: sans-serif;
      font-size: 200%;
      font-style: italic;
    }
| Este párrafo está en el tipo itálica
    p {
      font-family: sans-serif;
      font-size: 200%;
      font-style: oblique;
    }
| Este párrafo está en el tipo oblicuo

Volver al principio de la página

### Versalitas: font-variant

Las versalitas son tipos en las que todos los carácteres 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í). La propiedad font-variant permite elegir esta variante (los valores posibles son normal y small-caps).

    p {
      font-variant: normal;
    }
| Este párrafo está en el tipo normal: aAbBcCdDeEfF
    p {
      font-variant: small-caps;
    }
| Este párrafo está en versalitas: aAbBcCdDeEfF

Volver al principio de la página

### 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 e Internet Explorer sólo muestran dos grosores distintos (de 100 a 500 como normal y de 600 a 900 como bold), mientras que Chrome muestra tres grosores distintos. El valor 600 no se muestra de la misma manera en Chrome que en Firefox o Internet Explorer. En la siguiente lista , cada valor está en el grosor indicado por el propio valor, por lo que se verán sólo 2 o 3 grosores distintos dependiendo del navegador:

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

    p.g500 {
      font-weight: 500;
    }

    p.g600 {
      font-weight: 600;
    }

    p.g700 {
      font-weight: 700;
    }

    p.g800 {
      font-weight: 800;
    }

    p.g900 {
      font-weight: 900;
    }

    p.g {
      font-weight: bold;
    }
| Este párrafo está en negrita (500) Este párrafo está en negrita (600) Este párrafo está en negrita (700) Este párrafo está en negrita (800) Este párrafo está en negrita (900) Este párrafo está en negrita (bold)
    p {   font-weight: normal;
    }

    ul {
      font-weight: bolder;
    }
| Este es un párrafo normal Lista con trazo más grueso Lista con trazo todavía más grueso Lista con trazo... Lista con trazo...

Nota: Internet Explorer 8 muestra el valor 600 como los valores 700, 800 y 900, pero las versiones anteriores lo hacían de forma distinta, como se comenta en la página de diferencias entre IE8 e IE7.

Volver al principio de la página

## 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%;
    }
| Este párrafo tiene un interlineado del 100%, es decir un interlineado sencillo. Este es el mismo interlineado que se aplica si no se utiliza esta propiedad.
    p {
      line-height: 200%;
    }
| Este párrafo tiene un interlineado del 200%, es decir un interlineado doble. Las líneas de texto están separadas el doble de lo normal.
    p {
      line-height: 150%;
    }
| Este párrafo tiene un interlineado del 150%, es decir un interlineado de 1,5 líneas. Las líneas de texto están separadas un 50% más de lo normal.
    p {
      line-height: 75%;
    }
| Este párrafo tiene un interlineado del 150%, es decir un interlineado de 3/4 líneas. Las líneas de texto están más juntas de lo normal, lo que puede dificultar su lectura.
    p {
      line-height: 1.5em;
    }
| Este párrafo tiene un interlineado del 1.5em, es decir un interlineado de 1,5 líneas. Las líneas de texto están separadas un 50% más de lo normal.

Volver al principio de la página

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.