11 fuentes de diseño web que le darán a tu sitio web una cara fresca

Las fuentes de diseño web parecen un aspecto pequeño del sitio web de su empresa pero, en realidad, tienen un gran impacto en las conversiones.

¿Qué separa a “super” de lo ordinario? Como exclama un personaje de película azul y cabezón: “¡Presentación!”

Al diseñar una página web, la apariencia juega un papel importante en el gran esquema de las cosas. Digamos que puede tener una pieza interesante que su audiencia pueda apreciar. Si su presentación es mediocre o francamente atroz, es posible que simplemente aleje a esa audiencia. Muy muy lejos.

Afortunadamente, el diseño y desarrollo web no tiene por qué ser difícil. Debe hacer que su página web sea atractiva y realmente atraer a su audiencia. Así es como crea una experiencia maravillosa para sus usuarios. En particular, su elección de fuente puede influir en si un lector permanece o abandona su página web.

Siéntase libre de usar estas fuentes para el diseño de su página web y alcance su máximo potencial. Con suerte, puede tener una idea general de qué fuentes elegir y por qué son tan poderosas para el alcance en línea.

Cómo elegir fuentes de diseño web

Su página web tiene un aspecto definido y único. La forma en que se muestran los textos en esa apariencia es clave para su éxito. Sin embargo, tenga en cuenta que puede mejorar ese éxito en función de estos seis factores:

1. Legibilidad y legibilidad
2. Consistencia de la marca
3. Estado de ánimo y tono
4. Directrices de accesibilidad web
5. Compatibilidad entre navegadores
6. Escalabilidad

1. Legibilidad y legibilidad

La legibilidad es la facilidad con la que los usuarios pueden distinguir entre caracteres. Si su lector tiene problemas para determinar si un carácter es "S" de "5", es posible que deba elegir una fuente diferente. Algunas fuentes proporcionan diferentes formas para caracteres similares (como "1", "I" mayúscula y "l" minúscula) para distinguirlos entre sí.

La legibilidad puede verse influida por otros factores, como las opciones de color de primer plano y de fondo, el tamaño y el peso de la fuente. Por ejemplo, algunas letras pueden ser más legibles cuando aumenta el tamaño de fuente, pero ¿es legible?

En ese sentido, la legibilidad es diferente de la legibilidad.

La legibilidad es qué tan cómodo se siente un lector con la lectura de bloques de texto. Ese nivel de comodidad también está influenciado por la legibilidad de su texto. Si una palabra es demasiado pequeña para distinguir las letras entre sí, es posible que no se pueda leer. Este es también el caso en un bloque denso de “letra pequeña” legal donde uno puede leer el texto completo, pero no tan cómodamente como le hubiera gustado.

2. Consistencia de la marca

Necesita mantener su presentación consistente. Si bien la voz de su marca proporciona una base sólida para su página web, mantener la misma identidad en todo momento establece qué tan serio es para transmitir su punto de vista. Su presentación tiene como objetivo contar una historia en particular, y está invitando a los clientes a identificarse y reconocer esa historia.

Encuentra fuentes que mantengan la narrativa en su lugar. Si está buscando un tono profesional, use fuentes de aspecto profesional. Para contenido atractivo y amigable, use fuentes que se sientan cómodas de ver. Puede encontrar uno que se ajuste a sus necesidades si busca lo suficiente.

3. Estado de ánimo y tono

La psicología de las fuentes es el estudio de cómo las fuentes afectan la forma en que su audiencia percibe su contenido. Algunas fuentes se han usado tradicionalmente para propósitos específicos y la gente se ha acostumbrado a eso. Otras fuentes simplemente evocan ciertos pensamientos y emociones de sus lectores. En cualquier caso, es posible que desee utilizar una fuente que ayude a llevar a su lector al estado de ánimo que desea establecer.

Puedes jugar con las fuentes para establecer ese estado de ánimo. Algunas fuentes, por ejemplo, son más eficaces para los encabezados que para el cuerpo del texto. Mezclar y combinar fuentes puede incluso crear una sensación más dramática para su contenido y generar emociones más poderosas.

4. Pautas de accesibilidad web

Su sitio web tiene que ser inclusivo para todos los visitantes. Garantiza que aquellos que experimenten dificultades o limitaciones sigan siendo bienvenidos a su sitio web de la misma manera que todos los demás. No es simplemente una herramienta para generar más tráfico a su negocio, sino que fomenta una comunidad entre todos sus consumidores.

Para hacer esto, los diseñadores a menudo usan pautas para mejorar la accesibilidad web a sus sitios. Estas reglas y pautas hacen que el contenido sea más fácil de usar y de entender para todos los visitantes. Si bien no es obligatorio en este momento, mejorar la accesibilidad web es una buena manera de establecer una buena relación con su base de consumidores y les muestra que le importa y que quiere que sean parte de lo que está construyendo. Los cuatro estándares principales son:

• Perceptible. En pocas palabras, sus consumidores deben entender su contenido. Tampoco se limita a "ver" el contenido. Tenga en cuenta que los usuarios ciegos o con problemas de visión utilizan un software de lectura de pantalla alternativo para ayudarlos a navegar por Internet. Tenga en cuenta a estos usuarios cuando configure su página web.
• Operable. Esto significa que todos los usuarios pueden acceder y operar todas las partes de su página web (texto, enlaces, audio, video, otros medios). En general, la mayoría de los sitios web operativos son simples y, por lo tanto, fáciles de navegar.
• Comprensible. Sus usuarios deben poder digerir toda la información que está diciendo. Puede utilizar un idioma común u ofrecer idiomas alternativos. Del mismo modo, la navegación de su sitio web debe organizarse de manera intuitiva y natural para ayudar a los usuarios a comprenderlo a usted y su producto.
• Robusto. El contenido de su sitio web debe desglosarse y analizarse fácilmente mediante programas de asistencia como lectores de pantalla. De esa manera, las personas con dificultades seguirán siendo parte de la experiencia que brinda su sitio web.

LECTURA RECOMENDADA: Conceptos de diseño web que priorizan la atención al cliente

5. Compatibilidad entre navegadores

Debe tener en cuenta que algunos usuarios simplemente no quieren usar navegadores web populares como Chrome o Mozilla (por una razón u otra). En algunos casos, estos navegadores alternativos usan fuentes sustitutas, como Arial o Times New Roman, para mostrar su texto. Utilice una fuente que pueda mostrarse correctamente en la mayoría de los navegadores, si no en todos.

Los cuatro formatos de fuente compatibles con los sitios web son:

• Tipo abierto integrado (EOT). Compatible solo con navegadores de Microsoft (Internet Explorer y Microsoft Edge)
• Fuente True Type/Fuente Open Type (TTF/OTF). Fundados por Apple y Microsoft en la década de 1980, estos formatos son compatibles con todos los principales navegadores, a saber, Chrome, Firefox, Opera, Microsoft Edge e Internet Explorer.
• Formato de fuente abierta web (WOFF). Fundado por Mozilla en 2009, este formato es una versión comprimida de TTF/OTF hecha para cargar más rápido
• Formato de fuente abierta web (WOFF2). Una revisión del WOFF anterior, sus principales jugadores incluyen Chrome, Firefox y Opera; está diseñado para reemplazar WOFF y lo hará eventualmente

Tenga en cuenta que los formatos más utilizados en este momento son TTF/OTF y WOFF. Las fuentes que usan estos formatos se pueden mostrar correctamente en todos los navegadores compatibles.

6. Escalabilidad

¿Alguna vez has notado que algunas fuentes se ven mejor y más suaves que otras? Estos tipos de fuentes se denominan fuentes escalables. Están programados para tener el mismo aspecto sin importar el tamaño del texto. Algunas fuentes no están programadas de la misma manera, y el texto resultante se ve más barato y de peor calidad.

¿Por qué es importante la escalabilidad? Es sencillo. Algunas personas, en su mayoría usuarios mayores, simplemente no pueden leer textos más pequeños. Tienen que hacer zoom muy fuerte para poder leer lo que quieres que lean. Elegir una fuente escalable enriquece su experiencia con su página web y también los hace sentir incluidos como parte de su audiencia.

Fuentes de diseño web populares

Ahora que ha cubierto los conceptos básicos para elegir las mejores fuentes para su página web, aquí hay algunas fuentes populares recomendadas por los diseñadores.

1. Abrir Sans

Open Sans es un tipo de fuente "sin adornos". Es directo y directo, y no interfiere con su mensaje. Open Sans también es sorprendentemente muy versátil. Se ve formal, pero su diseñador también le da una "apariencia neutral pero amigable".

Es escalable, lo que significa que puede leerlo en tamaños de texto pequeños y grandes. También está optimizado para interfaces de impresión, web y móviles.

Puede ver por qué Open Sans se usa comúnmente en línea. De hecho, más de 84 millones de sitios web lo utilizan de una forma u otra. Algunos de estos sitios web incluyen:

• upwork
• vana
• Atolón digital
• Revista Ssense

2. Roboto

Roboto es otra fuente popular recomendada por los diseñadores. Es una fuente que es rígida y geométrica, al tiempo que presenta "curvas amigables y abiertas". Las letras parecen más apretadas entre sí, lo que hace que la lectura sea un poco más rítmica.

La familia de fuentes de Roboto incluye Roboto Condensed y Roboto Slab, lo que hace que toda la familia Roboto sea flexible. Es una fuente que se puede usar para casi cualquier cosa, desde títulos hasta encabezados y texto de cuerpo antiguo sin formato. En cualquier caso, parece lo suficientemente profesional y amigable como para ponerlo en su página web.

No es de extrañar que más de 630 millones de sitios web, incluidos Google y YouTube, utilicen Roboto religiosamente.

3. Lato

Lato se diseñó originalmente como una fuente profesional para un sitio web corporativo. Debido a que el cliente tomó una dirección diferente, la fuente se lanzó para uso público. Las letras se ven elegantes y elegantes, como una carta escrita a mano con un tema rústico.

También es agradable a la vista, lo que convierte a Lato en un serio competidor para el cuerpo del texto. También es muy bueno en tamaños más grandes, manteniendo sus características únicas a medida que aumenta el tamaño del texto.

La familiaridad y la calidez también son temas importantes en la fuente. Lato (verano en polaco) también fue diseñado con la sensación de verano en mente. Es rígido, pero no demasiado, desprende un tono serio pero reconfortante.

Un buen ejemplo del uso de Lato se puede encontrar en Bundl, un sitio de empresas corporativas.

4. Helvética

Este es un clásico. Es posible que haya oído hablar de este, y ha recibido una recepción mixta dependiendo de dónde pregunte. Independientemente, Helvetica sigue siendo una fuente sólida para páginas web. Es una familia de fuentes muy flexible y puede tenerla en negrita, condensada o simplemente tener un tipo de letra normal para su página web.

Helvetica se diseñó originalmente en 1957 para ser una fuente neutra, para usarse en casi cualquier lugar. Ha desempeñado ese papel a la perfección, estableciéndose rápidamente como una de las fuentes más populares de Internet. La fuente facilita la lectura de las palabras a distancia y también es perfecta para los titulares. También permanece legible y legible sin importar el tamaño de fuente de su texto.

Helvetica también está en constante evolución con los tiempos debido a su flexibilidad. Las marcas en diferentes industrias usan Helvetica de una forma u otra, a saber: BMW, Motorola, Nestlé, Microsoft y Apple. Las autoridades gubernamentales como la NASA y la Unión Europea también cuentan con Helvetica.

5. Próxima Nova

El exjefe de diseño de Facebook, Cameron Moll, publicó un artículo sobre la historia de Proxima Nova. Él describe la fuente como "increíblemente versátil para las interfaces digitales, funciona como un caballo de batalla en muchos tamaños diferentes y se ve notable en las pantallas de retina".

Proxima Nova es una fuente que pretendía capturar la redondez de fuentes como Futura y la geometría de fuentes como Helvetica. Sin embargo, no es único en ese sentido, ya que otras fuentes también intentaron hacer lo mismo. Gotham era mucho más popular que Proxima Nova a principios de la década de 2000. Moll argumenta que la pronta disponibilidad de Proxima Nova en la web catapultó su estatus como un tipo de letra icónico.

Desde entonces, se ha convertido en la fuente comercial más popular en línea.

6. Montserrat

La fuente de Montserrat se inspiró en el barrio brasileño del mismo nombre. Intenta capturar la vibra de la tipografía de Buenos Aires de antaño y traerla a los medios modernos. Por eso, Montserrat impulsa la nostalgia y la familiaridad de sus espectadores. Establece un tono serio pero amigable para todo tipo de materiales promocionales.

Su popularidad se debe a su escalabilidad y, a su vez, legibilidad. Así, su uso no se limita únicamente a medios online, sino también a medios impresos como folletos y libros. El manual gráfico del gobierno mexicano también ha establecido la fuente como su estándar para los medios oficiales.

7. Ferrocarril

Raleway es una elegante fuente de código abierto. Eso significa que es de uso gratuito y realmente puede mantenerse firme en cualquier diseño web, particularmente su "W" única.

A los diseñadores les gusta usar Raleway por su accesibilidad y también porque combina bien con otras fuentes. La fuente en sí es legible y ofrece un atractivo atractivo para los lectores. Puede usar Raleway para casi cualquier proyecto adecuado para una amplia audiencia.

8. Fuente Sans Pro

Source Sans Pro es la primera familia de fuentes de código abierto de Adobe. Está diseñado para funcionar particularmente bien con las interfaces de usuario. Sus formas redondeadas hacen que las letras sean agradables a la vista, al tiempo que maximizan los espacios entre cada carácter.

La cualidad más notable de Source Sans Pro es su legibilidad, y puede distinguir fácilmente entre caracteres similares en virtud de alguna elección de diseño estilístico. En esencia, Source Sans Pro tiene que ver con la accesibilidad. Es fácil de leer y de tono profesional. La Universidad de Stanford y Adobe usan la fuente para sus sitios web.

9. Poppins

Si está buscando un tono sólido y serio para su página web, Poppins podría ser perfecto para usted. Las letras se ven fuertes y lineales, y son lo más sencillas que se pueden obtener con una fuente.

Como resultado, no tendrá que preocuparse de que su texto sea escalable. También es muy elegante y simple. Es una opción sólida para cualquier página web.

El estudio de animación Wonderlust se encuentra entre los 8,1 millones de sitios web que utilizan la fuente.

10. georgia

Diseñada por Microsoft, Georgia es una fuente que pretende ser legible en formato digital. Parece elegante y legible, incluso en pantallas de baja resolución.

Su elegancia se debe en gran parte a su diseño de inspiración romana. Sin embargo, eso no impide que los caracteres sean legibles en absoluto. Como resultado, la experiencia de lectura se siente equilibrada tanto en formato digital como en papel.

Microsoft actualiza regularmente la fuente para darle una apariencia más moderna y flexible. La versión actualizada, Georgia Pro, está disponible para su compra. Sin embargo, los usuarios de Microsoft pueden obtener la fuente de forma gratuita en Microsoft Store.

11. Exhibición de juegos limpios

Playfair Display se lee como papel de periódico del siglo XVIII, no es que sea algo malo. Esta fuente se ve muy elegante y establece un tono muy profesional para su página web. También permite una lectura sofisticada y es sorprendentemente flexible. Puede combinarlo con otras fuentes para llevar a casa esa sensación elegante.

Cómo usar las fuentes de diseño web de manera efectiva

Se le ha dado una lista de fuentes para usar y cómo identificar las fuentes para sus necesidades. Usarlos de manera efectiva es un proceso completamente diferente. Aquí hay algunas cosas a tener en cuenta al usar fuentes.

1. Emparejamiento y combinación de fuentes.

No es raro ver a los diseñadores mezclar y combinar fuentes para lograr un mayor efecto. Piense en ello como revisar su guardarropa y hacer que una camiseta blanca se destaque en uno de sus conjuntos. O llevar los ojos de la gente a esas nuevas patadas en tus pies.

Del mismo modo, puede dirigir a los lectores a ciertos puntos de su página web, incluso si no son llamativos por sí mismos. Solo tiene que estructurar todo lo demás a su alrededor para asegurarse de que las personas realmente busquen ese lugar específico.

Eso incluye usar diferentes fuentes para diferentes propósitos en la misma página web, o algo tan simple como establecer un esquema de color estético. Maximizar la psicología del color puede incluso mejorar las conversiones en su página web.

2. Creación de fuentes personalizadas.

Si eres lo suficientemente creativo, ¡incluso puedes crear tu propia fuente para tus propios fines! Algunos servicios, como Calligraphr, le permiten transformar su propia escritura a mano en un formato digital. Si está buscando crear una fuente que otros puedan usar, tenga en cuenta que normalmente es un proceso de diseño largo.

3. Licencias y derechos de uso.

La mayoría de las fuentes son gratuitas y se pueden utilizar para diversos fines, ya sean personales o comerciales. Sin embargo, algunos diseñadores de fuentes ponen límites al uso de sus creaciones. Por ejemplo, debe pagarle al diseñador para usar una fuente con fines comerciales.

4. Pruebas y optimización.

Una etapa previa al lanzamiento importante para cualquier página web es la prueba y la optimización. Debe verificar dos veces si el texto se muestra correctamente y con la fuente correcta, si la combinación de colores es agradable a la vista, etc.

LECTURA RECOMENDADA: Cómo crear un flujo de trabajo de diseño y desarrollo web fluido

Configuración de fuentes para su uso en sitios web

Ahora que tiene una idea de qué fuentes se usan comúnmente en línea, está listo para comenzar a usarlas. Así es como puede comenzar:

1. Descargue e instale las fuentes.

Algunas suites creativas ya tienen fuentes preinstaladas que están listas para usar. Sin embargo, si encuentra una fuente que le gusta y no está en su catálogo, simplemente puede buscarla en línea. También puede elegir qué formato desea descargar (por ejemplo, si usará TTF/OTF, WOFF o ambos).

Muchas fuentes de código abierto se pueden descargar gratis, pero algunas fuentes deben comprarse antes de usarlas para ciertos propósitos. Si planea usar una fuente con fines comerciales, asegúrese de leer los términos de la licencia de la fuente antes de hacerlo.

Una vez que encuentre una fuente, simplemente descárguela en su computadora. La mayoría de las fuentes vendrán en formato .ZIP, por lo que debe extraerlas. Simplemente haga clic derecho en el archivo y seleccione "Extraer aquí" para hacerlo. Terminará con un archivo de fuente que está listo para instalar.

Simplemente haga doble clic en el archivo y luego presione "Instalar" en la pantalla de vista previa que aparece.

2. Incruste las fuentes en su sitio web.

Si planea hacer el trabajo usted mismo, puede buscar diferentes guías como esta para ver cómo puede incrustar las fuentes usando diferentes plataformas web.

Tenga en cuenta que hay una lista de verificación de diseño web antes de lanzar su página web al público.

3. Garantice la compatibilidad entre navegadores.

Las fuentes más populares y de uso común ya están en versiones TTF/OTF o WOFF, lo que significa que se muestran correctamente en todos los principales navegadores. Sin embargo, es posible que encuentre una fuente personalizada que no se vea como se esperaba porque tiene un formato diferente.

Si desea seguir con una fuente, puede probar algunas guías en línea y hacer que su texto sea compatible con varios navegadores. Sin embargo, se recomienda que utilice fuentes que tengan los formatos antes mencionados para que su diseño web no se vea afectado.

Consejos de optimización de fuentes web

Puede encontrar problemas con los tiempos de carga de su página web. Hoy en día, los largos tiempos de carga son la ruina de cualquier persona que navega por la web. Sus usuarios y clientes potenciales no son diferentes. Así es como puede evitar largos tiempos de carga:

1. No uses demasiadas fuentes.

Este es bastante sencillo. Por lo general, cuantas más fuentes personalizadas utilice en su sitio web, significa que está ralentizando su servicio de alojamiento web.

La regla general en el uso de fuentes es ceñirse a dos clases de fuentes: una para el encabezado y los títulos, y otra para el cuerpo del texto. De esa forma, puede evitar sobrecargar su servicio de alojamiento y es menos exigente para su equipo de diseño. Sus visores también pueden apagarse si cambia las fuentes con frecuencia.

2. Utiliza tipografías optimizadas para cada navegador.

Desafortunadamente, ningún formato funciona en todos los navegadores. Tienes que usar diferentes formatos al crear una página web. Con Google Analytics, puede comprobar qué navegadores y dispositivos son los más populares entre sus visitantes.

Si se siente cómodo con los navegadores más antiguos que usan fuentes alternativas, siempre puede tomar atajos. Pero de nuevo, eso no es recomendable.

Conclusiones clave

Ahora que el polvo se ha asentado, es hora de poner a trabajar su creatividad. Puede utilizar las fuentes de esta lista o explorar Internet para encontrar fuentes personalizadas que se adapten mejor a sus necesidades. En cualquier caso, aquí hay tres conclusiones principales de este artículo:

• Use una fuente consistente con la voz de su marca. Mejora las relaciones con su audiencia y marca la pauta para nuevos clientes.
• Haz que tu marca esté centrada en el cliente. Un aspecto importante del diseño web es que está creando algo para que sus usuarios disfruten; no solo tú.
• No tengas miedo de experimentar. Para eso está el proceso de diseño. Se supone que debes explorar qué funciona y qué no.

Póngase en contacto con Propelrr hoy para saber más sobre los conceptos de diseño web. Estamos más que encantados de ayudarle. Si necesita más ayuda o más información, conéctese con nosotros a través de Facebook, Twitter o LinkedIn.

Para obtener más consejos sobre cómo crear aplicaciones y sitios web centrados en el usuario, asegúrese de suscribirse al boletín de Propelrr para obtener acceso instantáneo.