Cuando planeas el diseño responsivo de tu sitio web lo primero en lo que piensas es en los colores que utilizarás, imágenes, disposición de los elementos, entre otros factores; pero también hay otros puntos que suelen pasar desapercibidos y son de gran importancia, como es la tipografía en que se mostrarán los textos de tu sitio.
Es clave que el sitio de tu empresa tenga un buen equilibrio entre una buena estética gráfica y sea fácil y claro de leer. De lo contrario, los usuarios que lo visiten no tendrán una buena experiencia o se confunden entre los textos y elementos gráficos. Un diseño muy impresionante con una tipografía que sea ilegible, solo confundirá a los usuarios y decidirán ir a otro sitio.
Por esta razón, vamos a comentarles a continuación las principales razones por las que usar la tipografía correctamente ayudará a una mejor experiencia del usuario.
1. Ayuda a establecer una jerarquía de mensajes
Los diseñadores gráficos y web recomiendan contar con una jerarquía de tipografías que comprendan dos grupos de fuentes, una para encabezados y otra para el contenido; además a cada una se le puede asignar un color y un tamaño diferente; de esta manera se puede jerarquizar el contenido.
Para los títulos y encabezados se recomiendan tipografías grandes y atractivas y conforme baja la jerarquía del encabezado, se hacen más pequeñas. De esta manera, los espectadores leer la información más importante primero. Por su parte, el color también es muy importante, aquí se recomienda utilizar un color de contraste para los encabezados, de esta manera podrá resaltar de entre el resto del texto. El tono adecuado dependerá del resto del diseño de su sitio web.
2. Diferentes tipografías ayudan a diferenciar los tipos de mensajes
En todos los sitios web hay diferentes tipos de contenido: principal, secundario, de navegación, entre otros. Cada uno tiene una función específica, por lo que es importante que los usuarios puedan diferenciarlos. Las tipografías pueden ayudar en ese sentido. Con diferentes colores, estilos de tipografía y tamaños puede diferenciar uno del otro rápidamente, de esta manera los usuarios sabrán cuál contenido tiene las respuestas a sus preguntas y cuál les ayudará a navegar con facilidad en el sitio web.
También es importante una buena distribución del texto para determinar cada tipo de contenido. El principal es el que se relaciona directamente con la página en la que se encuentra y cuenta con la información que desea que sus espectadores vean cuando estén en el sitio. El contenido secundario es el tipo de contenido que se encuentra en las columnas laterales o inferiores, que suele brindar información adicional relacionada directa o indirectamente con el resto del sitio y suele componerse por enlaces a historias relacionadas, CTA, etiquetas, entre otras. El contenido de navegación es el utilizado por los usuarios para navegar a través del sitio con facilidad.
3. Impulsará la coherencia entre páginas
Una vez que han diferenciado el tipo de contenido, los colores, tamaños y tipografías; los usuarios que visiten tu sitio web podrán diferenciar los aspectos que lo componen. De esta manera, encontrarán una mejor coherencia entre la información que proporcionas.
Por ello, es clave que mantengas la coherencia en todo el sitio. Por ejemplo, si en el Home utilizas una tipografía color azul en negrita de 20 pixeles (px) para el título principal, en el resto de las páginas, entradas de blog y otros contenidos, la Tipografía del título debe tener las mismas características. Si mantiene estos elementos en todas las páginas, será muy fácil para los usuarios identificar cada tipo de elemento y a qué contenido han llegado.
Si los visitantes a tu sitio web comprenden fácilmente tu contenido, cómo está estructurado y cómo pueden navegar por él, la experiencia del usuario será muy buena y esto ayudará a tus estrategias de marketing digital, como el SEO.
4. Combinar estilos de tipografías crea un efecto de diseño agradable
Hay una amplia gama de estilos de tipografías, desde los estándares, estilizados, Serif, Sans Serif, entre otros. Cada una tiene un efecto diferente en los lectores, algunas son fáciles de leer, mientras que otras tienen un gran atractivo visual. Elegir diferentes estilos de tipografías y combinarlos, creará un contraste de elementos que hará más sofisticado y atractivo tu sitio web.
¿Cómo combinar estilos de tipografías?
Aunque es muy fácil combinar los diferentes estilos de tipografías, se recomienda contar con un especialista en diseño gráfico que te asesore en la selección. Algunos consejos que pueden ayudarte son:
- Utilizar una tipografía limpia y fácil de leer para el cuerpo del contenido y combinar con encabezados estilizados.
- Las tipografías estilizadas deben ir acorde con el resto del diseño gráfico del sitio.
- Aprovecha los sistemas de administración de contenido de las plataformas de diseño responsivo web que permiten hasta 6 tipos de encabezados del H1 (el más importante) hasta H6 (el de menor importancia). Entre menos importante el encabezado, menos llamativa debe ser la tipografía.
Tipografías y colores utilizados en las principales plataformas sociales
Para ejemplificar la importancia que tiene la tipografía en los sitios web, comentaremos sobre las utilizadas por las principales redes sociales, que son los sitios más visitados en la actualidad. Facebook, Twitter, Instagram, Google, entre otros sitios tiene sus propios colores, iconos y tipografías que ayudan a que los usuarios los identifiquen con un solo vistazo y ayudan a una mejor experiencia del usuario dentro de estas plataformas, lo que puede ser una buena guía para tu sitio web.
Facebook es la red social más utilizada en todo el mundo y utiliza tres tipografías de acuerdo con la versión que se utilice. Para la versión de escritorio en Windows usa Segoe UI, para macOS en escritorio y iOS en dispositivos móviles utiliza San Francisco y Android en dispositivos móviles utiliza Roboto.
Estas tres tipografías se caracterizan por su fácil legibilidad y familiaridad, por lo que se han convertido en un estándar para los sistemas operativos. Combinados con el tipo de letra, utiliza un color azul característico que informalmente ha sido bautizado como «Facebook Blue» con el código Hex: #4267b2.
Si bien esta red social también utiliza el color azul, se inclina por otro tono (#38A1F3) y combinaciones con tonos de negro y blanco. Esto permite que tenga una paleta de colores más clara que combina con una tipografía clásica, como es la Helvética y Helvética Neue, utilizadas en versiones de escritorio de Windows y macOS respectivamente. Para iOS y Android, comparte las mismas tipografías que Facebook, que, como mencionamos, se han convertido en un estándar para dispositivos móviles.
En cuanto a colores, Instagram ha sufrido varios cambios en los últimos años, pero suele conservar una paleta de colores gradientes. Es difícil entender cuáles son los colores individuales y en qué escenario deben usarse.
En cuestión de tipografías, utiliza las mismas que Facebook al formar parte de su familia de aplicaciones: para Windows vemos Segoe UI, en macOS y iOS San Francisco y para Android Roboto.
Con Google nos encontramos en un caso muy particular. Si bien sus colores no han cambiado desde su fundación, la tipografía utilizada en su logotipo y plataformas si ha tenido una gran evolución. A diferencia de las otras plataformas, utiliza una tipografía propia que no tiene un nombre como tal, pero los especialistas la han catalogado como una variante de Futura, una propuesta tipográfica de Paul Renner que se lanzó en 1927.
La tipografía Futura no es tan geométrica como la que muestra Google, con un estilo simétrico y muy geométrico, para dar un aspecto de precisión matemática. Esto les permite tener un estilo propio que los ayuda a diferenciarse de cualquier otro sitio web, plataforma social y motor de búsqueda.
Seleccione la tipografía adecuada para tu sitio
Para que tu sitio web cuente con la tipografía adecuada, que vaya acorde con tu diseño e imagen empresaria, es importante contar con un especialista en diseño web que te ayude a definir cada elemento y lo optimice para que puedas aprovecharlo al máximo en tus estrategias de marketing digital, con encabezados (H1 a H6), texto del párrafo del contenido principal, enlaces, navegación, texto del párrafo en la columna lateral y botones. Una jerarquía de fuentes bien definida es fundamental para comunicar tu mensaje y llegue de manera más efectiva que un diseño gráfico complejo y sofisticado.
En Diseño y Optimización Online, la mejor agencia de marketing digital en México y Latinoamérica, contamos con un equipo de diseño responsivo web que te asesorará para seleccionar los mejores elementos para tu sitio web. Estamos a su disposición en oficinas en las principales ciudades de la República y al teléfono (800) 890 3864 para una consulta gratuita y una evaluación de tu sitio web.
La mejor agencia de SEO en México
