Tipografía en el Diseño Gráfico-Web

¿Quieres saber por qué se utiliza IMPACT para los memes y Times New Roman para los libros? Descubre la historia de las tipografías y cómo aplicarlas

¿Qué significa tipografía?

La palabra tipografía viene del griego τύπος “tipos” (que significa golpe o huella), y γράφω “gráfο” que significa escribir. Se denomina tipografía a la elección y el uso de tipos. Las tipos son elementos del lenguaje escrito diseñados con una misma unidad de estilo. Dichos elementos pueden ser letras, números y símbolos pertenecientes a un contenido impreso o digital.

¿Qué podemos conseguir con la tipografía?

  • Distinguirnos de la competencia
  • Crear afinidad con el público objetivo
  • Potenciar la impresión que queremos conseguir en el público, más allá del mensaje
  • Evocar de un solo vistazo los mensajes que queremos transmitir

¿De qué depende la selección de tipografía?

  • Los valores de una marca
  • Audiencia / Público objetivo
  • La competencia
  • El mensaje que se quiere transmitir
  • Las tendencias de cada momento

Muchos alumnos confunden la palabra “tipografía” con la palabra “letra”. Ojo que la tipografía es un conjunto de elementos entre los que se encuentran las letras.

Historia de la tipografía

La historia de la tipografía tiene que ver tanto con el desarrollo del lenguaje y los sistemas escritos como con la utilización de la tecnología para su impresión o visualización. Obviamente, hace miles de años no estilaba esto de tener ordenadores e imprentas ¿Qué hacían entonces los humanos? Pues grabar caracteres en huesos, imprimir sellos o escribir en papel.

Historia de la tipografía
Oracle bone fragment
Dinastía Shang (1600-1046 a.C.)
China
Rogers Fund, 1918
Historia de la tipografía
On Calligraphy de Mi Fu 
Dinastía Song (Entre el 1097 y el 1099)
China

Los romanos, por otro lado, eran más de inscripciones en bronce y piedra. De hecho, las mayúsculas cuadradas romanas utilizadas en dichas inscripciones se convirtieron en la principal inspiración para las letras mayúsculas en los tipos de letra serif, tipo Roman.

Historia de la tipografía
Tabula Claudiana Lugdunum
Después del año 48
Lyon
Autora de la fotografía: Marie-Lan Nguyen
Historia de la tipografía
Tabula Claudiana Lugdunum
Finales del siglo II / III d.C.
Descubierta en Cimiez
Autora de la fotografía: Jérémie Silvestro

Pero van los chinos de la dinastía Tang (siglo VIII d. C.) y se inventan un tipo específico de impresión en madera. Se utilizaban planchas de madera entintadas para imprimir imágenes sobre papel.

Historia de la tipografía
Copia impresa del Diamond Sutra
Mayo de 868
China
British Library
Historia de la tipografía
Copia impresa del Diamond Sutra
Mayo de 868
China
British Library

La utilización de la impresión en madera se terminó extendiendo por toda Asia pero… ¿Qué pasaba mientras en Europa? Pues que mientras tanto Europa andaba por la edad media, y allí los libros se escribían a mano y no con poco esfuerzo.

Historia de la tipografía
The Lindisfarne Gospels
Hacia el año 700
Lindisfarne, Holy Island
British Library
Historia de la tipografía
The Lindisfarne Gospels
Hacia el año 700
Lindisfarne, Holy Island
British Library

La idea de la imprenta se expandió de este a oeste. Johannes Gutenberg, hacia el 1439, introdujo la impresión en Europa con su imprenta mecánica de tipo móvil. Se trataba de colocar planchas de tipografías móviles que posteriormente se entintaban y grababan en papel.

Historia de la tipografía
Printer in 1568
Autor: Jost Amman
Libro: Historia del Diseño Gráfico de Meggs Philip

En 1455, Gutenberg completó varias copias de la Biblia. Las copias se vendían por el salario de tres años para un empleado medio, lo que era significativamente más barato que una Biblia manuscrita que podría llevarle a una sóla persona más de un año prepararla. Antes de Gutenberg, todos los libros de Europa se copiaban a mano. Su invento ayudó a simplificar el proceso de producción y a que las publicaciones impresas llegarán por tanto a muchas más personas.

Historia de la tipografía
Biblia latina
1455
Creadores:Johann Gutenberg, Johann Fust (impresor), Peter Schoeffer (impresor)
British Library

En el siglo XVI, en Francia, Garamond fue el primer tipógrafo en realizar tipografía de tipo romana redonda y cursiva.

Historia de la tipografía
De Aetna
1495
Autores: Aldus Manutius, Pietro Bembo
Bayerische Staatsbibliothek

En la actualidad, existen muchas herederas de esta fuente. Por ejemplo, Adobe Garamond Pro:

Historia de la tipografía

En los siglos XVII y XVIII se introdujeron nuevas tendencias en la tipografía occidental: las tipografías recibieron un mayor contraste entre trazos gruesos y finos, las serifas entre corchetes se convirtieron en líneas finas casi rectas y el acento se volvió vertical.

Caslon es el nombre que se le da a las tipografías serif diseñadas por William Caslon I (c. 1692-1766) en Londres, o inspiradas en su trabajo.

Hay muchas herederas actuales de esta fuente. Por ejemplo, Adobe Caslon Pro:

Historia de la tipografía

Durante la revolución industrial, las imprentas trabajan a destajo para la nueva sociedad urbana. Se crean nuevas tipografías más llamativas y se inventa la linotipia: un sistema capaz de configurar las páginas en mucho menos tiempo. Se abaratan los periódicos y estos tienen muchísimas más páginas.

Al tipográfico británico Vincent Figgins (1766-1844) se le atribuye el diseño de la primera tipografía egipcia (slab serif), a la que simplemente nombró «Antique» y que publicó en 1815.

Historia de la tipografía
Vincent Figgins Type Specimens – 1801 and 1815
Libro publicado en 1967
Printing Historical Society
Historia de la tipografía
Vincent Figgins Type Specimens – 1801 and 1815
Libro publicado en 1967
Printing Historical Society

A mediados del siglo XIX, el movimiento de Artes y Oficios intentó reformar el diseño y la decoración. Fue una reacción contra una disminución de calidad en los estándares que los artistas, diseñadores y creadores asociaron con la producción de maquinaria y fábricas. Se realizan renovaciones de diseños tipográficos y se hace especial esfuerzo en el diseño de libros.
Arthur Heygate Mackmurdo fue un arquitecto y diseñador inglés, que influyó en el movimiento de artes y oficios, a través del Century Guild of Artists. Fue pionero del estilo Art Nouveau británico.

Historia de la tipografía
Portada de Arthur Mackmurdo
Wren’s City Churches
1883

Morris Fuller Benton fue un diseñador de tipografías estadounidense que dirigió el departamento de diseño de American Type Founders (ATF), del que fue el diseñador tipográfico jefe de 1900 a 1937. Benton completó 221 diseños de tipografías, incluidos rediseños de modelos históricos (como Bodoni), diseños originales (como Hobo y Broadway) y cambio grosores de tipografías existentes (como Century Old Style).

Historia de la tipografía
Hobo light
ATF
1910
Historia de la tipografía

A las puertas del siglo XX nos encontramos con la secesión Vienesa, un movimiento artístico relacionado con el Art Nouveau, formado por un grupo de artistas austríacos entre los que se encontraban Josef Hoffman, Koloman Moser, Otto Wagner y Gustav Klimt. Publicaron su propia revista Ver Sacrum, donde podemos observar diseños y tipografías típicos de este periodo.

Edward Johnston es famoso por diseñar la tipografía letra sans-serif que se utilizó en el metro de Londres. También fue el diseñador del famoso símbolo circular utilizado en la red de metro. Podemos encontrar esta interesante tipografía como P22 Underground.

Historia de la tipografía
Dibujo original del símbolo de metro
Edward Jonhnston
London’s transport museum
Historia de la tipografía

La escuela de diseño de la Bauhaus pretendió unir el arte y la tecnología utilizando el diseño para una sociedad industrial. Querían unir a artistas y artesanos para crear un estándar formal. Se han cumplido ya más de 100 años de su fundación pero sus enseñanzas en el área del diseño gráfico, en especial de las tipografías son muy relevantes aún a día de hoy.

Historia de la tipografía
Diseño de cartel de Joost Schmidt

De 1924 a 1927 Paul Renner diseña la archiconocida tipografía Futura, de palo seco y características racionalistas. Esta se convirtió en una de las tipografías más usadas a partir de entonces, una tendencia que podemos observar aún en la actualidad. Se ha utilizado para logotipos como el de Volkswagen, IKEA, CNN y la NASA, entre muchos otros.

En 2018 Adobe sacó la serie de tipografías Hidden Treasures of the Bauhaus Dessau. La colección se inspira en las principales tipografías de la escuela, rediseñadas para su uso digital.

Historia de la tipografía

Seguramente asociamos la tipografía Cooper Black con la publicidad de mediados de los años sesenta y setenta, pero en realidad fue creada por Oswald Cooper alrededor de 1920. Se creó originariamente como una tipografía publicitaria para periódicos y revistas, y terminó siendo una de las tipografías más populares en la década de 1920. Sin embargo, su versatilidad y adaptabilidad a la tecnología cambiante es lo que lo hizo relevante para la segunda mitad del siglo XX.

Historia de la tipografía
Poster para la película de Andy Warhol’s Pork at the Roundhouse
1971
itsnicethat.com

En 1931 Stanley Morison (Starling Burgess y Victor Lardent) diseñan la Times New Roman, una tipografía del tipo serif encargada para el periódico The Times (Londres). Aunque no es utilizada actualmente por The Times, se encuentra muy extendida para la impresión de libros.

Adrian Johann Frutiger diseñó tipografías desde 1954 hasta 2010 siendo las más conocidas Univers (que salió en 1957) y Frutiger (en los años 60).

Historia de la tipografía
Foundry Univers
American Type Founders
1968
Historia de la tipografía
Frutiger
Aeropuerto Charles de Gaulle
1970

En 1961 Edouard Hoffman y Mac Miedinger diseñan la Helvetica. Se convirtió en una de las tipografías más populares de mediados del siglo XX. A lo largo de los años, se ha lanzado una amplia gama de variantes en diferentes pesos, anchos y tamaños, así como diseños similares en una gran variedad de alfabetos.

Historia de la tipografía
A Handbook of Types
Tipografías de Amsterdam Continental

Impact es una tipografía sans-serif de estilo industrial diseñada por Geoffrey Lee en 1965. Es muy conocida por haber estado incluida en las principales fuentes web y distribuida con Microsoft Windows desde Windows 98. Su mayor popularidad viene a partir de los años 2000 ya que se ha utilizado ampliamente para hacer memes.

La empresa Monotype participó en el diseño y producción de muchas tipografías durante el siglo XX. Muchos de los diseños tipográficos más utilizados en Internet fueron creados por esta compañía. La tipografía Arial fue diseñada en 1982, por Robin Nicholas y Patricia Saunders. Fue creada para ser similar a la Helvética. Verdana fue creada en 1996, inspirada por Frutiger.

Historia de la tipografía

De los años 70 a los años 90, la popularización de los arcades creó una nueva tipografía, que hasta día de hoy se asocia a los videojuegos. Se trata de tipografías creadas antes de la llegada de programas como Photoshop, por lo que fueron diseñadas a mano en papel cuadriculado y codificadas en el juego píxel a píxel.

¿Cómo seleccionar la tipografía adecuada?

Tras haber visto distintas tipografías a lo largo de la historia nos habremos dado cuenta de que muchas de ellas se adaptan a las necesidades de la época, de los medios donde serán impresas o visualizadas y sus propias aplicaciones. La selección de tipografías principales y secundarias es una parte del proceso de construcción de la imagen de marca y ha de ser realizado con cuidado.

En pleno 2021 disponemos de un amplio abanico de opciones y se puede realizar casi cualquier diseño. Por ejemplo, utilicemos algunas de las tipografías más famosas que hemos visto aplicadas al mismo concepto:

Historia de la tipografía
Historia de la tipografía
Historia de la tipografía
Historia de la tipografía
Historia de la tipografía
Historia de la tipografía
Historia de la tipografía
Historia de la tipografía

Como podemos observar, distintas tipografías confieren distintos sentidos gracias a sus distintas estéticas visuales. La selección de tipografía depende de vuestro proyecto y del sentido gráfico que queréis darle.

Tipografías para impresión / Instalar fuentes en el ordenador

Para poder proveernos de tipografías podemos utilizar distintas páginas web del sector. Algunas de las más conocidas son las siguientes:

  • Dafont es una página web donde encontrar y descargar tipografías. Hay que tener cuidado siempre de respetar la licencia de uso de las mismas.
  • Si tenéis contratado el paquete Adobe, Adobe Fonts es otra biblioteca muy interesante. En este caso sólo deberéis activar la tipografía que queráis usar en cualquiera de sus productos.
  • Google Fonts dispone de una interesante biblioteca donde podemos descargar tipografías y también utilizarlas para web.

Si hemos descargado una tipografía, por ejemplo de Google Fonts deberemos instalar e inmediatamente después nos aparecerá en los programas de nuestro ordenador.

Tipografías web

La mayor parte de páginas web están construidas con tipografías que están instaladas en la mayor parte de dispositivos:

  • Arial
  • Verdana
  • Helvetica
  • Tahoma
  • Trebuchet MS
  • Times New Roman
  • Georgia
  • Garamond
  • Courier New

Son conocidas como tipografías seguras para Web. Para que el usuario pueda visualizarlas en su dispositivo, estas tipos han de estar instaladas en el sistema operativo que esté utilizando. Esto quiere decir que no es que nuestra Web contenga las tipografías, sino que el navegador las toma de su sistema operativo ¿Por qué esto es importante? Porque si nos basamos en una tipo que no sea demasiado común nuestros usuarios no la tendrán y el diseño podría cambiar dependiendo del ordenador con que la vean.

En la herramienta anteriormente mencionada (Google Fonts) se pueden recopilar tipografías extra para ser posteriormente utilizadas en páginas web. Eso sí, tenemos que tener mucho cuidadocon la velocidad web a la hora de implementarlas.

Seleccionar tipografías en WordPress, Canva, Photoshop, Illustrator y Premiere

WordPress

En WordPress las tipografías suelen depender de la configuración de cada tema. Muchos dejan seleccionar entre fuentes web y Google Fonts. Ojo siempre con comprobar los tiempos de carga al cambiar a una Google Font.

Seleccionar tipografías

Canva

En canva se pueden utilizar varias fuentes. Algunas son gratuitas y otras son de pago. Cuenta con una selección muy amplia.

Seleccionar tipografías

Photoshop

Desde Adobe Fonts se pueden importar directamente al sistema sin tener que descargar las fuentes. Tanto Photoshop, como premiere e Illustrator disponen de una herramienta de texto donde seleccionar las tipografías.

Seleccionar tipografías

Illustrator

Seleccionar tipografías

Premiere

Seleccionar tipografías

Bibliografía recomendada

Si tienes alguna duda o quieres hacernos recomendaciones puedes hacerlo en los comentarios de la entrada. ¡Te echaremos un cable encantados!

Trabaja en el sector del Marketing Digital desde 2007 y cuenta con estudios reglados de marketing digital, educación, diseño gráfico-web y branding. Actualmente se dedica a gestionar proyectos, dar clases y estudiar un Doctorado en Tecnologías de la Información.

Espacio para dudas y comentarios

Nuestra Newsletter mola