Volver al índiceTipo 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 (/).

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p { 
  font: 150% sans-serif; 
}

Esto es un párrafo con fuente sans-serif (en Windows suele ser Arial) al 150%.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p { 
  font: bold 90% monospace; 
}

Esto es un párrafo con fuente monospace (en Windows suele ser Courier) al 90% y en negrita.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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%.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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).

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p { 
  font: caption; 
}

Este párrafo se muestra como un caption.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p { 
  font: icon; 
}

Este párrafo se muestra como un icon.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p { 
  font: menu; 
}

Este párrafo se muestra como un menu.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p { 
  font: message-box; 
}

Este párrafo se muestra como un message-box.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p { 
  font: small-caption; 
}

Este párrafo se muestra como un small-caption.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p { 
  font-family: serif; 
}

Esto es un párrafo con fuente serif (en Windows suele ser Times New Roman)

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p { 
  font-family: sans-serif; 
}

Esto es un párrafo con fuente sans-serif (en Windows suele ser Arial)

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p { 
  font-family: cursive; 
}

Esto es un párrafo con fuente cursive (en Windows suele ser Comic Sans)

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p { 
  font-family: fantasy; 
}

Esto es un párrafo con fuente fantasy (en Windows suele ser Verdana)

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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)

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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)

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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)

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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)

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p { 
  font-size: 16pt; 
}

Esto es un párrafo de tamaño 16pt.

Si se definen los tamaños con valores numéricos:

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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p { 
  font-size: 150%; 
}

Esto es un párrafo de tamaño 150%.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p { 
  font-size: 120%; 
}

Esto es un párrafo de tamaño 120%.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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 futura recomendación CSS 3: Fuentes, actualmente (octubre de 2013) en elaboración.

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.

Correcto en Firefox Incorrecto en Internet ExplorerIncorrecto en Chrome
p { 
  font-size: 16px;
  font-size-adjust: 1.5; 
}

Esta letra x tiene 16 x 1.5 = 24 px de altura.

Correcto en Firefox Incorrecto en Internet ExplorerIncorrecto en Chrome
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:

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 futura recomendación CSS 3: Fuentes, actualmente (octubre de 2013) en elaboración.

Incorrecto en Firefox Incorrecto en Internet ExplorerIncorrecto en Chrome
p { 
  font-stretch: ultra-condensed; 
}

Este párrafo está en el tipo ultra-condensado

Incorrecto en Firefox Incorrecto en Internet ExplorerIncorrecto en Chrome
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:

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

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p { 
  font-family: sans-serif;
  font-size: 200%;
  font-style: normal; 
}

Este párrafo está en el tipo normal

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p { 
  font-family: sans-serif;
  font-size: 200%;
  font-style: italic; 
}

Este párrafo está en el tipo itálica

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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).

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p { 
  font-variant: normal; 
}

Este párrafo está en el tipo normal: aAbBcCdDeEfF

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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:

Correcto en Firefox Correcto en Internet Explorer Incorrecto en Chrome
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)

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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...

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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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 página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org
Autor: Bartolomé Sintes Marco
Última modificación: 12 de octubre de 2013

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