¿No sabes cómo elegir las fuentes web más adecuadas? En este post te lo contamos.
Actualizada a enero de 2016
Una página web es mucho más que una simple tarjeta de visita online. Es un sitio en el que hacer nuevos clientes y vender más, pero para conseguirlo hay que diseñar el sitio sabiendo lo que se está haciendo y lo que se quiere conseguir. Por ello, es vital elegir bien las fuentes web.
Cada elemento de la página web es una herramienta mediante la cual podemos conseguir lo que pretendemos si lo diseñamos bien. La disposición de contenidos, el color, las imágenes, el menú… Pero hay otro elemento crucial que no debemos olvidar en diseño web, la tipografía.
De la buena o mala elección de las fuentes web, y cómo las usemos en nuestro sitio, dependerá que consigamos un efecto atrayente para nuestros usuarios o todo lo contrario, y que se convierta en un gran repelente.
Una vez hemos seleccionado la familia tipográfica en función de lo que queramos transmitir , tendremos en cuenta los siguientes factores:
Legibilidad
Que la fuente que decidamos usar en nuestra web se lea correctamente es básico. De nada sirve que tengamos unos excelentes textos si no son fáciles de leer. Así que olvidad eso de que cuanto más rara es la tipografía más diseño le estamos dando a la web y buscad tipografías que inviten y faciliten la lectura.
Tamaño de la letra
No hay un tamaño estándar para la tipografía web, pero como consejo del que partir es recomendable no usar fuentes web a menos de 12 px o 14 px para los textos de la web.
Para los títulos y subtítulos tampoco hay un tamaño predeterminado, pero debemos tener en cuenta que deben ser lo suficientemente grandes como para atraer la atención del usuario, para dividir visualmente los textos en diferentes bloques y para que a simple vista ya se entienda que son títulos.
Color de la fuente
Podemos elegir una tipografía muy legible y usarla a un tamaño adecuado, pero si no tenemos en cuenta el color de la misma y el del fondo sobre el que va, no servirá de nada.
El texto negro sobre fondo blanco es lo que más contrasta y mejor se lee. Si no queremos usar esta combinación, podemos poner el texto en gris, pero oscuro para que se siga leyendo fácilmente. Si tenemos fondos de color oscuros podemos usar las fuentes web en blanco, si por el contrario, tenemos fondos muy claros, usaremos tipografías de colores oscuros, pero siempre consiguiendo que haya contraste entre ambos.
Por ejemplo, si tenemos un fondo blanco y ponemos el texto en amarillo, no se leerá bien :)
Espacio entre caracteres
Si dejamos poco espacio entre caracteres, por mucho que la tipografía y el esquema de color que estemos usando sean buenos, la fuente perderá su legibilidad.
Tampoco debemos separa demasiado los caracteres o conseguiremos el mismo efecto.
Lo más adecuando suele ser un espacio de 1 px o 2 px, ya que suele ser suficiente para que no se formen huecos indeseados entre las palabras en el párrafo, y ayuda a la lectura.
Espacio entre líneas
Igual que con el espacio entre caracteres, éste no debe ser demasiado grande ni demasiado escaso.
Si juntamos demasiado las frases corremos el riesgo de que el texto aparezca apelmazado en un bloque ilegible, y si lo separamos demasiado igualmente perdemos legibilidad.
Como partida, poner un interlineado 4px superior al tamaño de la fuente suele ser una medida apropiada, pero siempre teniendo en cuenta que a mayor cantidad de texto, mayor interlineado se recomienda.
Grosor
Otro de los factores a tener en cuenta es el grosor de la tipografía. No es recomendable usar todo el texto en negrita, pero tampoco debemos utilizar una tipografía demasiado fina.
Lo idea es tener elegir una fuente con un grosor medio, y utilizarla thin o light (fina) sólo para títulos grandes donde sea legible, o bold para títulos también, o textos del cuerpo destacados.
Jerarquía
Mediante el tamaño y colores de la tipografía debemos jerarquizar nuestros contenidos, dando mayor importancia visual a los títulos.
Es decir, si tenemos un encabezado principal, un subtitulo, y después un párrafo de texto corrido, deberemos hacer que el título principal tenga el mayor tamaño de letra de todos, y un color que destaque más que el resto de textos. Después, usaremos un tamaño menor que el del título principal para el subtítulo, pero bastante mayor que el del cuerpo del texto, y por último, usaremos el tamaño más pequeño para el párrafo.
Con esto conseguiremos que nada más entrar en nuestra página, sin llegar a leer, el usuario ya reconozca lo que son títulos y la importancia de los contenidos, además de conseguir que todo quede organizado y tenga un aspecto más limpio.
Jerarquía
Muchas veces usamos tipografías diferentes para los títulos y para el cuerpo de texto. Esto está bien, porque ayuda a diferenciar los contenidos y, ya que las fuentes web que usamos en títulos suelen ir en tamaños grandes, así nos podemos permitir utilizar fuentes más originales en los encabezados, sin perder legibilidad en el cuerpo de texto.
Normalmente con usar 2 o 3 tipografías diferentes es suficiente, tampoco es recomendables usar muchas fuentes diferentes porque así el diseño pierde su unidad.
Ahora que conocemos lo que debemos tener en cuenta para elegir una buena tipografía para tener un diseño web profesional, es cuestión de buscar en una de las muchas páginas de fuentes web que hay, como por ejemplo la de Google ;)
