10 de nov de 20226 min.
Actualizado: 21 de sep de 2023
A la hora de crear una página web, hay que tener en cuenta muchas cosas. Entre la redacción del contenido y la elección de los elementos visuales perfectos, es posible que dejemos de lado algunos elementos importantes. Y si hay algo que no quieres pasar por alto, son las tipografías de tu página web.
La tipografía se define como la representación visual del tipo de letra, y puede comunicar más sobre tu marca que las palabras por sí solas. Por lo tanto, las tipografías de tu diseño web deberían amplificar la voz de tu marca y verse bien en la pantalla.
En esta guía, hablaremos de diez de las mejores tipografías de Google, y te compartiremos consejos para elegir las mejores fuentes para tu página web:
Google Fonts es un recurso de tipografías con licencia gratuita proporcionado por Google. Las siguientes diez, todas ellas disponibles en Google Fonts, te ayudarán a que tu página web se vea profesional en cualquier dispositivo:
Diseñada por: Łukasz Dziedzic
Una tipografía sans-serif que se adapta tanto a los títulos como al cuerpo del texto. Sus proporciones redondeadas y clásicas crean una sensación de armonía y calidez.
Diseñada por: Denis Masharov
Esta tipografía serif funciona especialmente bien para títulos y encabezados, lo que la convierte en una buena opción para ser la fuente principal de tu página web. Sus proporciones Roman le dan un cierto aire vintage.
Diseñada por: Jeremy Tribby
La tipografía Barlow sans-serif es limpia y de bajo contraste, lo que la hace fácilmente legible. El diseño del tipo de letra se inspiró en las matrículas de California y en las señales de tránsito.
Diseñada por: Nidud
Caudex se diseñó originalmente para la impresión a finales de los 90, pero desde entonces se ha adaptado a la web. Da un giro moderno y contemporáneo a las formas de las letras que se veían en manuscritos medievales.
Diseñada por: The Indian Type Foundry
Poppins, una de las mejores fuentes gratuitas, es una familia tipográfica sans-serif cuya estética limpia y minimalista se basa en formas geométricas y círculos perfectos.
Diseñada por: Joe Prince
Esta tipografía se creó pensando en el diseño de páginas web, manteniendo una alta legibilidad en cualquier contexto. Influenciada por el diseño suizo moderno, el aspecto de Questrial se basa en círculos completos.
Diseñada por: The Indian Type Foundry
El alto contraste de esta fuente es ideal para los títulos y encabezados de tu página, lo que la convierte en una de las mejores fuentes para páginas web.
Diseñada por: Pablo Impallari y Rodrigo Fuenzalida
Esta fuente serif clásica es una versión optimizada para la web de su predecesora del siglo XVIII. Es perfecta para el cuerpo de texto en pantalla.
Diseñada por: Julieta Ulanovsky
Montserrat es una fuente geométrica sans-serif, moderna y limpia, con un aspecto claramente reconocible.
Diseñada por: Christian Thalmann
Basada en los tipos de letra del siglo XVI, esta fuente serif aporta un aire elegante y tradicional al diseño web.
En caso de que estés creando una página web en Wix, estas hermosas fuentes están disponibles en el Editor - además de cientos de otras más. Y si tienes en mente un tipo de letra diferente, puedes subir tu propia fuente al Editor con unos pocos clics.
Ahora que ya conoces algunas de las mejores fuentes para páginas web, aquí tienes una guía para elegir las más adecuadas:
Asegúrate de que tus tipografías coinciden con el tono de tu marca
Categoriza tus tipografías según su importancia
Aprende los fundamentos de la clasificación de tipografías
Aplica temas de texto
Las fuentes son un componente indispensable de la marca. Asegúrate de que tu esquema tipográfico guarda coherencia con el resto de los activos visuales de tu marca.
Ya sea sofisticado y moderno, o algo más aventurero, el uso de la tipografía debe contribuir a la narrativa general de tu página web.
Puede ser de ayuda: Cómo identificar las tipografías de las imágenes.
Como regla general, nunca utilices más de tres fuentes en tu página web. Esta práctica no sólo mejorará el diseño de tu página, sino que limitar el número de fuentes hará que tu página web sea más accesible.
Cada una de estas fuentes debe tener un nivel de importancia diferente. Para mantener un sentido de jerarquía, elige una fuente principal, una secundaria y otra opcional a manera de acento:
La fuente principal es la más visible y debe utilizarse en los encabezados de tu página web. Es la fuente que más se asociará con tu marca, aunque no sea la más utilizada en todo el sitio. Como resultado, la fuente principal puede ser más dominante y distinta que el resto de las fuentes que uses.
La fuente secundaria se utilizará en la mayor parte del contenido escrito de la página web. Esto incluye párrafos, descripciones y artículos de blog, entre otros. Mientras que la fuente principal puede ser llamativa y única, la secundaria debe ser, ante todo, muy legible. Los tipos de letra con muchos adornos son más difíciles de leer cuando se aplican a textos largos.
Por último, el tipo de letra de acento es el que solo se utilizará para un propósito muy específico. En el caso de las páginas web, la fuente de acento suele reservarse para las llamadas a la acción, para llamar la atención sobre el botón más importante de la página. La tipografía de tu logo es otra opción que puede utilizarse como fuente de acento.
Para ayudarte a mezclar y combinar tipos de letra para tu página web, aquí tienes las combinaciones de fuentes favoritas de nuestros diseñadores:
El arte de la tipografía es rico y complejo: abarca desde la legibilidad hasta la alineación y el espaciado del texto. Para empezar, primero céntrate en la clasificación más importante: las fuentes serif, sans-serif y las manuscritas. Aquí tienes un resumen rápido de cada una de ellas y cuándo utilizarlas:
Fuentes Serif: Una serifa es una pequeña línea al final de un trazo en una letra o símbolo. Las fuentes Serif se consideran clásicas y elegantes, y se asocian sobre todo a la impresión en físico. Algunos ejemplos son Times New Roman, Georgia y Bodoni.
Fuentes Sans-Serif: Son fuentes sin líneas de serifa al final de sus letras. Las sans-serif son limpias, modernas y a menudo de aspecto neutro, por lo que son ideales para el diseño web. Algunos ejemplos son la Helvética y la famosa Comic Sans.
Fuentes manuscritas: Las fuentes manuscritas, incluidas las cursivas, se basan en estilos de escritura a mano. Lo mejor es limitar este estilo a los títulos, ya que escribir el cuerpo del texto en letra manuscrita probablemente sea difícil de leer para tu público. Algunos ejemplos son Lobster y Lucida Handwriting.
Una vez que hayas elegido tu esquema tipográfico, tendrás que decidir los diferentes tamaños de letra para los títulos principales, los subtítulos y el texto de los párrafos. Para empezar, hemos reunido estos rangos como guía general para la mayoría de las páginas web:
Títulos: 30-70px
Subtítulos: 22-30px
Párrafo: 16-20px
Si estás creando una página web en Wix, puedes personalizar y guardar los temas de texto para que tus títulos, subtítulos, texto de párrafo y demás sean siempre coherentes en cuanto a fuente, tamaño y peso.
Esta práctica no sólo hace que el proceso de diseño sea más fluido, sino que también mejora la experiencia de usuario de tu página web y potencia tu posicionamiento en buscadores (SEO).
Además del tamaño, otros factores que influyen en el peso visual de la tipografía son los cambios de estilo, como la negrita, la cursiva o el subrayado. Sin embargo, el uso excesivo de estos estilos puede provocar un efecto abrumador y, en última instancia, podría restarle importancia a tu mensaje, así que asegúrate de utilizarlos con moderación.
Aplica estos fundamentos de tipografías en el diseño web de tu propia página. ¡Empieza hoy mismo a brillar en Internet!
por Danae Salinas
Blogger & Marketing Specialist - Español