Hay un millón de cosas en qué pensar cuando se construye el diseño web perfecto: crear gráficos, elegir colores, elegir las imágenes correctas… Pero hay una cosa que a la gente le gusta subestimar cuando crea su sitio web y es la elección de las fuentes.
No cometas el mismo error. Elegir la fuente correcta puede tener un gran impacto en el aspecto final de tu diseño web. Puede parecer una cosa pequeña, pero tiene el poder de llevar tu diseño web al siguiente nivel.
Así que si ya tienes una guía de marca con la que trabajar, asegúrate de seguirla al crear tu diseño web.
ÍNDICE ELEGIR FUENTES DE TEXTO WEB
- 1.- La importancia de la coherencia en las fuentes de texto
- 2.- Coincidencia con las fuentes de tu marca existente
- 3.- Descubre la personalidad de tu marca
- 4.- Elije fuentes de texto que se ajusten a tu marca
- 5.- ¿Qué son las fuentes seguras para Web?
- 6.- ¿Qué tipos de fuentes o tipografías son adecuadas para internet y por qué es importante?
- 7.- Cómo combinar diferentes tipos de letra en el diseño web
- 8.- Cómo afectan los diferentes tipos de letras o fuentes al diseño web
1.- La importancia de la coherencia en las fuentes de texto
Puedes estar tentado a experimentar con nuevas fuentes al crear tu diseño, ¡no lo hagas! Cada vez que alguien recibe tu tarjeta de visita o mira tú sitio web, puede ver tu ADN de marca y el diseño de tu empresa. Juntas, estas percepciones de tu marca necesitan crear una imagen completa y coherente; de lo contrario, tu marca podría terminar pareciendo un desorden sin valor de reconocimiento. Por eso es crucial ser consistente en todas tus plataformas digitales y materiales impresos cuando se trata de color, estilo y fuentes.
2.- Coincidencia con las fuentes de tu marca existente
Las directrices de marca incluirán los tipos de letra y las familias, los tamaños y la jerarquía de las fuentes que utiliza tu marca, para que puedas integrarlas inmediatamente en tu diseño web. Pero si tu marca utiliza una fuente desconocida, herramientas como la función «WhatTheFont» de Myfonts.com pueden ayudarte a identificar el nombre de la fuente con la que estás tratando.
Sin embargo, si tu marca utiliza tipografía personalizada, tu diseñador tratará de encontrar una fuente web de aspecto comparable para usar en el diseño web. Debido a los diferentes navegadores, su tipografía personalizada puede terminar pareciendo menos nítida y limpia de lo que te gustaría, por lo tanto, muchos diseñadores utilizarán fuentes de Google para que coincidan lo más posible con la tipografía de tu marca. Aquí hay algunas cosas cruciales en las que pensar al elegir una fuente para tu diseño internet:
3.- Descubre la personalidad de tu marca
La elección de la fuente debe representar la personalidad de tu marca para que tu diseño tenga un aspecto impecable. ¿Describirías tu empresa como retro, clásica, vanguardista…?
4.- Elije fuentes de texto que se ajusten a tu marca
Digamos que eres dueño de una tienda de ropa vintage con un aire fresco y moderno. Podemos ser elegantes y a la vez clásicos gracias a fuentes como Frank Ruhl Libre o Playfair Screen para demostrar a los clientes potenciales que lo que nos interesa es la fiabilidad y un servicio de primera clase. Esto te dará un aspecto equilibrado que es a la vez atemporal y moderno y que funciona perfectamente con tu marca de moda y estilo.
Fuente de texto Playfair
Independientemente del tipo de fuente que elijas para que coincida con la identidad de tu marca, asegúrate de elegir una fuente que sea adecuada y segura para la mayoría de los navegadores.» ¿Qué significa web protected?»
5.- ¿Qué son las fuentes seguras para Web?
El uso de una fuente segura para web significa que sus visitantes no tienen que tener una fuente específica instalada en su computadora para poder verla correctamente. En aquellos tiempos, hace 10 años o más, había aproximadamente 13 familias de fuentes y los diseñadores tenían que asegurarse de usar sólo estas pocas fuentes que aparecerían en la mayoría de los sistemas informáticos.
Ten en cuenta que muchas marcas utilizan fuentes personalizadas o fuentes que no están basadas en la red de internet. En este caso, los desarrolladores pueden utilizar aplicaciones para convertir la fuente cualquiera en una «fuente segura para internet». Pero a veces incluso eso no es una garantía de que se vea bien en la pantalla, especialmente si quieres que tu tipografía se vea muy nítida. Es por eso que los diseñadores a menudo se enfrentan al reto de encontrar fuentes en internet seguras similares (casi idénticas) que son gratuitas y que se muestran bien en todos los navegadores web.
6.- ¿Qué tipos de fuentes o tipografías son adecuadas para internet y por qué es importante?
Cuando busques la fuente perfecta para internet, lo mejor que puedes hacer es buscar en la biblioteca de fuentes de Google y, en la mayoría de los casos, encontrarás lo que buscas. Con más de 800 fuentes con licencia gratuita, es uno de los mejores lugares para encontrar fuentes seguras para Internet. Si incluyes estas fuentes en tus pilas de fuentes, casi todos terminarán viendo tu página correctamente.
Debido a que esta biblioteca de fuentes está apilada en un servicio web, tus visitantes de todo el mundo verán exactamente la misma página con la misma fuente. Además, garantiza que tu presencia en la web se mantenga uniforme en todos los navegadores y dispositivos.
7.- Cómo combinar diferentes tipos de letra en el diseño web
Al crear un sitio web, lo más probable es que necesites más de una fuente. Hay tres reglas básicas que debes seguir cuando unifiques fuentes:
1º La primera regla básica para combinar fuentes es no utilizar nunca más de tres fuentes en un mismo diseño.
2º La regla número dos es asegurarse de que las fuentes elegidas se complementen entre sí.
3º La tercera regla es definir siempre una jerarquía entre ellas.
Vamos manos a la obra:
1.- Definir una fuente de texto primaria
Define una fuente primaria, que es la fuente de texto más predominante y debe ser usada para los encabezados. Sugerencia: Puedes hacer coincidir esta fuente con el estilo de su logotipo. Generalmente, quieres que tu fuente principal sea llamativa.
A mí personalmente me gustan mucho las fuentes pesadas como Rubik Black o una ligeramente redondeada como Nunito para los titulares, pero recuerda que las fuentes que elijas dependen totalmente de tu negocio y de tu marca.
Fuente de texto Nunito
2.- Elegir fuente secundaria
Luego, elige una fuente secundaria que se utilizará para el texto del cuerpo. Este debería ser fácilmente legible cuando se utiliza para párrafos de texto más largos, incluso en pantallas pequeñas, por lo que podríamos optar por una fuente como Noto Sans para complementar nuestras opciones de fuentes primarias.
Elegir fuentes web: Noto Sans
3.- Definir fuente terciaria
Y finalmente, la tercera fuente debe ser una fuente acentuada. Esta fuente se puede utilizar en botones, o para acentuar ciertas partes del texto con el fin de captar la atención de los visitantes. Una fuente como Monserrat funcionaría bien con nuestras fuentes primarias y secundarias.
Tipo de letra Montserrat
8.- Cómo afectan los diferentes tipos de letras o fuentes al diseño web
Como dijo el gran Vincent van Gogh: «Las grandes cosas no se hacen por impulso, sino por una serie de pequeñas cosas unidas», así que elige bien tus fuentes. Una combinación inteligente de fuentes puede tener un efecto poderoso en tu diseño web.
9.- Dilo con una fuente de texto
La elección de la fuente adecuada para tu sitio web depende totalmente del objetivo que desees alcanzar. Cuando se piensa en el estilo y el diseño es necesario tener una agenda y averiguar cómo quieres que se le presente al mundo exterior. Y las fuentes son la herramienta perfecta para hacerlo. ¿Quieres ser elegante, serio o tradicional? Elige una fuente elegante. ¿Quieres lucir moderno y minimalista? Elige una fuente limpia. En pocas palabras, tu elección de fuentes dice mucho sobre tu negocio, así que elige sabiamente.
Apasionado del diseño web y especialista en posicionamiento SEO. Me encanta ayudar a las empresas a conseguir sus objetivos y estar en contacto directo con otros especialistas del sector para intercambiar opiniones.
Hola Juan:
Enhorabuena por el post tan esclarecedor sobre el tema.
Me queda una duda:
En el punto 7-2º incides sobre la importancia de asegurarse de que las fuentes elegidas se complementen entre ellas
«2º La regla número dos es asegurarse de que las fuentes elegidas se complementen entre sí.»
La pregunta es ¿cómo asegurarnos? ¿por las indicaciones de google fonts en la página de la fuente? ¿hay alguna herramienta para comprobar dicha complementariedad, como las hay para los colores?
Un saludo
Buenas.
Puedes buscar la fuente en Google Fonts, seleccionarla y en la parte inferior verás un apartado con el título : «Popular Pairings with ……». En este apartado te muestran otras fuentes que se utilizan habitualmente junto a la fuente seleccioanda
De nada Luis, espero pronto poder escribir alguna otra guía más de interes.
Saludos.
gracias Juan, por esta guía de cómo elegir tipo de letra, fuente o tipografía para una página web
saludos,luis