Qué tipografía escoger para mi web

Cuando hacemos un diseño para un sitio web, a veces pensamos en todo, menos en el tipo de letra que vamos a usar. Pensamos en los colores, los gráficos, imágenes, el concepto, pero el tipo de letra lo dejamos al azar o la que viene por defecto si usamos un plantilla.

Sin embargo, escoger la tipografía adecuada es importante porque:

  • El 95% de la web es tipografía
  • Se pierde el objetivo de nuestro sitio.

Si la letra es muy pequeña, el color de la letra no se distingue con el color de fondo, si el tipo de letra tiene muchos adornos, puede ocasionar que no se entienda con facilidad,  lo más probable es que el usuario se distraiga y enfoque su vista en otra cosa o peor aún, abandone la página.

Por tal razón, escribo sobre 5 errores que debemos evitar cuando seleccionamos la tipografía para nuestro sitio web

1. Escoger una buena tipografía

 Tipos de tipografías

Hay 3 tipos de fuentes:

  • San Serif: Más conocida como palo seco, es la que no tiene serifas (adornos en la letra). Se usa mucho para títulos y textos cortos.
  • Serif: Son fuentes que usamos para textos muy largos, porque:
    •  Su forma hace que sea muy relajado para leer, pues cansan menos al ojo.
    • Ayuda a unificar la lectura entre letra y letra además guía al ojo en la lectura continua.
    • Emula la letra escrita y hace que la lectura sea ágil.
  • Slab Serif: La Serif con estilo bold

Para web y textos largos, es mejor evitar las fuentes ornamentales, es decir, aquellas que tienen muchos adornos o sus puntas son muy alargadas, pues hace más difícil la lectura o entenderlas. 

Tipografía Ornamental

Solución:

En internet, tenemos muchas opciones gratuitas, donde hay una gran variedad de fuentes que podemos escoger para nuestro sitio y así dejar de usar las mismas de siempre, como Trebuchet, Arial, Calibri entre otras.

Estas herramientas son:

  • Google Fonts
  • Fontsquirrel
  • Adobe Kit (Aunque este tiene un número limitado gratis)

2. Párrafos con ríos o calaveras

Párrafos con rios

El espaciado que hay entre las palabras en un párrafo debe ser uniforme, o si no puede ocasionar que se formen huecos que se unen con los espacios entre las líneas superiores o inferiores y hacen “caminos” que llamamos ríos o calaveras.

La razón, es porque intentamos justificar los textos en nuestro párrafo. Es muy difícil organizar párrafo por párrafo para que siempre se vea bien tal como lo haríamos con algún material impreso, además, puede complicarse si son muchas personas las que publican contenido.

Solución:

Se recomienda alinear el texto a la izquierda.

3. Introductorios cortados

Introductorios cortados

Generalmente, en la página de inicio tenemos una pre visualización o una descripción corta de un artículo de nuestra web. Se recomienda, editar estos textos para que no se vean cortados y seguidos de unos puntos suspensivos (…)

La razón es porque puede verse como un error de diseño del sitio aunque es un error de edición.

La solución es editar el texto, que se vea coherente, llamativo y sin ningún corte, al final, terminar con las palabras “leer más” seguido por puntos suspensivos que al dar clic, nos redirecciona al artículo completo.

4. Ajustar los interlineados y espacios entre letras

Interlineados y espacios entre letras

Es muy importante tener esto en cuenta para que el usuario tenga una buena experiencia en la lectura de nuestros contenidos

  1. Interlineado
    Se vuelve muy incómodo leer cuando hay textos muy largos pero con poco espacio entre letras. Cuando son palabras cortas, hay ocasiones que si puede visualizarse bien, todo depende de cómo está organizado nuestro diseño.
  2. Espacios entre letras
    Si es muy pequeño, la lectura es incomoda y si es muy grande veríamos las palabras como letras sueltas.

5. Color de la tipografía

Color de la letra

Esto es un tema de mucho debate, qué color de fondo usar, si negro con letras blancas o gris claro, o fondo blanco con letras gris oscuras. Personalmente, creo que depende del diseño que tengamos, los dos son válidos y los dos tienen ventajas y sus desventajas.

  • Las letras gris claro con fondo negro, la vista se cansa menos, si estamos en un lugar donde no hay mucha luminosidad, sin embargo,  es muy difícil, combinar los colores, escoger las imágenes cuando trabajamos sobre estos fondos oscuros. Normalmente, he visto muy pocas web que usan fondos negros, lo he visto más que todo en páginas para descargar juegos, programas, blogs, entre otras.
  • Con fondo blanco y letras grises oscuras (80%, 90% Gris), ciertos estudios dicen que favorece la mejor retención del contenido. La mayoría de web están hechas sobre fondos claros, da más oxígeno al diseño web, evita que se vea saturado, es más fácil combinar colores y escoger buenas imágenes. Es mejor usar letras de color gris que letras 100% negras, esto también ayuda a que la vista no se canse tanto.

Quiero destacar, la importancia de usar buenos colores en nuestro tipo de letras. Te comparto una herramienta que mide el contraste y verifica si los colores que voy a usar son fáciles de leer por los usuarios, aun incluso si tienen problemas de visión. La herramienta es ContrastChecker. Escribes el color de fondo y la tipografía y te calcula si es correcto usar esa combinación.


Agradezco la ayuda brindada por las explicaciones y los artículos de @misterymotion de las cuales tome como base para este artículo.

 No olviden seguirme en twitter @juksoto

Etiquetas:, , ,

"Trackback" Enlace desde tu web.

Deja tu comentario

¿Necesitas asesoría en algún proyecto o trabajo?

Muestrános tu trabajo

¿Quieres aportar tus conocimientos a la comunidad?

¡Haz parte de Cubemedia!
Ayudamos a demás profesionales

¿Te ha servido algun artículo?
Ayudános a que llegue a más personas.
Compartir en