¿Qué son las tipografías y cuáles son los tipos más comunes -y gratuitos- para diseño web y marketing?
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