La geometría puede hacer una fuente legible, pero solo el arte la hace bella.

Paul Standand. Calígrafo Estadounidense.

Cinco consejos para elegir la mejor fuente para tu web

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado
 

Sin duda una de las decisiones más decisivas a la hora de crear una página web es elegir las fuentes correctas. La elección de fuentes, a diferencia de lo que piensan muchos clientes, no es una decisión subjetiva, debe ser objetiva, en función de la imagen que queramos que nuestra empresa transmita, incluso de la experiencia que queramos proporcionarle al usuario. Por tanto no afecta solo al diseño, sino también a la usabilidad. Es por eso que queremos compartir algunos consejos que incorporamos en nuestros diseños web. 

 

#1 Reduce al mínimo el número de fuentes en tu web 

Estamos en la era del estilo plano y un estilo plano se caracteriza por ser armonioso y reducir a la mínima expresión el uso de elementos, y las fuentes web están entre ellos. Que existan múltiples elementos HTML (párrafos, encabezados, listas,...) no significa que cada elemento debe tener una fuente. La misma lógica es aplicable a los tamaños y colores de éstas. Te recomendamos elegir dos o a lo sumo tres fuentes para tu web. Una para los párrafos, otra para la cabecera y una tercera opcional para elementos de interacción como botones o elementos de menú. 

 

Donde encontrar las mejores fuentes para tu diseño web

 

#2 Usa servicios como Google o Typekit

Usar servicios estándar como Google Font o Typekit de Adobe supone que tu web sea un poco más rápida. El impacto de las tipografías en la web es casi imperceptible pero el uso de estos servicios basados en CDN hará que tu web sea rápida aún cargando todas las fuentes de Google Font o Typekit y facilitará su implementación en tu web garantizando la compatibilidad con los navegadores modernos.  Te recomiendo que si tienes el placer (cada día más raro por la existencia de los CMS y las plantillas que incorporan todas fuentes disponibles en Google Font) de diseñar una web en HTML puro no cargues todas las tipografías de Google Font, carga solo las familias que vayas a utilizar. Si quieres usar solo fuentes seleccionadas tendrás que añadir una etiqueta HTML como la siguiente antes del cierre de <head>. 

 

<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">

 

Además indirectamente usar estas fuentes tiene una ventaja. Hoy en día un alto porcentaje de webs utilizan estos servicios, por tanto los usuarios están acostumbrados a leer con estas fuentes.

#3 Alinea tu fuente web con tu imagen corporativa

En tu negocio manda tu imagen corporativa y si no es así, estás creando confusión entre tus clientes actuales o potenciales. El tipo de fuente que elijas dirá mucho de ti y de tu negocio. Los diferentes diseños de fuentes crean diferentes impresiones. Si tu negocio es un bufete de abogados debes usar una fuente seria e incluso que infunda respeto. Si eres una tienda de moda debes transmitir sofisticación y belleza. Y NO SOLO en tu web, también en tu diseño de packging o papelería corporativa por poner dos ejemplos. En la siguiente infografía sacada de Crazzy Egg puedes saber más sobre la psicología de las tipografías. 

 

Psicología de la tipografía

En la mayoría de ocasiones en tu diseño web deberás mezclar diferentes tipos de fuentes.

 

#4 Elije fuentes que funcionen correctamente en diferentes tamaños y con diferentes alturas de línea

Es una recomendación de la W3C utilizar tamaños de fuentes relativos. Expresados en tanto por ciento o em por ejemplo. Hay fuentes que por su diseño, por ejemplo aquellas que tienen un trazo curvo, no se renderizan correctamente si su tamaño es pequeño y si expresas el tamaño en valores relativos, tendrás un problema: no será lo suficientemente legible. Si usas fuentes de Google Font te recomendamos que uses el selector de tamaño para comprobar que la web se renderiza correctamente en todas las pantallas.

Elección del tamaño de fuente adecuado en Google Fonts

Algunas fuentes no se renderizan correctamente en sus pesos más ligeros (Thin) o pesadas (Black) 

Tabla de pesos de fuente

Tabla de pesos en el diseño web

 

#5 Si tienes un blog, no uses una fuente para vender, usa una fuente para leer.

En nuestra agencia nos encantan las fuentes hechas para leer como Noto Serif o Work Sans de Google Fonts. Si tienes un blog utiliza una fuente específica para él, una fuente que ayude a que la lectura en tu blog sea placentera, no un esfuerzo. Hemos visto como un simple cambio de fuente en un blog ha hecho que el tiempo de permanencia aumentase un 30%. Y esto para Google es bueno, mejora la experiencia de usuario y Google lo valora. Si en tu página corporativa debes transmitir seriedad usa fuentes como Arimo. Debes ajustar el texto a su finalidad, aunque recuerda la regla #1, no abuses del uso de diferentes tipografías. 

 

Consejos para usar fuentes en tu web

Extra: 4 fuentes de Google Fonts que debes tener en cuenta.

Si estás creando tu web vamos a recomendarte 4 fuentes de Google Fonts que puedes utilizar en funcion de tus necesidades de diseño. 

Para los párrafos: Karla y Arimo son nuestras preferidas. Son fuentes que transmiten seriedad y funcionan perfectamente con colores grises suaves y con pesos ligeros. 

¿Qué te parece la fuente Karla a 16 píxeles y con un espaciado de 1 píxel?

 

Para las cabeceras puedes utilizar fuentes con un diseño más moderno y atrevido como Oswald o Monserrat

 

Fuente Oswald ejemploUna de las ventajas de Oswald es la gran variedad de pesos de los que dispone, perfecto para crear cabeceras con diferentes estilos pero la misma fuente. 

 

¿Y tú, qué fuentes son tus preferidas o utilizas en tu Web? Comenta y comparte. Y por supuesto si necesitas ayuda con tu web pregúntanos.

Sobre el Autor
Author: Álvaro
WooCommerce & WordPress Manager
Álvaro forma parte del equipo de Rombo, especializado en el desarrollo de aplicaciones web en WordPress y WooCommerce, aunque su pasión ha sido Joomla! desde 2008 ¡Le encanta compartir sus conocimientos! Así que... ¡pregunta!

5 1 1 1 1 1 1 1 1 1 1 Valoracion 5.00 (7 Votos)

 

Agencia de Marketing Digital en Cádiz y Chiclana de la Forntera
Somos una Agencia de marketing digital 100% online orientada a resultados.