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

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

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.

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.

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.

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.

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.

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

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

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:

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.

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.

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

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.

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.

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.

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.

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

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.

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.

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:

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.

Canva

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

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.

Illustrator

Premiere

Bibliografía recomendada

• Curso diseño gráfico. Fundamentos y técnicas. Anna María López López. Editorial Anaya Multimedia
• Manual de edición y autoedición. José Martínez Sousa. Editorial Pirámide
• Manual de tipografía: Nueva edición de John Kane. Editorial GG
• Libro: Historia del Diseño Gráfico. Meggs Philip. Editorial: RM
• Arcade Game Typography: The Art of Pixel Type. Toshi Magari. Editorial Thames and Hudson

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