La tipografía para todos hace que los textos sean mucho más fáciles de leer

Si usted, como propietario de una página, cree que no tiene que preocuparse por la tipografía, está equivocado. La legibilidad de sus textos también depende de la tipografía. Por eso, en el siguiente artículo, quiero cubrir esta tipografía para todos.

Naturalmente, la tipografía siempre ha sido uno de los elementos más importantes del diseño clásico. Al estudiar diseño gráfico o materias afines, la tipografía se convierte en parte de tu rutina diaria desde el primer semestre. Sin embargo, no quiero escribir ensayos teóricos a nivel académico.

Se trata más de transmitir el valor de la realización de los conceptos básicos tipográficos a los no diseñadores. Los siguientes consejos le permiten crear texto mucho más legible, lo que también resulta en una mejor capacidad de búsqueda en la red mundial empaquetada.

Comencemos con consejos para diseños cómodos, escritos por el diseñador de InVision. Luke Jones en Medium. Estos son tres pequeños cambios que se pueden aplicar a cualquier texto con poco esfuerzo. Después de la segunda o tercera vez, estos consejos se sentirán naturales, como si los hubiera usado siempre.

Consejo 1: la jerarquía tipográfica estructura el texto

Al escribir en la web con más o menos regularidad, sabrá que mantener una jerarquía de texto correcta es el factor principal para la búsqueda de su contenido en los motores de búsqueda. Solo por esa razón, probablemente ya esté prestando atención al etiquetado correcto.

Sin embargo, no solo los motores de búsqueda tienen más facilidad para trabajar con artículos bien estructurados. Los lectores también se benefician de una división lógica del contenido.

A menudo, basta con centrarse en los títulos de las etapas uno a tres (h1 – h3), el texto corrido correspondientemente más pequeño y las notas a pie de página aún más pequeñas. Para eso, hay un par de supuestos muy simples, que permiten una estructura limpia aplicable a cada texto.

El punto de partida para la observación es siempre el texto continuo, que es lo que escribimos en las etiquetas p en la web. Este texto es el índice, lo que significa que mantiene el tamaño de fuente del 100 por ciento. Todos los demás elementos se derivan de eso.

De acuerdo con esto, el primer paso es conseguir que el texto tenga un tamaño legible cómodamente. Mucho de esto es solo cuestión de gustos. Para mí, este valor es de 18 píxeles, no quiero que sea más bajo. Las publicaciones habituales tienen en su mayoría alrededor de 14 píxeles. Independientemente del tamaño que defina, es importante que sea la base de todos los demás elementos.

Los títulos (hl) deben tener del 180 al 200 por ciento del tamaño original, los títulos secundarios (h2) del 130 al 150 por ciento y los títulos terciarios (h3) solo deben ser un poco más grandes que el texto continuo. En muchos casos, verá h3 como un simple texto en negrita. Debería poder subir hasta el 125 por ciento sin problemas. Las notas a pie de página no deben exceder el 75 por ciento del tamaño del texto continuo.

De esta manera, los tamaños de los diferentes componentes del texto por sí solos nos permiten crear una jerarquía visual que proporciona orientación, haciendo que la experiencia de lectura sea más cómoda.

Consejo 2: Las alturas de línea generosas facilitan la lectura

Todos hemos estado sedientos en un desierto de texto seco más de una vez. La simple vista de una pila salvaje de letras permite que nuestra boca se seque de inmediato. Sin embargo, la salvación es tan simple: simplemente divida visiblemente las líneas individuales para que el flujo de lectura cobre vida. Incluso para eso, existen reglas básicas simples.

La distancia entre una línea y la anterior debe estar entre el 120 y el 160 por ciento del tamaño del texto original. La regla general de Jones es que una h minúscula en el tamaño original debe caber en el espacio sin tocar las puntas superior e inferior de las letras en las dos líneas. Las líneas claramente divididas hacen que las palabras sean más fáciles de concebir, lo que resulta en un proceso de lectura más rápido y agradable.

Lo mismo ocurre con la correcta ubicación de los espacios entre los párrafos. En el pasado, simplemente se hacía clic dos veces en la separación de sílabas, lo que generalmente resultaba en espacios demasiado grandes entre los párrafos. Por lo tanto, parece mejor usar el tamaño del texto básico para el espacio.

Consejo 3: no dejes que las líneas se alarguen demasiado

Los usuarios de pantallas grandes seguramente conocen los blogs que se configuraron de manera que el ancho del texto se ajusta al ancho de la pantalla del visitante. A esto se le llama diseño fluido, y es un medio válido de diseño, pero no así.

Buen ejemplo de un conjunto de columnas legibles, pero la falta de separación por sílabas tiene un efecto negativo; consulte el consejo 7. (Creador: Pawel Kadysz)

Las longitudes de línea de un máximo de 75 caracteres se consideran agradables de leer. Después de eso, debería haber una envoltura. Esto da como resultado el conjunto de varias columnas de los venerables medios de impresión. Por supuesto, también hay diferentes opiniones sobre este tema. Estás en algún lugar del amplio consenso si terminas tus líneas entre 40 y 80 caracteres.

Los diseños de una sola columna deben terminar sus líneas después de los 65, según el papa de tipografía Robert Bringhurst. También dijo que el ancho requerido para el texto se puede calcular tomando el tamaño de fuente planificado y multiplicándolo por 30. Por lo tanto, si toma mi tamaño de fuente preferido de 18 píxeles, obtendrá un valor de 540 píxeles para el columna de texto.

Consejo 4: use diferentes pesos de la misma fuente

Una vez que haya creado las estructuras básicas, aún puede realizar algunos de los otros consejos. Para organizar un texto de una manera más diferenciada que simplemente configurar el texto en negrita y otras opciones de formato, se recomienda utilizar diferentes versiones de la misma fuente.

A menudo, las fuentes se diseñan con un peso separado y se pueden usar así. Estas fuentes son mucho más atractivas que la versión creada por computadora de la fuente original utilizada.

También hay más variaciones de ellos. Si una fuente no ofrece ninguna alternativa, también podría considerar usar una fuente de la misma familia. Sin embargo, siempre debe cambiar partes del texto completo, en lugar de mezclarlo con el texto continuo o los encabezados.

No creo que tenga que explicar que este consejo funciona como una petición para usar fuentes web. No confíe más en las fuentes de sistema convencionales que encontrará en todas las computadoras. En su lugar, tome la rueda del diseño y use fuentes más interesantes, que son aún más fáciles de controlar en términos de su apariencia.

Debe comenzar en el umbral bajo de las fuentes de Google, que son muy fáciles de implementar en los sitios de WordPress. Recientemente, mi colega Denis Potschien les mostró sus imprescindibles para el año 2018 en este artículo.

Consejo 5: nunca use más de dos fuentes

Recuerdo que todos los elementos de una presentación solían volar sobre la pantalla, animados a través de Powerpoint, e incluso incluían efectos de sonido molestos en ocasiones. Todas las fuentes instaladas en la computadora se utilizaron de la manera más salvaje. A veces, se instalaron fuentes horribles deliberadamente. Los oculistas estaban en auge. Bueno, ahora puede que esté exagerando un poco …

Aunque todavía hay fuentes feas que nos hacen sangrar los ojos hoy en día, las cosas han mejorado. Ya ni siquiera tenemos que usar Powerpoint. Eche un vistazo a Ludus, por ejemplo. Recientemente lo presenté aquí.

No obstante, es un consejo que vale la pena considerar: nunca combine más de dos fuentes en una sola pieza de contenido. E incluso cuando combine estas dos fuentes, asegúrese de no utilizar conceptos de fuentes opuestos.

Para eso, FastPrint ha construido un infografia que trata de la combinabilidad de las fuentes más populares de la colección gratuita de Google. Echale un vistazo.

Consejo 6: encuentre alternativas a las fuentes aburridas de Microsoft

Si conoce a Calibri y Cooper de adentro hacia afuera, es hora de hacer algo al respecto. Los diseñadores de Plato Web Design se apresuran a ayudarlo y le brindan alternativas interesantes al material simple de Microsoft.

Siempre es bueno tener alternativas al aburrido suministro de Microsoft. (Fragmento: Platón Web Design)

Hay una descripción general de todo en este infografia.

Consejo 7: utilice la separación de sílabas automática

Con CSS3, el atributo guiones ha sido liberado. Se supone que los pasajes de texto con esta etiqueta, como las etiquetas de párrafo, conducen a la visualización de textos claramente divididos en el navegador del usuario. El marcado en sí es muy simple:

p { hyphens: auto; }

Desafortunadamente, la separación automática de palabras solo funciona en Firefox, Safari, IEll y Edge. Chrome no admite el atributo en macOS y Opera. Sin embargo, una columna dividida automáticamente puede verse tan hermosa, como se muestra en este ejemplo de Mediaevents.de, que pude capturar en una captura de pantalla usando Edge:

En la etiqueta HTML, para que los guiones funcionen correctamente, el inglés debe estar depositado como idioma del documento, así:

<html lang="en">

Si tiene la opción de establecer este atributo, definitivamente debería hacerlo. La legibilidad de sus textos (en los navegadores compatibles) se mejora significativamente.

Los desarrolladores web probablemente estén interesados ​​en esta solución de polyfill llamada Hyphenator.js.

Consejo 8: use espacios en blanco, imágenes y contraste

Estrictamente hablando, este no es un consejo sobre tipografía. Sin embargo, dado que afecta a la legibilidad de los textos, creo que debería mencionarlo aquí.

Con frecuencia encuentro textos en la web, donde puedo decir que es un artículo de calidad después de las primeras líneas, pero todavía no puedo leer hasta el final. Si no se puede rastrear a uno de los errores mencionados anteriormente cometidos por los operadores de la página, siempre es el resultado de la falta de imágenes, o debido al hecho de que el área de texto apenas se puede distinguir de los elementos circundantes. .

Por eso, les pido que integren imágenes en su texto. Aflojan el flujo de lectura y, si se eligen inteligentemente, incluso contribuyen a una mejor comprensión del texto. Además, proporcione una cantidad adecuada de espacio en blanco, que es el espacio que no está cubierto por texto u otros elementos. Esto facilita que los ojos del lector sigan el flujo del texto, en lugar de tener que luchar contra las distracciones.

Mucho espacio en blanco, incluso si es rosa en algunos casos, pocos elementos, muy legible en general. (Diseño: Tubik)

Además, asegúrese de agregar siempre un contraste claro entre el texto y el fondo. Hay una razón por la que los libros se imprimen con texto negro sobre papel blanco. Este contraste se considera óptimo. Experimentos muy audaces en ese sentido probablemente resultarán en la pérdida de parte de sus lectores.

La tipografía es más que la distancia entre líneas y los tipos de fuentes

Esto debería ser suficiente por hoy. Por supuesto, estos consejos son simplemente la punta del iceberg. Por lo tanto, si presta atención a todos los consejos de este artículo, todavía no es un experto. Sin embargo, ya está proporcionando mucho más a sus lectores que muchos otros escritores u operadores de páginas. Esto no solo es importante en el comercio electrónico, donde ayuda a las decisiones de compra, haciéndolo relevante para la facturación. Un blog legible de autónomos también será mucho más popular. En cualquier caso, se está diferenciando de la competencia.

Como ves, solo hay ventajas. ¿Entonces, Qué esperas?

Fuentes relacionadas:

• 10 trucos de tipografía para hacer su texto mucho más legible | Mercado creativo
• Mejores paquetes de fuentes
• 3 consejos de tipografía para una lectura más cómoda | Luke Jones, mediano
• 8 consejos sencillos de tipografía para sus diseños | Revista Smashing
• 20 errores tipográficos que todo principiante comete y cómo evitarlos | Canva

(El artículo fue escrito originalmente en alemán por nuestro autor Dieter Petereit para nuestra revista hermana Dr. Web).