Elegir la tipografía correcta

Tema: Diseño web

Autor: Albert Gimeno

Fecha: Marzo del 2020

Albert Gimeno / Diseño web

volver-blog  Volver al Blog

Tutorial completo sobre tipografía. Verás aspectos importantes en las letras y una clasificación tipográfica detallada con usos prácticos y ejemplos. Aprenderás a elegir la tipografía que encaja mejor en tu proyecto. También te servirá para saber moverte por los distintos suministradores de tipos y llegar a esa tipografía que encaje a la perfección en tus trabajos de diseño web.

Elegir la tipografía que explique lo que quieres contar es el mejor mensaje que puedes mandar.

1. Tipografía; Mensaje y función.

Todos los elementos que intervienen en un diseño los tenemos que poner al servicio del objetivo y la tipografía es un recurso comunicativo muy importante. El éxito del proyecto perfectamente puede depender de la tipografía que uses.

Para poder elegir la tipografía que mejor encaje en tu página web, antes debes tener claros varios aspectos fundamentales.

El primero lo obtienes en el breafing inicial de tu proyecto, el cual tiene como objetivo dar respuesta a cuál es la personalidad y valores principales de tu marca, análisis para diferenciarte de la competencia y los puntos fuertes de tu producto o servicio.

Ejemplo de función en la tipografía en campaña Think different de Apple
Campaña Think Different de Apple

Esta campaña de Apple es un buen ejemplo de poner la tipografía al servicio del mensaje. Al utilizar una tipografía Serif Old Style, Apple pretendía diferenciarse de su competencia y constatar el aire refinado de sus productos.

Ejemplo de función en la tipografía en campaña Think different de Apple
Campaña Think Different de Apple

Esta campaña de Apple es un buen ejemplo de poner la tipografía al servicio del mensaje. Al utilizar una tipografía Serif Old Style, Apple pretendía diferenciarse de su competencia y constatar el aire refinado de sus productos.

El segundo punto importante que te ayuda a escoger la tipografía correcta para tu web, es pensar en la estrategia visual y comunicativa de tu marca o proyecto personal en Internet.

Tener esta visión global te ayuda a saber si necesitas una tipografía que funcione para un tipo u otro de textos, si es conveniente utilizar una única familia tipográfica para texto corrido y titulares o quizás es una opción más inteligente utilizar tipografías diferentes.

Una vez tengas definidos estos puntos iniciales es cuando cobra sentido el contenido de este artículo sobre tipografía.

2. Aspectos importantes en las letras.

Voy a empezar repasando aspectos importantes de las letras. Conocer estas características te sirve para reconocer más fácil el espíritu de las letras y cuando funcionan mejor. Pero ya te adelanto; una de las reglas de oro que más adelante te detallo es aplicar el sentido común.

La mayoría de libros sobre tipografía diseccionan las partes de una letra con una serie de nombres técnicos que a la práctica nos son de poca utilidad.

Arquitectura de las letras tipográficas
Disección técnica de las partes de una letra

Reconocer las partes de una letra con sus nombres técnicos no es práctico hasta para los propios diseñadores profesionales de tipos. Hacen referencia a éstas como por ejemplo el puntito de la i o la colita de la t. Enric Jardí

Arquitectura de las letras tipográficas
Disección técnica de las partes de una letra

Reconocer las partes de una letra con sus nombres técnicos no es práctico hasta para los propios diseñadores profesionales de tipos. Hacen referencia a éstas como por ejemplo el puntito de la i o la colita de la t. Enric Jardí

En cambio hay aspectos fundamentales a tener en cuenta en las letras para entender el alma de las tipografías y poder aplicarlas bien en nuestros diseños.

Estas características importantes son: el contraste, el eje y el ojo medio.

2.1. Contraste de las letras.

El contraste es la diferencia de grosor entre la parte ancha y la parte estrecha de una letra. Una letra tiene mayor contraste cuando la diferencia entre ambas partes es mayor.

Las letras con mayor contraste sugieren un aire clásico, tradicional, refinado y suelen ser las clasificadas como letras Romanas o Serif. En cambio las de menor contraste sugieren un aire más actual y moderno; suelen ser las tipografías llamadas de Palo Seco o Sans Serif. Más adelante verás que dentro de las Sans Serif, las tipografías llamadas Grotescas, tienen un contraste muy interesante.

Debes saber del contraste: las letras con mayor contraste tienen un aire más clásico y aportan dinamismo al diseño, sobretodo las Sans Serif Grotescas. En tipografías para pantalla la norma generalizada es utilizarlas en encabezados y no para textos largos porque dificulta la legibilidad.

Ilustración que muestra la diferencia de contraste entre letras de distinta familia
Diferencia de contraste.

Las letras Romanas tienen mayor contraste que las Sans Serif. Originalmente las letras Romanas pretendían imitar la escritura caligráfica hecha a mano en el S.XV.

ejemplo de diferencia de contraste
Diferencia de contraste.

Las letras Romanas tienen mayor contraste que las Sans Serif. Originalmente las letras Romanas pretendían imitar la escritura caligráfica hecha a mano en el S.XV.

2.2. Eje de las letras.

Llamamos eje de las letras a la distribución que presenta el contraste en las letras. Puede ser inclinado o vertical.

En los primeros tipos móviles fabricados en el Renacimiento, el eje que presentaban las letras era más inclinado; nos referimos a ellas como letras humanísticas por su vocación en imitar la escritura hecha a mano con pluma o pincel. En cambio los tipos diseñados a finales del S.XVIII empiezan a presentar un eje más geométrico, más vertical. Se consideran el origen de las letras modernas.

Debes saber del eje: las letras con eje inclinado se consideran próximas a las tipografías Old Style. En cambio las tipografías con eje mas vertical a lo actual. Para tipografías en pantalla la norma general es utilizar con eje vertical para textos largos, por su facilidad de lectura en formatos digitales. En encabezados y titulares, normalmente con un tamaño de letra mayor que el utilizado en párrafos, funcionan perfectamente ambos ejes; la elección de la tipografía debe obedecer otros criterios.

ejemplo para ver el eje de en las letras
Diferencia de ejes.

Podemos decir que las tipografías con ejes inclinados y variados dan connotaciones más antiguas que las verticales y geométricas.

ejemplo para ver el eje de en las letras
Diferencia de ejes.

Podemos decir que las tipografías con ejes inclinados y variados dan connotaciones más antiguas que las verticales y geométricas.

2.3. Ojo medio de las letras.

Ojo medio se refiere a la diferencia de tamaño que hay entre las letras mayúsculas y minúsculas de una misma tipografía, sin contar las partes ascendentes y descendentes que sobresalen en algunas letras.

La evolución de las letras con el paso del tiempo ha hecho que crezca el ojo medio en las tipografías haciendo que sea más fácil la lectura de textos. Con esto sabemos dos cosas; contra mayor sea el ojo medio más eficaz es la lectura del texto y provoca connotaciones más modernas.

Debes saber del ojo medio: las tipografías con una diferencia de tamaño menor entre sus letras mayúsculas y minúsculas son más eficaces para la lectura de textos largos, sobretodo en texto impreso. En tipografías para pantalla no es tan importante porque el espacio disponible para párrafos no suele estar limitado ni aumenta el coste de impresión como ocurre en formato papel.

ejemplo diferencias en el ojo medio entre tipografías
Diferencia en el ojo medio.

Las tipografías de Palo Seco tienen un ojo medio mayor que las tipografías Romanas. Y dentro de las tipografías Serif las que presentan un ojo medio mayor son más modernas y son más legibles.

ejemplo diferencias en el ojo medio entre tipografías
Diferencia en el ojo medio.

Las tipografías de Palo Seco tienen un ojo medio mayor que las tipografías Romanas. Y dentro de las tipografías Serif las que presentan un ojo medio mayor son más modernas y son más legibles.

3. Clasificación tipografías; Que nos cuentan las letras.

La manera más útil para hacer un uso correcto de las tipografías es según su clasificación. Saber y entender como se clasifican te sirve para filtrar cuando es apropiado utilizar un estilo de letra u otro según el contexto que quieras transmitir en el diseño de textos.

Hay muchas maneras de clasificar las letras, prácticamente tantas como autores, pero quizás la más extendida y aceptada sea la clasificación de tipos de Vox-ATypl. En este tutorial verás la manera más práctica de clasificarlas; tipografías Serif, Egipcias o Slab Serif y Sans Serif o Palo Seco. También te mostraré dos grupos tipográficos con usos más específicos, las tipografías Display y Script o Handwriting

Para hacer la clasificación de tipografías de manera didáctica la voy a estructurar de la siguiente manera:

1º Presentación del grupo tipográfico y descripción de características.

2º Presentación de subgrupos con las características que lo diferencian, usos tradicionales y con que asociamos estas tipografías.

3º Ejemplos de tipografías y de usos prácticos.

¡Vamos al lío!

3.1. Tipografías Serif o Romanas.

Estas tipografías son conocidas como Serif por los remates triangulares en muchas de sus letras y tienen su origen en las primeras imprentas conocidas del Renacimiento. Han sido muy utilizadas tradicionalmente en impresión de libros, revistas y prensa. Se asocian a lo tradicional, antiguo, a la seriedad, al conocimiento y proyectan confianza y elegancia.

Debes saber de las tipografías Serif: se caracterizan por su contraste, la variedad de eje, por sus remates generalmente triangulares y por el uso tradicional en textos de libros y prensa escrita. A pesar de ser parecidas dividimos las Serif en tres grupos; las Old Style, las Modernas y las de Transición. Las tipografías de cada grupo tienen características diferentes y un uso optimizado de ellas.

¡Vamos a verlas!

Tipografias Serif Old Style modernas y de Transición
Grupos de tipografías Serif.

Las tipografías Romanas o Serif se dividen en tres grandes grupos; las Old Style o Antiguas, las Modernas o Didonas y las Realistas, también llamadas Scotch o de Transición.

Tipografias Serif Old Style modernas y de Transición
Grupos de tipografías Serif.

Las tipografías Romanas o Serif se dividen en tres grandes grupos; las Old Style o Antiguas, las Modernas o Didonas y las Scotch o de Transición.

Las Serif Old Style: estas tipografías imitan los primeros tipos impresos y tienen la peculiaridad de que sus letras minúsculas están inspiradas en la escritura caligráfica de la época y las mayúsculas parecen letras esculpidas en la antigua Roma. A estas letras mayúsculas se las conoce como Capitulares y son muy utilizadas en titulares y encabezados.

Romanas Old Style y Capitulares
Ejemplo Romanas Old Style.

En este ejemplo puedes ver la curiosa diferencia de estilo entre las mayúsculas y minúsculas. Las tipografías Centaur y Garamond entran dentro de la categoría Old Style.

Romanas Old Style y Capitulares
Ejemplo Romanas Old Style.

En este ejemplo puedes ver la curiosa diferencia de estilo entre las mayúsculas y minúsculas. Las tipografías Centaur y Garamond entran dentro de la categoría Old Style.

El uso tradicional de las tipografías Serif Old Style es sobretodo en los textos que encontramos en libros. Este uso hace que cuando se utilizan en un diseño se pretenda transmitir confianza en lo tradicional, rigor en el texto que leemos y un cierto refinamiento en el estilo.

Su versión en mayúsculas (Capitulares) es habitual que la veamos en los títulos en carteles de películas. Este recurso tipográfico en el diseño es recurrente para indicarnos que vamos a ver una gran historia. Su versión capitular nos da connotaciones históricas, gran confianza con sus letras, incluso pueden insinuar algo épico.

Debes saber de las Serif Old Style: su uso para tipografías en pantalla es aconsejable sólo utilizarlas en titulares. En textos largos no es aconsejable porque dificulta su legibilidad por el excesivo contraste de sus letras. Hay tipografías Serif más eficaces para textos largos en pantalla como son las Serif Realistas.

Ejemplo de uso Romana Old Style en castel de cine
Romanas Old Style. Tipografía que nos cuenta una gran historia

Por la historia que tiene las Romanas Old Style es recurrente su uso para insinuar calidad en lo que vamos a ver o leer. También sus connotaciones históricas nos transmiten confianza y seguridad.

Ejemplo de uso Romana Old Style en castel de cine
Romanas Old Style. Tipografía que nos cuenta una gran historia

Por la historia que tiene las Romanas Old Style es recurrente su uso para insinuar calidad en lo que vamos a ver o leer. También sus connotaciones históricas nos transmiten confianza y seguridad.

Romanas Modernas: Se les llama modernas por el cambio sustancial que representaron estas tipografías aparecidas a finales del S.XVIII. Tienen un mayor contraste y el eje es más centrado, geométrico.

La Romanas Modernas también son conocidas como Didonas en honor a François Didot que a finales del S.XVIII diseño la tipografía Didot.

Ejemplo de Romana moderna asociada a la belleza femenina
Romanas Modernas. Contraste y geometría.

Las tipografías Didot y Bodoni son dos ejemplos clásicos de este tipo de letra. Serifas mas sutiles, contraste mayor y letras más geométricas.

Ejemplo de Romana moderna asociada a la belleza femenina
Romanas Modernas. Contraste y geometría.

Las tipografías Didot y Bodoni son dos ejemplos clásicos de este tipo de letra. Serifas mas sutiles, contraste mayor y letras más geométricas.

Estamos acostumbrados a ver las tipografías Serif Modernas en muchos diseños y marcas relacionas con la moda y la belleza. Es habitual recurrir a esta tipografía en revistas como Vogue, Charm o Seventeen.

Las características delicadas y sutiles de sus letras, sumado a la costumbre de uso, hace que estas tipografías Serif Modernas sean perfectas para relacionarlas con la moda, la elegancia, la exclusividad y con productos de belleza sobretodo femeninas.

Debes saber de las Serif Modernas: en tipografías para pantalla son perfectas para titulares y textos destacados. No es recomendado su uso para textos largos a pesar de que la tipografía Didot presenta una buena legibilidad en textos a tamaño de fuente pequeño.

Una tipografía muy utilizada en la web y disponible de manera gratuita en Google Fonts es Playfair Display.

Portada de la revista Vogue como ejemplo de Romana Moderna
Romanas Modernas. El tipo de la elegancia y el glamour.

Encontraras en infinidad de campañas publicitarias relacionadas con la moda este estilo de tipografía. Su contraste y sus formas le da ese aire de calidad y delicadeza necesario.

Portada de la revista Vogue como ejemplo de Romana Moderna
Romanas Modernas. El tipo de la elegancia y el glamour.

Encontraras en infinidad de campañas publicitarias relacionadas con la moda este estilo de tipografía. Su contraste y sus formas le da ese aire de calidad y delicadeza necesario.

Romanas Realistas: llamadas también de Transición o Scotch. Estas tipografías a diferencia de los tipos Old Style, empiezan a presentar un eje mas centrado y su contraste es menor. En principio fueron concebidas para impresiones de baja calidad como era la prensa escrita y actualmente se sigue usando como la tipografía de periódicos en papel y digitales.

Ejemplo de uso de Romanas Realistas
Romanas Realistas. Evolución de la tipografía clásica.

Su denominación Realistas viene del S.XVI y deriva de Rey. Su origen viene de la batalla comercial entre territorios por el dominio de la imprenta, negocio en continua expansión desde su creación. En este grupo podemos encontrar tipografías como Georgia, Miller text, Century Expanded…

Ejemplo de uso de Romanas Realistas
Romanas Realistas. Evolución de la tipografía clásica.

Su denominación Realistas viene del S.XVI y deriva de Rey. Su origen viene de la batalla comercial entre territorios por el dominio de la imprenta, negocio en continua expansión desde su creación. En este grupo podemos encontrar tipografías como Georgia, Miller text, Century Expanded…

Las tipografías Serif de Transición o Realistas son muy usadas en prensa impresa en papel y en medios digitales. Son textos que quieren transmitir solvencia contrastada y rigor, por lo que se puede confiar en ellos. Esta sensación deriva porque se ha considerado tradicionalmente a los medios de comunicación escritos como una fuente de información fiable, quizás sea por este motivo que encontramos muchos blog de distinta temática con esta tipografía en sus diseños.

Debes saber de las Serif Realistas: al no tener mucho contraste y un eje más vertical, en tipografías para pantalla funcionan perfectamente, tanto en párrafos como en titulares y texto destacado. El uso de estas tipografías en blogs nos sugiere un cierto aire de rigurosidad en sus artículos y hasta un cierto cuidado y gusto en la selección tipográfica utilizada.

Una tipografía muy utilizada en la web y disponible de manera gratuita en Google Fonts es Noto Serif SC.

Ejemplo de párrafo con Noto Serif SC
Romanas Realistas. Tipos clásicos perfectos para pantallas.

Las Romanas Realistas o de Transición funcionan perfectas en párrafos de texto en pantalla. Sus formas redondeadas y su menor contraste hace que los textos en medios digitales sean perfectamente legibles. En la imagen puedes ver un ejemplo de uso de la tipografía Noto Serif SC.

Ejemplo de párrafo con Noto Serif SC
Romanas Realistas. Tipos clásicos perfectos para pantallas.

Las Romanas Realistas o de Transición funcionan perfectas en párrafos de texto en pantalla. Sus formas redondeadas y su menor contraste hace que los textos en medios digitales sean perfectamente legibles. En la imagen puedes ver un ejemplo de uso de la tipografía Noto Serif SC.

3.2. Tipografías Egipcias o Slab Serif.

Las tipografías Egipcias son más conocidas como Slab Serif. Su origen está en el S.XIX pero es a partir del S.XX dónde se desarrollan principalmente.

¿Por qué Egipcias? pues simplemente porque en Europa estaba muy de moda todo lo egipcio por las campañas de Napoleón y las serifas gruesas características de esta tipografía, a los más imaginativos, les suscitaba cierto parecido a construcciones realizadas en Egipto, de ahí viene el nombre de Egipcias, pero hoy en día son más conocidas como Slab Serif.

Los rasgos más característicos que presentan estas letras son su bajo contraste entre trazos y su serif rectangular. También se puede apreciar que el serif deja de ser un adorno de las letras para pasar a formar parte de su estructura porque prácticamente tiene el mismo grosor que el trazo de las letras.

Ejemplo de como funciona y que sugiere las tipografías Egipcias
Egipcias. Tipografía que da firmeza.

Las tipografías Slab Serif nacieron para ser usadas en titulares como tipos Display, pero actualmente encontramos tipografías que funcionan perfectamente en textos largos para web.

Ejemplo de como funciona y que sugiere las tipografías Egipcias
Egipcias. Tipografía que da firmeza.

Las tipografías Slab Serif nacieron para ser usadas en titulares como tipos Display, pero actualmente encontramos tipografías que funcionan perfectamente en textos largos para web.

Te puedes imaginar con que asociamos las tipografías Slab Serif y como han sido usados tradicionalmente. Estas tipografías son firmes, bien asentadas en su base, por lo que es fácil que transmitan autoridad, firmeza, solidez y resistencia. Han sido muy usadas en carteles de películas, sobre todo cuando el personaje es alguien con una autoridad evidente, también la podemos encontrar en asociaciones deportivas relacionadas directamente con la fuerza masculina.

Debes saber de las Slab Serif: originalmente las tipografías Egipcias fueron diseñadas para titulares a un tamaño grande pero han ido evolucionando y podemos encontrar actualmente tipografías para pantalla muy validas para textos largos como puede ser Roboto Slab, Egyptienne, Archer, etc. No es recomendable utilizarlas en textos largos porque se puede ver cargado y pesado el texto a causa de los remates característicos Slab Serif.

Ejemplo de Slab Serif funcionando en publicidad de Volvo
Tipografía Slab Serif. Confianza en su firmeza.

Es difícil separar de una afirmación rotunda a esta tipografía. En el ejemplo de la imagen Volvo usa esta tipografía para reforzar su marca; solidez, firmeza, deportiva y con autoridad.

La imagen se trata de una campaña ficticia utilizada exclusivamente como ejemplo.

Ejemplo de Slab Serif funcionando en publicidad de Volvo
Tipografía Slab Serif. Confianza en su firmeza.

Es difícil separar de una afirmación rotunda a esta tipografía. En el ejemplo de la imagen Volvo usa esta tipografía para reforzar su marca; solidez, firmeza, deportiva y con autoridad.

La imagen se trata de una campaña ficticia utilizada exclusivamente como ejemplo.

3.3. Tipografías Sans Serif.

Cuando hablamos de tipografías Sans Serif nos referimos al grupo de tipografías más usado en la actualidad en medios digitales. Su característica principal es que sus letras no tienen remates, no tienen serif, de ahi su nombre Sans Serif (sin serifa en fracés).

Al igual que las tipografías Egipcias, las Sans Serif nacen en el S.XIX pero es a parir del S.XX donde su desarrollo y uso a influenciado más en las composiciones de textos y comunicaciones visuales.

Debes saber de las Sans Serif: la clasificación de los distintas Sans Serif es un poco más complicada dada la diferencia tan sutil que presentan los distintos tipos de letra. Te voy a mostrar la clasificación que considero más acertada y aceptada, las características principales de cada una y sus usos tradicionales para que puedas elegir cual encaja mejor en tu proyecto. Se dividen en Sans Serif Grotescas, Neogrotescas, Humanistas y Geométricas.

Ejemplo de tipografía Sans Serif
Tipografías Sans Serif. Presente y futuro.

Las letras Sans Serif las encontramos en infinidad de comunicaciones visuales. Esta tipografía es especialmente recomendada para medios digitales y con el auge de aplicaciones, redes sociales y elementos multimedia, la mayoría de compañías la usan como tipo de letra corporativa.

Ejemplo de tipografía Sans Serif
Tipografías Sans Serif. Presente y futuro.

Las letras Sans Serif las encontramos en infinidad de comunicaciones visuales. Esta tipografía es especialmente recomendada para medios digitales y con el auge de aplicaciones, redes sociales y elementos multimedia, la mayoría de compañías la usan como tipo de letra corporativa.

Sans Serif Grotescas: (también llamadas Góticas) estas tipografías dentro de las Sans Serif son las que presentan un contraste entre la parte fina y gruesa de las letras mayor. Funcionan a la perfección en encabezados y titulares, como en textos destacados. En cambio en textos largos a tamaño pequeño no es recomendado su uso.

Están consideradas como tipografías con personalidad por el contraste que presentan. Se tiende a asociar estas tipografías a medios publicitarios americanos porque vienen de una tradición publicitaria Norte-americana, muy utilizada en destacados de publicaciones.

Algunas tipografías Grotescas son Trade Gothic, Monotipe Grotesque y Franklin Gothic

Ejemplo de tipografía Grotesca en titular revista Times
Ejemplo de uso tipografía Grotesca.

El espacio que ocupa esta tipografía gruesa y su forma la hace ideal para destacar textos. Al ser una tipografía con contraste hace que coja personalidad y aporte dinamismo a los diseños.

Ejemplo de tipografía Grotesca en titular revista Times
Ejemplo de uso tipografía Grotesca.

El espacio que ocupa esta tipografía gruesa y su forma la hace ideal para destacar textos. Al ser una tipografía con contraste hace que coja personalidad y aporte dinamismo a los diseños.

Sans Serif Neogrotescas: Derivan de la tipografía Akzidenz Grotesk y de la aproximación a la modernidad que se produjo en Alemania a finales del XIX. Son letras mucho más regulares que las Grotescas. Estas Sans Serif empiezan a ser utilizadas en textos largos por su buena legibilidad.

Están consideradas tipografías racionalistas muy utilizadas en diseños que requieren cierto orden y la funcionalidad propio de la escuela suiza.

Las Neogrotescas marcan un antes y un después en el diseño gráfico. Tipografías como Helvetica, Univers y la propia Frutiger nos son muy familiares porque las encontramos en infinidad de comunicaciones visuales cotidianas; ya sea en anuncios, indicadores informativos, rótulos, etiquetas de productos, de ropa, etc.

Ejemplo de tipografía Neogrotesca en una ilustración con Helvetica
Ejemplo de uso tipografía Neogrotesca.

Las tipografías Neogrotescas son las que mejor definen un estilo muy marcado dentro del diseño «la escuela suiza». Funcional, ordenada y minimalista.

Ejemplo de tipografía Neogrotesca en una ilustración con Helvetica
Ejemplo de uso tipografía Neogrotesca.

Las tipografías Neogrotescas son las que mejor definen un estilo muy marcado dentro del diseño «la escuela suiza». Funcional, ordenada y minimalista.

La tipografía Helvetica por su uso tan extendido es sin duda el referente dentro de las Neogrotescas .

Sans Serif Humanistas: Reflejan la modernidad inglesa de la época sobretodo representada por Gill Sans y empezó a adornar el paisaje inglés con carteles y publicaciones con esta tipografía de cierto aire caligráfico que conservaba características de las letras romanas clásicas.

Algunas tipografías Humanistas son Signtax, Gill Sans, Optima, Meta y Myriad

Ejemplo de tipografía Humanista en la web de Apple
Ejemplo de uso tipografía Humanista.

Apple a utilizado Myriad en su tipografía corporativa para dar un aire refinado, elegante y de cuidar hasta el mínimo detalle en sus productos. Con esta tipografía también consiguió que destacará lo que hace no lo que dice.

Ejemplo de tipografía Humanista en la web de Apple
Ejemplo de uso tipografía Humanista.

Apple a utilizado Myriad en su tipografía corporativa para dar un aire refinado, elegante y de cuidar hasta el mínimo detalle en sus productos. Con esta tipografía también consiguió que destacará lo que hace no lo que dice.

Sans Serif Geométricas: Son letras con una construcción geométrica de sus letras muy usadas actualmente. A pesar de que están de moda hoy en día, estas tipografías se vienen usando desde principios del S.XX y fueron popularizadas por ilustraciones hechas en la Bauhaus escuela de diseño referente mundial por su filosofía de funcionalidad y equilibrio en el diseño.

Las tipografías geométricas por sus formas redondeadas y suavizadas tienen connotaciones de cercanía y proximidad. Son la tipografía corporativa de marcas como Skype o Edreams que buscan transmitir valores friendly y a la vez próximos a la tecnología.

Algunas tipografías Geométricas son Futura, Kabel, Gotham, Avenir y la utilizada en este blog, Roboto.

Ejemplo de anuncio de VW con tipografía Geométrica Futura
Ejemplo de uso tipografía Geométrica.

Este anuncio de VW esta considerado como el mejor del S.XX. Es un buen ejemplo de funcionalidad en el mensaje. La tipografía elegida es Futura y complementa a la perfección la funcionalidad con la sintaxis comunicativa.

Ejemplo de anuncio de VW con tipografía Geométrica Futura
Ejemplo de uso tipografía Geométrica.

Este anuncio de VW esta considerado como el mejor del S.XX. Es un buen ejemplo de funcionalidad en el mensaje. La tipografía elegida es Futura y complementa a la perfección la funcionalidad con la sintaxis comunicativa.

3.4. Tipografías Display y Script.

Las tipografías Display y Script tienen un uso más específico que los vistos anteriormente.

Las tipografías Display se usan en titulares y encabezados. Hay infinidad de diseños distintos que no siguen ninguna otra pauta que la inspiración del momento en el autor o para el uso concreto que fue diseñada. El uso de las Display es exclusivo para tamaños de letra grande en textos destacados y su uso es según el criterio del diseñador. Hay que evitar sobrecargar los diseños con tipografías Display.

Ejemplo de tipografías Display
Ejemplo de tipografías Display.

Siempre que veas una tipografía con la terminación Display en su nombre significa que están pensadas para títulos y encabezados. Las tipografías Display tienen su alma propia y su uso apropiado.

Ejemplo de tipografías Display
Ejemplo de tipografías Display.

Siempre que veas una tipografía con la terminación Display en su nombre significa que están pensadas para títulos y encabezados. Las tipografías Display tienen su alma propia y su uso apropiado.

Las tipografías Script imitan la escritura hecha a mano, por eso las conocemos también como Handwriting. Estas tipografías suelen utilizarse para dar connotaciones de proximidad, cercanía, calidez y para humanizar el servicio o producto que se ofrece. Hay gran variedad de tipografías Script con distintos estilos. Al utilizar las Script, la linea que separa dar un toque elegante a sobrecargar el diseño es muy fina. Mi consejo es utilizarla con mucha mesura.

Ejemplo de uso específico de tipografía Script
Ejemplo de tipografía Script.

Usar con mesura las tipografías Script puede dar el toque de brillantez necesario a un diseño. Sobrecargar un diseño con este recurso tipográfico lo suele hacer poco efectivo.

Ejemplo de uso específico de tipografía Script
Ejemplo de tipografía Script.

Usar con mesura las tipografías Script puede dar el toque de brillantez necesario a un diseño. Sobrecargar un diseño con este recurso tipográfico lo suele hacer poco efectivo.

4. Las familias tipográficas.

Las familias tipográficas es un recurso moderno pensado para dar variantes narrativas y visuales a una misma tipografía.

Antiguamente las familias de las Romanas clásicas constaban como mucho de tres variantes, la redonda, itálica y versalita. Es a partir del S.XX con las tipografías de Palo Seco que diseñan para una misma familia variantes de distintos pesos; lo conocido actualmente como las versiones light, regular, bold y extrabold por ejemplo.

Las variantes de peso en las tipografías Romanas clásicas es una adaptación moderna y generalmente desvirtúa la esencia de estas tipografías al perder contraste en sus trazos finos y gruesos.

Ejemplo de distintos pesos en una familia tipográfica
Ejemplo variantes de peso tipográfico.

Las tipografías diseñadas con distintas variantes de peso utilizada de manera lógica enriquece la comunicación visual en los textos.

Ejemplo de distintos pesos en una familia tipográfica
Ejemplo variantes de peso tipográfico.

Las tipografías diseñadas con distintas variantes de peso utilizada de manera lógica enriquece la comunicación visual en los textos.

El uso de una única tipografía en un diseño, para utilizar adecuadamente sus distintas variantes se resume en aplicar el sentido común, me explico; si queremos destacar un fragmento de texto lo lógico es aplicar una diferencia de peso en relación al resto del texto que resalte éste a simple vista. También es lógico que en un encabezado o titular utilices un peso tipográfico que destaque al resto. En resumen, se suele recomendar el uso de una única tipografía en las páginas web para ayudar a la velocidad de carga en las páginas, pero lo que yo recomiendo es utilizar el sentido común al utilizar las tipografías.

Nota: Las tipografías en su versión itálica o cursiva sugieren dinamismo y movimiento por la inclinación de sus letras. Vemos muchos diseños de marcas deportivas y del mundo del motor utilizar este recurso gráfico en su imagen corporativa. También se suelen usar al escribir citas y comentarios entrecomillados hechos por terceras personas.

5. Consejos (aplica el sentido común).

En este artículo he pretendido darte los datos suficientes para ayudarte a escoger la tipografía adecuada para tu proyecto. Un tipo de letra que se adapte a la perfección a tu servicio y a tu imagen como marca.

Has podido comprobar que dentro de las clasificaciones tipográficas tenemos muchas opciones para elegir con diferencias sutiles entre ellas y muchas veces elegir entre, por ejemplo, una tipografía Romana Realista u otra la diferencia es mínima, en cambio entre una Serif y una Slab Serif la diferencia entre ellas y las connotaciones comunicativas si que cambian considerablemente.

Trata que el tipo de letra que elijas no explique algo que no quieres contar.

Ejemplo de como cambia el significado dependiendo de la tipografía usada
Ejemplo de como hablan las letras.

En esta imagen puedes ver un ejemplo claro de como una tipografía puede reforzar el mensaje que quieres transmitir.

Ejemplo de como cambia el significado dependiendo de la tipografía usada
Ejemplo de como hablan las letras.

En esta imagen puedes ver un ejemplo claro de como una tipografía puede reforzar el mensaje que quieres transmitir.

6. Amplía información.

El mundo de la tipografía y la buena composición tanto de textos como comunicativa es fundamental en el diseño. Te dejo una serie de enlaces a libros que recomiendo 100% su lectura para profundizar en el uso correcto de las letras, un curso de Enric Jardí imprescindible para comprender el funcionamiento de la tipografía en las comunicaciones visuales y un enlace a una web que muestra combinaciones de Tipografías perfectas para proyectos web.

Es mi tipo de Simon Garfield.

Manual de tipografía de John Kane.

Sistema de retículas de Josef Muller-Brockmann.

Como elegir tipografías curso imprescindible de Enric Jardí.

Recurso gratuito combinaciones de tipografías para web de Rafal Tomal.

Salud y buenas letras.

By Albert Gimeno