Una guía para la tipografía web

La tipografía para la web ha recorrido un largo camino desde que Tim Berners-Lee puso en marcha la maquinita en 1991. Los tiempos en que todo era solo texto plano y aburrido han quedado atrás, ahora las cosas son muy diferentes. No sólo tenemos navegadores que soportan imágenes (¡Oh wow!), Pero tenemos la oportunidad de hacer que nuestro diseño de páginas web cobre vida a través de una excelente tipografía.

Una guía para la tipografía web

Muchas personas buscan diferentes tipos letras para su sitio web, pero la tipografía va más allá, hay que saber que no solo se trata de elegir un tipo de letra, o buscar las fuentes web que consideremos buenas para un diseño, la tipografía es más que solo eso.

Hoy vamos a hablar de la tipografía web en términos de una receta de cuatro ingredientes fundamentales. Si alguna vez has tratado de cocinar, sabrás que es mejor seguir una receta que intentar hacerlo solo como uno cree que pueda ser mejor, pero basta de hablar de comida… cocinemos:

Una guía para la tipografía web


Contraste

Un texto rosado pálido sobre un fondo azul claro, puede que se vea bien en tu camiseta, pero no se va a leer bien. El texto existe para que se lea; asegúrate de que este contrasta bien con el fondo para lograr esto.

Si no estás muy seguro con respecto al contraste, toma un captura de pantalla del texto en tu sitio web y ponla como imagen en un editor y cambia la imagen de color a escala de grises, si lo haces, pronto verás si tienes suficiente contraste. La tipografía debería honrar a nuestro contenido, no sirve de mucho tener un buen contenido si no se va a leer bien, está honrando tu contenido el tipo de letras que usas en tu pagina web?

No es que me guste ser demasiado “conservador”, pero yo prefiero leer texto oscuro en un fondo claro, he visto muchos lugares, especialmente libros, adonde escribes bloques de texto en fondo “revertido” – fondo negro con texto claro – y está bien para una porción de texto, pero con todo el contenido tengo mis reservas, todo depende de la imagen que quieras proyectar, pero a veces mantenerlo simple es lo mejor.

Tamaño

El tamaño si importa.” – Con el nacimiento de la Web 2.0 me di cuenta de una tendencia que me resulta un poco molesta; me refiero al texto pequeño. No tengo problemas de la vista, pero es importante que el texto de nuestro sitio web tenga el tamaño correcto para que pueda leerse apropiadamente por todos, independientemente del dispositivo que se use.

No uses texto con menos de 10px o 12px, de hecho sería mejor hacerlo más grande, por ejemplo, para el texto en WS316 (Este sitio), uso Source Sans Pro con 18px en tamaño, y hasta el momento veo que se lee bien tanto en un televisor HD de 42 como en un teléfono. Debes buscar lo que funcione para ti, pero considera que el tamaño del texto debe ser legible en todos lados.

Jerarquía

Variar el tamaño de letra es una de las mejores maneras de diferenciar el contenido. Los colores y cajas bonitas pueden ayudar, pero diferentes tamaños de letra, usados consistentemente en todas tus páginas, serán una señal fuerte y clara que le dará a tus lectores la importancia relativa de los elementos de cada página.

También significa que si tus lectores tienen prisa, pueden ver rápidamente las partes importantes – y eso podría hasta hacer que se quedan más tiempo y sigan leyendo.

La Jerarquía puede conseguirse de otras maneras también. Aqui solamente he mencionado el uso de diferentes tamaños de letra para alcanzar esto, pero también podemos utilizar diferentes estilos; por ejemplo, en mayúsculas, o usar cursivas para los subtítulos. Fuentes serif y sans serif también se pueden mezclar con buenos resultados.

Espacio

Dale un respiro a las letras en tu pagina web. No tengas miedo de dejar espacios en blanco en tus páginas.

Este espacio negativo o espacio blanco te ayudará a centrar la atención en el texto y recuerda que es el texto el que habla más fuerte, así que deja que se oiga. Además, recuerda la propiedad CSS “line-height”; una buena práctica es dejar el espacio entre líneas (line-spacing) con al menos un 140% del tamaño del texto (recuerda que aqui estamos hablando de tipografía para la web).

Un buen diseñador web debe considerar el espacio negativo (whitespace) como un recurso más que un desperdicio, aunque no parezca, pero uno podría pasar horas tratando de encontrar el balance perfecto entre los espacios y el texto, vale la pena, con el tiempo irás mejorando en esto.

Recuerda, estas no son reglas, sino más bien guías. Sin embargo, deberías seguirlas: contraste, tamaño, jerarquía y espacio. De esta manera tu receta para cocinar un buen diseño de pagina web será aún mejor.

¿Que ha funcionado para ti? Déjamelo saber en los comentarios

Danny Guzman

About Danny Guzman

Esposo, cristiano, emprendedor y amante de la música. Hago diseño web/gráfico, trabajo con redes sociales, marketing y más. Me encanta tocar mi guitarra, bloguear y tomar café. I speak English too.

4 Comments