Desde CSS se pueden controlar las fuentes (tipografías) que se van a utilizar en una página web y sus características (estilo, interlineado, interletraje...)

Las fuentes (tipografías) también tienen cabida dentro del mundo del CSS. De hecho, son muy importantes. La elección de una tipografía, su tamaño, color, interlineado y otras características pueden cambiar, de forma consciente o inconsciente, la forma en la que una persona interpreta o capta los contenidos de una página web.

Características de una tipografía

Existen muchos estilos de fuentes, pero antes de profundizar en ello, veamos algunas de las características principales de una tipografía:

Tipografías con serifa y sin serifa

Tradicionalmente, se han utilizado tipografías con serifa en medios impresos argumentando que dichos bordes ofrecen una mayor legibilidad que las tipografías de paloseco. Sin embargo, en medios digitales, estas últimas suelen ser más utilizadas puesto que dan un aspecto más limpio y claro que las tipografías con serifa.

Por otro lado, existe un tipo de fuente denominada fuente monoespaciada, que se basa en que cada una de sus letras tienen exactamente la misma longitud horizontal. Son muy útiles para tareas de programación o emuladores de terminal, donde se leen mejor líneas con estas características.

Monoespaciado

Familia tipográfica

Existe un amplio abanico de propiedades CSS para seleccionar las fuentes o tipografías a utilizar. Empezaremos por la más lógica, la de seleccionar una familia tipográfica, que no es más que indicar mediante CSS el nombre de la tipografía que queremos utilizar:

Propiedad Valor Significado
font-family: fuente Indica el nombre de la fuente (tipografía) a utilizar.
font-size: tamaño Indica el tamaño de la fuente.

Con la primera propiedad, denominada font-family, podemos seleccionar se puede seleccionar cualquier tipografía simplemente escribiendo su nombre. Si dicho nombre está compuesto por varias palabras separadas por un espacio, se aconseja utilizar comillas simples para indicarla (como se ve en el segundo ejemplo):

div {
    font-family: Verdana;
    font-family: 'PT Sans';     /* Otro ejemplo */
}

Esta es la forma más básica de indicar una tipografía. Sin embargo, hay que tener en cuenta que estas fuentes sólo serán visibles si el usuario las tiene instaladas en su sistema.

Esto hace que esta tarea se convierta en algo muy complejo, puesto que los diferentes sistemas operativos (Windows, Mac, GNU/Linux) tienen diferentes tipografías instaladas (y carecen de tantas otras) así como que también entramos en temas de licencias y tipografías propietarias, que no se permiten utilizar en según que casos.

Consejo: La página FontFamily.io incorpora un sencillo formulario para mostrar información sobre determinadas tipografías y como se mostrarían en diferentes sistemas (Windows, Mac OS, GNU/Linux, Android, iOS, Windows Phone, etc...). Más adelante, veremos la regla @font-face de CSS3, que permite utilizar fuentes tipográficas sin necesidad de tenerlas instaladas, utilizando repositorios gratuitos de fuentes como Google Fonts.

Para paliar en parte este problema, una de las primeras buenas prácticas es añadir varias tipografías alternativas, separadas por una coma:

div {
    font-family: Vegur, 'PT Sans', Verdana, Sans-serif;
}

Así pues, el navegador busca la fuente Vegur en nuestro sistema, en el caso de no estar instalada, pasa a la siguiente y así sucesivamente. Se recomienda especificar al menos 3 tipografías diferentes.

Truco: Como última opción de font-family se recomienda utilizar una palabra clave denominada «web-safe fonts» (fuentes seguras). Estas palabras claves son simplemente una forma de decirle al navegador que busque una tipografía instalada en el sistema que cumpla con ciertas características.

Las palabras clave de fuentes seguras son las siguientes:

Fuente Significado Fuentes de ejemplo
serif Tipografía con serifa Times New Roman, Georgia...
sans-serif Tipografía sin serifa Arial, Verdana, Tahoma...
cursive Tipografía en cursiva Sanvito, Corsiva...
fantasy Tipografía decorativa Critter, Cottonwood...
monospace Tipografía monoespaciada Courier, Courier New...

Tamaño de la tipografía

Otra de las propiedades más utilizadas con las tipografías es font-size, que permite especificar el tamaño que tendrá la tipografía que utilicemos:

Propiedad Valor Tipo de medida
font-size: xx-small | x-small | small | medium | large | x-large | xx-large Absoluta (tamaño predefinido)
font-size: smaller | larger Relativa (más pequeña/grande)
font-size: tamaño Específica (tamaño exacto)

Se pueden indicar tres tipos de valores:

Estilo y peso

A las tipografías elegidas se les puede aplicar ciertos estilos, muy útil para maquetar los textos, como por ejemplo negrita o cursiva (italic). La propiedad que utilizamos es font-style y puede tomar los siguientes valores:

Valor Significado
normal Estilo normal, por defecto. Sin cambios aparentes.
italic Cursiva. Estilo caracterizado por una ligera inclinación de las letras hacia la derecha.
oblique Oblícua. Idem al anterior, salvo que esta inclinación se realiza de forma artificial.

Con la propiedad font-style podemos aplicarle estos estilos. En la mayoría de los casos, se aprecia el mismo efecto con los valores italic y oblique, no obstante, italic muestra la versión cursiva de la fuente, específicamente creada por el diseñador, mientras que oblique es una representación forzosa artificial de una tipografía cursiva.

Por otro lado, tenemos el peso de la fuente, que no es más que el grosor de la misma. También depende de la fuente elegida, ya que no todas soportan todos los tipos de grosor. De forma similar a como hemos visto hasta ahora, se puede especificar el peso de una fuente mediante tres formas diferentes:

Propiedad Valor Significado
font-weight: normal | bold Medidas absolutas (predefinidas)
font-weight: bolder | lighter Medidas relativas (dependen de la actual)
font-weight: peso Medida específica (número del peso concreto)

Peso de la fuente: font-weight

Las tipografías en CSS3

Las versiones previas de CSS tenían una gran limitación: la imposibilidad de utilizar fuentes personalizadas. Es cierto que bastaba con utilizar la propiedad font-family y especificar el nombre de la fuente a utilizar. Pero resulta que no era tan bonito como podía parecer en un principio. Por varias razones:

En definitiva, aunque teníamos los mecanismos, era complicado conseguir cambiar la fuente y obtener el mismo resultado de diseño en todos los navegadores y sistemas disponibles.

Actualmente, todo esto ha cambiado debido a CSS3 y la regla @font-face, la cual permite descargar una fuente o tipografía, cargarla en el navegador y utilizarla en nuestras páginas. Todo ello de forma transparente al usuario.

Veamos como se utiliza:

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'),
         url(opensans.eot) format('embedded-opentype'),
         url(opensans.ttf) format('truetype'),
         url(opensans.otf) format('opentype'),
         url(opensans.woff) format('woff');
}

La regla @font-face permite crear uno (o varios) bloques donde definir las tipografías a cargar en el documento. En el ejemplo superior vamos a hacerlo con la fuente Open Sans, una tipografía libre creada por Steve Matteson para Google.

Basicamente, abrimos un bloque @font-face, establecemos su nombre mediante font-family y definimos sus características mediante propiedades como font-style o font-weight. El factor clave viene a la hora de «adjuntar» la tipografía, cosa que se hace mediante la propiedad src con los siguientes valores:

Valor Significado Soporte
local('Open Sans') Si hay fuente 'Open Sans' instalada en el sistema, se ahorra la descarga. Todos
url(opensans.eot) Se enlaza tipografía en formato EOT Embedded OpenType Sólo IE
url(opensans.ttf) Se enlaza tipografía en formato TTF True Type Todos
url(opensans.otf) Se enlaza tipografía en formato OTF Open Type Todos
url(opensans.svg) Se enlaza tipografía en formato SVG Scalable Vector Graphics Obsoleto
url(opensans.woff) Se enlaza tipografía en formato WOFF Web Open Font Format Todos

Consejo: Actualmente, basta con utilizar la expresión local() y la expresión url utilizando el formato WOFF. Actualmente, se ha empezado a adoptar este formato como sistema principal, el cuál no es más que un archivo Open Type (OTF) o True Type (TTF) comprimido para ahorrar ancho de banda (reducciones de hasta un 40%) que además también puede contener metadatos adicionales.

Usar Google Fonts como proveedor

En la actualidad, es muy común utilizar Google Fonts como repositorio proveedor de tipografías para utilizar en nuestros sitios web por varias razones:

En la propia página de Google Fonts podemos seleccionar las fuentes con las características deseadas y generar un código HTML con la tipografía (o colección de tipografías) que vamos a utilizar. No perder de vista el medidor que Google pone a nuestra disposición, porque dependiendo del tipo de fuente o cantidad de características puede resultar una colección de tipografías muy pesadas que ralentizarán nuestra página de forma notable:

Google Fonts

Todo esto nos generará el siguiente código que será el que tendremos que insertar en nuestro documento HTML, concretamente, antes de finalizar la sección <head>:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>

Como se puede ver, al añadir este código, estamos enlazando en el documento HTML un enlace al repositorio de Google, que nos genera automáticamente todo el código CSS necesario de @font-face especialmente diseñado para las características y tipografías escogidas.

Si además, por ejemplo, añadimos también la familia de tipografías Roboto (con grosor 400) y Lato (con grosor 300 y 400), el código necesario sería el siguiente:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700|Roboto:400|Lato:300,400' rel='stylesheet' type='text/css'>

De esta forma conseguimos cargar varias tipografías desde el repositorio de Google de una sola vez, sin la necesidad de varias líneas de código diferentes, que a su vez conectarían varias veces con Google, pudiendo hacerlo de una sola vez.

Para terminar, sólo necesitaremos añadir la propiedad font-family:'Open Sans', font-family:'Lato' o font-family:'Roboto' a los textos que queramos dar formato con dichas tipografías.

Propiedades CSS3

CSS3 añade algunas propiedades interesantes relacionadas con fuentes y tipografías. Por ejemplo, la propiedad font-stretch, con la cuál puedes definir el grado de expansión de la tipografía, desde muy condensado (letras muy unidas entre sí) a muy expandido (letras muy separadas entre sí):

Anchura de la fuente: font-stretch

Propiedad Valor
font-stretch ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded

Existen muchas otras propiedades interesantes, aunque la mayoría sólo con soporte parcial en los navegadores actuales. Recuerda siempre revisar el soporte de las propiedades CSS que utilizas, ya que puede cambiar de una versión a otra del navegador (generalmente, mejorando el soporte).

Algunas otras propiedades interesantes son las siguientes:

Propiedad Valor Significado
font-variant: normal | small-caps Indica si utilizar versalitas o no
font-size-adjust number | none Ajusta el aspecto (diferencia de tamaño entre x y X)

La primera de ellas, font-variant, permite establecer el valor small-caps para convertir el texto en formato versalitas, una variación de mayúsculas, con un tamaño ligeramente inferior, similar al de las minúsculas.

Por otro lado, font-size-adjust permite ajustar la diferencia de tamaño entre las minúsculas y mayúsculas, tomando como base la x minúscula y la X mayúscula.

Atajo: Tipografías

Finalmente, algunas de las propiedades más utilizadas de tipografías y fuentes se pueden resumir en una propiedad de atajo, como viene siendo habitual. El esquema es el siguiente:

div {
    font: <style> <variant> <weight> <size/line-height> <family>;
}

Por ejemplo, utilizar la tipografía Arial, con la fuente alternativa Verdana o una fuente segura sin serifa, a un tamaño de 16 píxeles, con un interlineado de 22 píxeles, un peso de 400, sin utilizar versalitas y con estilo cursiva:

div {
    font: italic normal 400 16px/22px Arial, Verdana, Sans-serif;
}
Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).