Tipografía

En el área de diseño, el término "fuente" que se refiere al estilo que tienen las letras y otros caracteres, que se puede aplicar en cualquier programa que permita usar texto enriquecido (un procesador de textos gráfico o una página web...). Por ejemplo, una fuente sería "Arial", "Verdana" o "Times".

Cuando usamos el término "tipografía" a menudo queremos aplicar el mismo significado que el del término "fuente". Sin embargo, un uso más restrictivo de este término sería el arte o técnica necesaria para diseñar las fuentes tipográficos, no haciendo referencia a cada una de las fuentes existentes, sino a la manera en la que se crean o se usan.

En cuanto a una "familia tipográfica" se refiere a todas las variaciones de una fuente. Por ejemplo, Arial puede escribirse con texto normal, pero también con negrita o itálica. Todas esas variaciones forman parte de la misma familia tipográfica.

Originalmente en la web sólo se podían usar aquellas fuentes instaladas en el ordenador del usuario, por lo que los diseñadores estaban muy limitados a usar solamente aquellas fuentes disponibles prácticamente en la totalidad de los sistemas, como Arial, Times New Roman y unas pocas más.

Para paliar los efectos de la existencia o no de fuentes en la web es posible definir varias fuentes, separadas por comas. Por ejemplo en CSS eso se consigue al declarar la propiedad font-family, de esta manera:

font-family: 'Times New Roman', Times, serif;

Afortunadamente con la llegada de @font-face en CSS 2 es posible especificar archivos disponibles en el servidor, o un CDN, que permitan incluir nuevas fuentes y que funcionen independientemente de la configuración de fuentes del ordenador del usuario.

@font-face llegó en versiones tempranas de los navegadores. El mayor problema era el soporte a distintos archivos o formatos de definición de fuentes. No obstante, en la actualidad es posible usar fuentes con bastante libertad.

El código para especificar una fuente sería algo como esto:

@font-face {
    font-family: "Gelasio";
    src: url("https://fonts.gstatic.com/s/gelasio/v1/cIf9MaFfvUQxTTqS9C6hYUsEkIo.woff2");
}

Luego podríamos usar esta fuente en cualquier etiqueta, con el correspondiente CSS:

h1 { 
    font-family: "Gelasio", serif;
}

A pesar que la fuente debería de estar disponible para todos los usuarios, ya que la hemos cargado mediante @font-face, sigue siendo interesante especificar alguna otra tipografía, para que se tenga en cuenta mientras que carga la fuente descargada, pero también por si el navegador no entiende @font-face o no puede procesar ese tipo de archivo de tipografía indicado.

Puedes encontrar más información en el artículo sobre @font-face.

Uno de los recursos más atractivos de un diseño es la combinación de tipografías. la combinación se debe dar por medio del contraste o el uso de tipografías complementarias.

En general dos tipografías combinan bien si hay suficiente contraste entre ellas. En caso que ese contraste no se produzca, la combinación deja de ser un recurso estético positivo a ser percibido como un error.

El contraste se puede conseguir de múltiples maneras:

• Usando parámetros distintos de la fuente dentro de una misma familia, por ejemplo contrastar por medio de un cambio de grosor entre dos fuentes de tipo "helvetica", una gruesa y otra fina.
• Combinación de dos familias tipográficas de distintas características, que sean lo suficientemente distintas, por ejemplo con y sin serifa.