Nada es más importante que la legibilidad cuando se trata del texto en su sitio web.

Absolutamente nada.

Si no puedes leer las palabras, entonces, ¿qué bien estás haciendo? ¿Quién recibe tu mensaje?

Tan importante como las palabras en sí es el diseño del texto, desde las fuentes hasta la separación silábica, y cómo está todo organizado en la pantalla. Parte del diseño incluye las palabras mismas, la forma en que se componen las "palabras grandes" en su sitio también puede marcar la diferencia.

Selección de fuente

Hay tantas fuentes para elegir. Puede ser bastante abrumador

No lo dejes ser. Lo mejor que puede hacer cuando se trata de legibilidad es mantenerlo simple.

Seleccione uno o dos tipos de letra para su sitio. Un buen lugar para comenzar es con una fuente para la copia del cuerpo principal y otra para las palabras grandes, como encabezados, pancartas y texto de salida. Usar una fuente diferente para cada elemento distrae, confunde y es difícil de leer.

Comience con una fuente sans serif para la copia del cuerpo principal. Sans serifs son los más fáciles de usar cuando se trata de leer la pantalla y tienden a funcionar bien incluso en tamaños más pequeños. Las fuentes Serif pueden comenzar a "ejecutar juntas" o perder sus serif según el tamaño de la fuente, la resolución de pantalla e incluso el contraste de color entre el texto y el fondo.

Typecast

Tenga en cuenta que la copia de su cuerpo será lo más leído en el sitio y debe ser fácil de digerir en la computadora, tableta o pantallas de dispositivos móviles. Está bien usar diferentes estilos de este tipo de letra dentro de la copia, pero no te vuelvas loco. Las negritas y las cursivas son excelentes para los puntos de énfasis, pero los grandes bloques de estos estilos pueden ser difíciles de leer.

Si necesita ayuda para seleccionar un tipo de letra, intente emparejar fuentes con herramientas en línea, como Google Web Fonts o Typecast.

Google webfonts

Separación

La separación silábica es mala. Es feo Es ineficaz y confuso. (Y estos problemas aumentan en todas las plataformas).

Hyphenation

Mantente alejado de eso.

En caso de que necesite un repaso, la separación silábica ocurre cuando una palabra se divide al final de una línea, lo que hace que parte de una palabra aparezca al final de una línea y que el resto de la palabra aparezca al comienzo de la siguiente. El uso de la separación silábica ha pasado bastante de moda en lo que respecta al diseño web, pero todavía se lo ve de vez en cuando. (Se usa regularmente en publicaciones impresas, como periódicos).

La idea detrás del uso de guiones era permitir que el texto se espaciara correctamente (y de manera uniforme) entre líneas. Al trabajar con texto justificado, puede encontrar problemas de espaciado extraño cuando se quita la separación silábica.

Pero los guiones que rompen las palabras pueden dificultar la lectura del texto. Leer un guión puede hacer que una persona tropiece o malinterprete una palabra. El uso de guiones también puede cambiar inadvertidamente el énfasis de ciertas palabras o su impacto en el resto de la copia. Inconscientemente, un guión le dice a un lector que la palabra es un poco menos importante que otras palabras que se representan completamente.

Reserve guiones solo para las palabras que los necesitan, como con modificadores, y no para dividir líneas. El texto se verá más limpio y más profesional, y tendrá una mayor legibilidad sin todos esos guiones molestos al final de las líneas.

Bad Racket

Justificación

Al igual que la separación silábica, la justificación completa ha desaparecido de la moda del diseño web, aunque todavía se usa comúnmente en forma impresa.

Justification

Escriba usando el ajuste completo que llena cada línea completamente desde un margen izquierdo al derecho, de modo que cada línea tenga el mismo ancho. El uso de una justificación completa crea (y cierra) espacios entre palabras para que el espaciado no se distribuya uniformemente. El uso de este tipo de alineación de texto puede funcionar para algunos sitios web, pero no siempre es la opción más visualmente atractiva. Observe cómo se rompe su texto e intente leerlo varias veces para evaluar si la justificación completa es una opción viable.

También hay otros tipos de "justificación" o alineación de texto. Puede establecer texto para que se alinee en el margen izquierdo, en el margen derecho o en el centro.

Para los sitios web en inglés, la justificación a la izquierda es la práctica más común. El texto se alinea con el margen izquierdo y tiene un borde derecho irregular. La sensación es amigable y fácil de leer. Debido a que esta técnica es tan común, muchos lectores ni siquiera notarán cómo se configura el texto. Esta es su mejor opción para trabajar con grandes bloques de texto.

Nanozoom

La alineación a la derecha es otra opción, pero no funciona tan bien para fragmentos de texto. Con el texto alineado al margen derecho y desigual a la izquierda, los puntos de inicio y parada se ubican torpemente en la pantalla. El orden natural de lectura se invierte y la sola idea de leer un texto de esta manera (especialmente en grandes cantidades) puede hacer que el lector se sienta incómodo. Reserve texto alineado a la derecha para pequeños brotes si desea incorporarlo a su esquema de diseño.

The paper mill

El texto centrado es una herramienta bastante popular, aunque no se recomienda para bloques de texto grandes. (De acuerdo, lo encontrará utilizado de esta manera en toda la web). Los inconvenientes de la alineación central son muy similares a los asociados con el texto alineado a la derecha: no tiene inicios y paradas "naturales" y puede sentirse incómodo en la página. El texto centrado en el centro puede parecer algo formal (porque a menudo se usa para elementos como invitaciones) y debe reservarse para pequeños fragmentos de texto donde el énfasis es importante. No es una buena opción para bloques de copia grandes.

Otros tipos de efectos

Trazos o contornos

Use con moderación en elementos de texto más grandes como un punto de énfasis, pero evite en texto pequeño.

Tachado o subrayado

Ambos son de uso común: tachado como notación de que algo ya no es válido y subrayando para enfatizar. Sigue usando estas herramientas, pero úsalos con moderación. Ambos funcionan para pequeños trozos de texto, pero causan problemas de legibilidad tremenda cuando abarca más de unas pocas palabras.

53

Inclinación o distorsiones

Estos efectos son excelentes cuando usa tipografía como forma de arte. No son tan efectivos cuando tratas de transmitir un mensaje. Debe evitar manipulaciones de texto y distorsiones en la copia del cuerpo principal.

Color

hip2save

El uso del color puede ser una gran herramienta para dar énfasis a una sola palabra en un bloque de texto. (Las combinaciones de colores más habituales y visualmente atractivas para bloques de texto son negro o gris oscuro sobre blanco o blanco sobre fondo oscuro). Intente que los colores queden en claro contraste con el fondo para que sean fáciles de ver y leer. Los colores súper brillantes (como el amarillo o el fucsia) pueden ser difíciles de leer a menos que se utilicen con una tipografía grande y gruesa. Considere el tipo de negrita con el color para un énfasis adicional, pero reserve esta técnica para un número limitado de palabras.

Mantener limpio el texto grande

Aunque la separación silábica puede considerarse una cuestión de preferencia en la copia corporal, siempre debe evitarse en letra grande. Los estilos de justificación simple son imprescindibles; el texto a la izquierda o centrado en el centro son sus mejores opciones.

Los encabezados, pancartas, divisiones y otros tipos grandes o muebles deben ser de fácil lectura. Estas palabras no solo se utilizan para la navegación, sino que también deben leerse para que las personas sigan avanzando en el contenido de su sitio web.

Los guiones son obstáculos.

La alineación impar no ayudará a la navegación.

También hay algunas otras cosas en las que pensar cuando se traza el diseño para su gran tipo.

Piense en el tamaño del tipo en proporción a la copia del cuerpo principal. Los titulares y encabezados que son significativamente más grandes y audaces hablarán en voz alta a los lectores, mientras que los muebles más pequeños y delgados susurrarán.

Dewey's Pizza

El contraste es de suma importancia para las palabras grandes. Al elegir fuentes, elija algo para muebles que no sea muy similar a la copia del cuerpo. Considere una fuente serif, teniendo en cuenta que las serifas funcionan mejor en tamaños grandes para que las terminales y los detalles de cada letra no se pierdan en los píxeles. Otra opción es elegir el color para establecer un estilo y jerarquía distintos para los muebles.

Ethical Studios

Piensa en el espacio alrededor de las palabras grandes también. Asegúrese de que las palabras grandes descansen cerca de la copia que describen. Agregue espacio extra por encima de cada encabezado o título y condense el espacio entre él y la copia.

Escribir para caber

Finalmente, piensa en el ajuste.

Mira cómo se alinea el texto una vez que hayas escrito la copia para las palabras grandes. ¿Llena la línea? ¿Cuántas líneas?

Visualmente desea ir a los encabezados que tienen un aspecto consistente. Esto se aplica tanto al estilo de letra como a la longitud de las palabras. Evite los artículos que llenan una línea por completo y solo una fracción de la línea siguiente. Piense en los muebles en términos de pequeños rectángulos; quieres que todo encaje dentro del marco sin espacios blancos.

modernerd

Cree un estilo para las palabras grandes, ya sea un encabezado simple que contenga solo unas pocas palabras o pensamientos completos de dos líneas sobre cada sección de texto. Considera que parte de este estilo es el tipo de título que usas: ¿hará una pregunta, será una declaración de hechos, les dirá a los lectores qué hacer, mostrará cómo hacer algo o será más indirecta y amable con las palabras y el fraseo?

Intente escribir encabezados y titulares que tengan solo una línea de longitud (dos como máximo), use palabras activas.

Crafting Type

Esto puede ser difícil de lograr y desconfiar de los trucos. No agarres un diccionario de sinónimos y sustituye una palabra grande por una corta para que todo encaje. (Correrás el riesgo de usar la palabra incorrecta o usar un término que tus lectores puedan desconocer el significado). Piensa conversacionalmente cuando escribas. Componga las palabras y luego modifique (corte o agregue) para que mantenga la integridad de lo que desea expresar y produzca una copia limpia y fácil de leer.

Conclusión

La copia limpia es más que simples tipos de letra y guiones. Se trata de escribir una copia que tenga sentido y presentarla de manera legible.

Piensa en tu público cuando lo organices todo. Utilizaría una técnica y un estilo diferentes al escribir publicaciones de blog sobre ideas de bodas (sentimiento femenino tradicional) frente a blogs sobre tatuajes (probablemente más tensos y oscuros). Su audiencia tiene un impacto en las imágenes, también deberían afectar su copia.

Pero lo más importante, piense en cómo todo se une. Quite todo lo demás del diseño de su sitio, dejando solo el tipo detrás. Es fácil de leer? ¿Tienes que acercar o alejar? ¿Estás entrecerrando los ojos en la pantalla? Estas son las verdaderas preguntas que debe responder porque, al final del día, lo más importante es la legibilidad.

¿Qué texto encuentras difícil de leer en línea? ¿Qué técnicas usas para mantener tu texto legible? Háganos saber en los comentarios.

Imagen / miniatura destacada, imagen de texto a través de Shutterstock.