¿Qué son las tipografías y cuáles son los tipos más comunes -y gratuitos- para diseño web y marketing?

Escrito por: Ricardo Elizondo

Ricardo es Ingeniero Industrial y fundador de Crovana. Su pasión por la tecnología, la fotografía y el cine lo llevaron a emprender desde el 2017 en el mundo digital.

Categoría: Conceptos | Diseño | Marketing

Fecha: 21 enero, 2021

Tiempo de lectura: 7 min

Introducción

Cuando realizamos un sitio web, una imagen publicitaria o un libro, es común que surjan preguntas como:

  • ¿Qué colores utilizar?
  • ¿Cuáles imágenes?
  • ¿Qué textos?
  • ¿Cuál tipografía?

En este artículo me centraré en esta última pregunta; la elección de la tipografía. Pero, ¿qué es una tipografía?

Tipografía

Las tipografías -o fonts en inglés- son los diseños o estilos de letras que se utilizan al crear un texto, ya sea digital o analógico -en papel por ejemplo-.

Para ejemplificar este tema, únicamente es necesario recordar nuestros días en el colegio y la universidad 📚. Cada vez que teníamos que entregar un trabajo nos encontrábamos con tipografías como Arial, Times New Roman y Helvética, por mencionar algunas. En contraste, los diseñadores gráficos suelen aprovechar tipografías menos tradicionales para dar un tono más artístico y llamativo al diseño.

Cabe destacar que existen miles de tipografías, tanto gratuitas como de pago. E incluso, usted podría crear sus propias tipografías y -por qué no- hasta venderlas 🤑

¿Cuál tipografía es mejor?

En realidad, la pregunta correcta es:

¿Qué queremos provocar en el lector cuando vea nuestro texto?

En otras palabras, no hay una tipografía que funcione para todo tipo de situaciones. Es necesario buscar la que mejor se alinee a nuestro objetivo.

Por lo tanto, es muy importante preguntarnos si queremos que el texto sea percibido como: formal, cómico, intrigante, agresivo, infantil, antiguo, moderno, futurista, etc.

Existen herramientas gratuitas que nos permiten probar un texto en diferentes tipografías y así facilitar nuestra elección final. Un ejemplo claro es la plataforma Google Fonts, en la cual podemos colocar nuestro texto, elegir el tamaño de letra, grosor, filtrar por categorías y mucho más. Además, podremos descargarlas de manera gratuita.

Categorías

Antes de elegir una tipografía, es clave conocer las categorías principales que se utilizan para clasificarlas.

A continuación describo las más conocidas:

  • Serif: se refiere a tipografías que utilizan serifas, es decir, pequeñas líneas que se encuentran en las terminaciones de las letras, principalmente en los trazos verticales o diagonales tipografías. Estas curvas permiten crear la ilusión de una línea horizontal, facilitando el desplazamiento de la vista al leer.
  • Sans Serif: son lo contrario a la categoría anterior, de manera que no utilizan serifas, por ello también se les conoce como letras “paloseco”.
  • Display: son creadas para emplearse en encabezados de gran tamaño, no en el cuerpo del texto. Por lo tanto, suelen tener diseños excéntricos y variables para captar la atención del lector. 
  • Handwriting: como su nombre lo describe, son letras que parecen que escritas a mano.
  • Monospace: se utiliza para identificar a las letras y caracteres que ocupan exactamente la misma cantidad de espacio horizontal.

¡Genial! Ahora que ya conocemos un poco más sobre el mundo de las tipografías, es momento de verlas en acción 💪

Lista de tipografías clave (gratuitas)

Sé que es abrumador analizar decenas y decenas de tipografías 😖 , por ello, seleccioné las tipografías gratuitas más comunes.

Ya sea que usted desarrolle una página web, diseñe una imagen de marketing o escriba un libro, estas tipografías le pueden ayudar a transmitir su mensaje a los lectores.

¡Comencemos

ROBOTO

ROBOTO | Roboto

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

OPEN SANS

OPEN SANS | Open Sans

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

LATO

LATO | Lato

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

SLABO 13px

SLABO 13px | Slabo 13px

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

SLABO 27px

SLABO 27px | Slabo 27px

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

OSWALD

OSWALD | Oswald

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

SOURCE SANS PRO

SOURCE SANS PRO | Source Sans Pro

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

MONTSERRAT

MONTSERRAT | Montserrat

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

RALEWAY

RALEWAY | Raleway

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

PT SANS

PT SANS | PT Sans

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

PT SERIF

PT SERIF | PT Serif

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

QUANDO

QUANDO | Quando

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

POPPINGS

POPPINS | Poppings

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

MCLAREN

MCLAREN | McLaren

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

ARVO

ARVO | Arvo

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

HAPPY MONKEY

HAPPY MONKEY | Happy Monkey

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

GEORGIA

GEORGIA | Georgia

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

LEMONADA

LEMONADA | Lemonada

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

LIMELIGHT

LIMELIGHT | Limelight

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

MR DAFOE

MR DAFOE | MR Dafoe

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

CINZEL

CINZEL | Cinzel

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

CABIN SKETCH

CABIN SKETCH | Cabin Sketch

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

VAST SHADOW

VAST SHADOW | Vast Shadow

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

SCHOOLBELL

SCHOOLBELL | Schoolbell

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

POIRET ONE

POIRET ONE | Poiret One

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

PRATA

PRATA | Prata 

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

ELSIE

ELSIE | Elsie

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

ANTON

ANTON | Anton

0123456789  ¿?¡!”&

Lorem ipsum dolor sit amet consectetur adipiscing elit hendrerit rutrum ad nascetur sociosqu, dis venenatis molestie purus tempor primis etiam posuere sodales sociis. 

NOTA 📌

No es necesario que se limite a un único estilo, ya que puede aprovechar la combinación de tipografías para resaltar diferentes tipos de contenido: encabezados, cuerpo del texto, listas, frases, etc.

Conclusión

Sin lugar a dudas, elegir la tipografía correcta para un proyecto puede llevar muuucho tiempo de búsqueda y análisis, pero espero que esta lista pueda ayudarle a visualizar con mayor facilidad cuál puede cumplir mejor su objetivo; sin tener que acudir a tipografías de pago.

Gracias por leer nuestro artículo, si está interesado en crear un blog sobre el tema que le apasiona, le recomiendo visitar nuestra página de Desarrollo Web o contactarnos para cotizar.

Espero que su proyecto sea todo un éxito 🙌

¡Ahora sí, a escribir 👨🏻‍💻 !

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Artículos relacionados

Información de valor para usted y sus proyectos.

Jul 18 2021

7 sencillos pasos para destacar la página de Facebook de su negocio en 2021

Descubra 7 sencillos pasos para mejorar la configuración del perfil de Facebook de su negocio o marca personal en 2021
Jun 21 2021

Ventajas de tener un sitio web para su empresa o marca personal – Guía completa 2021

Todo lo que necesita saber sobre las ventajas y desventajas de tener un sitio web para su empresa o marca personal en el 2021
May 21 2021

5 estrategias prácticas para fidelizar a sus clientes

Buscar clientes nuevos no siempre es la respuesta, en este artículo le mostramos cómo mantener a sus clientes actuales de forma efectiva.
Abr 21 2021

¿Por qué es importante cuidar un sitio web y cuáles son las recomendaciones principales?

¿Qué es lo peor que pasaría si no doy mantenimiento al sitio web de mi negocio? Una pregunta común y muy importante, conozca la respuesta.
Mar 21 2021

¿Cómo y dónde comprar un dominio web para su negocio? Guía paso a paso con Namecheap

¿Quiere comprar un dominio web, pero no sabe por dónde empezar? En esta guía le explicamos cómo hacerlo de manera segura y económica.
Feb 21 2021

Guía rápida sobre cómo elegir un nombre de dominio web para su negocio o proyecto personal

¿Está buscando nombre para su negocio o dominio web? Sabemos que no es tarea fácil, así que hemos creado esta lista de pasos prácticos.
Dic 21 2020

¿Cuál es la diferencia entre archivo JPG, PNG, PDF, EPS, GIF, AI, SVG, PSD… y cuándo utilizarlos?

Las imágenes y diseños gráficos existen en múltiples tipos/formatos/extensiones de archivos. En este artículo veremos sus diferencias y usos.
Nov 21 2020

¿Qué conceptos debo saber antes de comprar un sitio web?

Al investigar sobre páginas web es común encontrarse con conceptos técnicos, extraños y confusos. Aquí le explicamos los más importantes.

¡Construya una marca sólida!

Contáctenos y cotice el sitio web perfecto para su negocio.

Abrir chat
1
¡Hola!
Ricardo Elizondo
¡Hola 😊 ! No se preocupe, no le atenderá un robot 🤖