La cuestión tipográfica será primordial para darle un carácter visual y conceptual a tu sitio web pero no sólo está en juego la componente estética sino también, la performance de tu página. Acá te indicamos cuáles son las mejores tipografías para un sitio web.
LAS MEJORES TIPOGRAFÍAS GOOGLE FONTS
Como desde hace unos años, el gigante de las búsqueda y data collect estableció un estándar con su kits de fuentes. Una amplia librería llena de tipografías gratuitas, disponibles para usuarios y desarrolladores.
Las famosas Google Fonts aparte, ofrecen una enorme variedad de estilos, tipografías con serifa, tipografías sin serifa, cursivas, manuscritas, variantes que más allá de la diversidad estilística ofrecen el valor más importante que una fuente debe tener: legibilidad.
Es muy sencilla su inclusión: las podés configurar desde la apariencia de tu plantilla de wordpress (si es que estás trabajando con el popular CMS), con algunas líneas de código html en el head de tu web podrás conectarlas a tu sitio (estableciendo fuente y pesos a utilizar) o importarlas directamente en la hoja de estilos.
Un ranking publicado por un grupo de diseñadores y diseñadoras web, seleccionó la siguiente lista como las mejores tipografías para un sitio web:
USAR TIPOGRAFÍAS ESTÁNDAR (SAFE FONTS)
Y esto es súper importante. Si bien hay una enorme cantidad de bellos estilos que nos permitirán darle un carácter visual único a nuestro sitio, hay una cuestión que es tanto o más importante: la performance.
Es que la carga de las tipografías demandan un tiempo al servidor que a veces puede ser demasiado alto. Esto impacta directamente en los tiempos de carga de tu sitio web. Y por lo tanto, afectará «el concepto» que los buscadores como google, yahoo, bing y tantos otros, tendrán de tu página.
La velocidad es fundamental hoy en día y una mala elección tipográfica puede afectar muchísimo la optimización de tu sitio web.
En un sitio que diseñamos, la directora quería utilizar una tipografía muy linda, que realmente expresaba el carácter de la marca. Como se trataba de una fuente tan particular, había que incluir la versión web de la fuente y aparte especificarla directamente en el elemento (<h2 style=»font-family:’Fuente Ejemplo’,coursive;»</h2>).
Para variar, si el navegador demoraba en procesar esta tipografía, como especificamos que era «cursiva», si no levantaba nuestra fuente tan querida, renderizaba en una tipografía cursiva estándar muy fea que realmente nada tenía que ver con la marca y el sitio.
Logramos modificar la tipografía y ganamos 4.21 segundos de velocidad en la carga parcial del sitio. Es una bestialidad de tiempo!
Es por eso, que una buena elección tipográfica es fundamental. Quizás se puede hacer convivir una safe font (para los textos por ejemplo – las etiquetas <p> -), con una tipografía de la biblioteca de google, que ayude a recuperar cierto carácter visual proyectado antes del diseño web del sitio, dentro de un estándar que quizás adhiere un tiempo de carga (no tan elevado) y que nos asegura recuperar la fuente escogida, sin resignar tanta performance.
Es por eso que se vuelve tan frecuente el uso de safe fonts o las tipografías estándar, que cualquier navegador o sistema operativo puede procesar o renderizar con facilidad.
Porque justamente forman parte del estándar y el servidor no necesita (o casi) hacer ningún tipo de solicitud, responder a ningún tipo de regla de importación o ir a ningún otro sitio web (google) para traer una tipografía y mostrarla.
Entre las mejores tipografías para un sitio web del tipo seguras o «safe fonts», tenemos:
Arial (sans-serif)
Verdana (sans-serif)
Helvetica (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
Brush Script MT (cursive).
Si bien se reduce bastante el espectro de posibilidades, aumenta muchísimo la performance y mejoran los tiempos de carga de un sitio web (en este articulo vas a encontrar recursos para optimizar la velocidad de carga de tu sitio web).
Es aquí también, que quien diseña debe mostrar su destreza: en definitiva se trata de eso, organización del espacio, relación de caracteres (estilo, pesos, tamaños, alineaciones) y elección del color (texto e imágenes).
El desafío por descubrir los grandes diseños está más vivo que nunca.
