Guía de tipografía web

Guía definitiva de tipografía web: diseño para la legibilidad

Seleccionar un tipo de letra es fácil: basta con abrir el menú desplegable y hacer clic en un nombre. Elegir el tipo de letra adecuado, en cambio, no es tan sencillo. Implica una larga lista de consideraciones y es una de las decisiones más importantes que tomarás durante el proceso de diseño de tu sitio web.

Los diseñadores profesionales suelen aprender los fundamentos de la tipografía como parte de sus estudios. Sin embargo, a medida que aumenta el número de personas que aprenden sobre Creador de sitios web o herramientas similares, comprender la tipografía de un sitio web es cada vez más importante, incluso para quienes no son diseñadores. Por lo tanto, para repasar los conceptos básicos de la tipografía de sitios web, este artículo ofrece consejos que puede utilizar a la hora de elegir una fuente para su sitio web con el fin de garantizar la mejor experiencia de lectura para su público.

¿Qué es la tipografía web?

Todo sitio web tiene texto, y donde hay texto, hay tipografía. En términos generales, la tipografía de sitios web define el aspecto del texto en el sitio web. Se trata de cómo aparecen las palabras en la página, tanto el estilo (la fuente, el tamaño, el espaciado) como la forma en que aparece el texto en la página.

La combinación de todos estos elementos debe procurar que el texto sea fácil de leer. Además, la tipografía del sitio web también debe tener en cuenta lo siguiente:

• Los periodos de atención son más cortos, sobre todo en Internet;
• Accesibilidad, porque las personas interactúan con los textos en línea de distintas maneras;
• Facilidad de lectura, ya que la gente no suele tener tiempo de leer todo el texto;
• Diferentes tamaños de pantalla, ya que los usuarios navegan por los sitios web en distintos dispositivos.

Lo más importante que hay que saber sobre tipografía es lo siguiente: Si funciona, no se dará cuenta. Si no funciona, probablemente no permanecerá en el sitio el tiempo suficiente.

Términos de tipografía web

Para entender mejor la tipografía web y, en última instancia, introducirla en su sitio web, primero vamos a cubrir algunos términos básicos de tipografía y entender cómo se pueden aplicar a la tipografía web.

1. fuentes

Un tipo de letra es un aspecto específico y un conjunto de características aplicadas a un grupo de elementos alfabéticos, numéricos y de puntuación. Si su primera pregunta fue: "¿No son estos los tipos de letra?", no está solo: se trata de un error muy común.

Son partes de una fuente. Luego se distinguen por su peso (negrita o ligera), su tamaño (14px o 24px) u otras estilizaciones (cursiva, subrayado, etc.). Por poner un ejemplo, Helvetica Bold (16px) y Helvetica Regular Italic (24px) son fuentes, y forman parte del tipo de letra Helvetica. Las fuentes también suelen denominarse familias tipográficas, ya que son un término amplio que engloba fuentes con características similares.

Muchos tipos de letra sólo corresponden a dos fuentes: serif y sans-serif. Las fuentes serif suelen contener pequeños adornos al final, las fuentes sans-serif no. He aquí una forma fácil de distinguirlas: "Sans" significa sin en francés.

Aparte de estos dos, también existen otros tipos de letra, uno de los cuales es Script. Sin embargo, estos tipos se utilizan con menos frecuencia en la web, ya que son más difíciles de leer en las pantallas.

2. subcotización

El interletraje es el espacio horizontal entre los dos caracteres de una palabra. Los distintos tipos de letra tienen diferentes interletrajes para mejorar la legibilidad y evitar huecos incómodos en las palabras. El interletraje también puede variar entre los distintos caracteres de una misma palabra con el mismo fin.

En el segundo caso, se añade interletraje entre las T repetidas para mejorar la legibilidad.

3. seguimiento

Al igual que el interletraje, el tracking es la distancia entre las letras. Sin embargo, en lugar del espacio entre dos caracteres individuales, el tracking es el espacio entre todas las letras de una palabra o línea. Y, al igual que el kerning, también se ajusta para mejorar la legibilidad, enfatizar una palabra o cumplir otros objetivos.

4. interlineado

El interlineado o altura de línea es el término que se utiliza en tipografía para referirse al espaciado entre líneas y desempeña un papel esencial para que el texto de su sitio web sea legible. Al aumentar el interlineado, aumenta el espacio entre las líneas, lo que generalmente mejora la legibilidad. Para una buena legibilidad, el interlineado debe ser generalmente unos 30 % mayor que el tamaño de la letra. Por ejemplo, si el tamaño de la letra es de 20 píxeles, se recomienda un interlineado de 26 píxeles.

El uso correcto de los espacios en blanco en el texto debería mejorar la comprensión del mismo, ya que separa visualmente el contenido en partes digeribles y no abarrota la página.

5. jerarquía

La jerarquía es el orden del texto en su sitio web. La mayoría de los sitios web, especialmente los que tienen mucho texto (como las entradas de blog), intentan dividir el texto en secciones más pequeñas para hacerlo más digerible y manejable. Estas secciones se denominan títulos.

La jerarquía textual permite a los lectores saltar por el texto y fijarse en las secciones más importantes o que están buscando. También permiten destacar qué partes del texto son críticas, mientras que otras son información secundaria.

En los sitios web, la jerarquía del texto puede enfatizarse mediante diferentes tipos de letra, tamaños de fuente, colores u otras características. Por ejemplo, en este artículo, los términos de tipografía web son un Título 2 (H2,) mientras que los términos mencionados son un Título 3 (H3). Estas secciones H3 son cada vez más específicas, y su aspecto indica que son una subsección de un tema más general. El título del blog suele ser el encabezamiento 1 (H1). He aquí un ejemplo de la jerarquía del texto mostrado en nuestro editor de texto.

Selección del mejor tipo de letra para leer en la pantalla

El diseño digital evoluciona rápidamente. Mientras que hace unos años sólo había un puñado de fuentes entre las que elegir, hoy hay miles. Estas fuentes se crearon para la pantalla y tienen matices y detalles que las hacen legibles en distintos dispositivos.

Dicho esto, hay algunas cosas que debe tener en cuenta a la hora de elegir un tipo de letra para su sitio web. Harán que la experiencia de lectura en su sitio web sea mucho más agradable y proporcionarán una mejor experiencia al cliente.

1. limitar al mínimo el número de fuentes utilizadas

Una buena regla es ceñirse a una o dos familias de fuentes. Si excede este número, su texto y su sitio web parecerán desestructurados, poco profesionales y, a veces, incluso confusos. Lo mismo ocurre con los tamaños de letra: Demasiados tamaños, sobre todo mezclados, pueden crear una experiencia visual bastante caótica.

Una vez elegidas las familias de fuentes, manténgalas en todo el sitio web. Si elige dos familias de fuentes, es importante que se complementen o al menos armonicen entre sí.

Eche un vistazo a los siguientes ejemplos de combinaciones de fuentes. Aunque las fuentes de la primera imagen pertenecen a familias tipográficas distintas y parecen bastante diferentes, ninguna de ellas eclipsa a la otra. Las dos fuentes están bien equilibradas y crean una combinación armoniosa.

Veamos ahora otra combinación de fuentes. En este ejemplo de combinación Baskerville + Impact, Impact eclipsa con creces a Baskerville. Llama la atención y crea la posibilidad de que se ignore la primera parte del texto.

2. intente ceñirse a los tipos de letra estándar

Hay miles de fuentes disponibles a través de plataformas como Google Fonts, lo que te brinda interesantes oportunidades de probar algo nuevo y emocionante. Sin embargo, hay algo que puede salir mal: Las fuentes demasiado complicadas pueden distraer a los visitantes de tu sitio web. Para evitarlo, intenta ceñirte a las fuentes estándar a menos que haya una ocasión realmente especial que requiera fuentes personalizadas. Experimentar con fuentes es divertido, pero es importante recordar que el objetivo de una buena tipografía es conseguir que la gente lea el contenido.

3. utilizar un tipo de letra que se vea bien en diferentes dispositivos

La gente accede a su sitio web desde distintos dispositivos, desde teléfonos inteligentes y tabletas hasta ordenadores. Para que los lectores puedan acceder a su sitio web, opte por fuentes que se vean bien y sean legibles en distintas pantallas. Empiece por utilizar un tipo de letra que se vea bien en distintos tamaños. Un ejemplo es la fuente Roboto que se muestra en la siguiente imagen.

Evite las fuentes cursivas u ornamentadas. Quedan muy bien, pero al disminuir el tamaño se vuelven cada vez menos legibles, como ocurre con la fuente Comforter Brush que aparece a continuación.

Combinación de fuentes para su sitio web

Veamos ahora algunas combinaciones de fuentes que puede utilizar en su sitio web para conseguir un aspecto equilibrado y atractivo.

1º Lora & Merriweather

2. Roboto & Archivo Black

3ª Bebas New & Old Standard TT

Conclusión

Con estos consejos y conocimientos sobre tipografía para sitios web, ya tiene lo suficiente para empezar a experimentar. Juegue con la tipografía de su sitio web para encontrar combinaciones de fuentes y estilos que resulten atractivas y garanticen una buena experiencia a sus visitantes. Si dispone de recursos, organice una prueba de usuario para ver cómo reacciona la gente a sus elecciones tipográficas. O simplemente pida opinión a algunos amigos. Esto le dará una idea de la legibilidad de sus textos y de si consiguen el objetivo deseado.