Tipografía

> Temas > Tipografía
Editar

Tipografías, familias tipográficas o simplemente fuentes son estilos de las letras de un texto, elemento fundamental del diseño.

Las fuentes o familias tipograficas son uno de los elementos más clásicos del diseño. Permiten personalizar el aspecto de los textos y ayudan a direccionar un diseño hacia su objetivo. A la vez, son capaces de aportar un mayor valor estético a las simples palabras.

Existen muchos tipos de familias tipográficas, entre las que destacan los elementos con serifa y sin serifa.

Más información:

Fuente vs Tipografía vs Familia Tipográfica

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.

Editar

Tipografía en la web con CSS

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.

Editar

¿Quieres añadir algo sobre Tipografía?

Crea artículos, recursos o comparte información sobre Tipografía

Crear un bloque

Tipografía

Preguntas y respuestas

Se han recibido 2 faqs en Tipografía

Hacer una pregunta