8 Formas de mejorar el texto de tus webs

Los textos son uno de los elementos más importantes de cualquier sitio web y tiene un impacto considerable en la marca y la experiencia.

Es tan fundamental que realizar cambios al por mayor en tu tipografía (optar por una nueva fuente, cambiar la medida, aumentar el tamaño) es complejo y está plagado de posibles pérdidas de tiempo.

Pero hay algunos cambios simples que puedes realizar en tu tipografía que no romperán tu esquema y se pueden lograr en 30 minutos o menos. Aquí hay ocho de los más fáciles.

1. Aumente el contraste de color

Al diseñar texto, es común que los diseñadores vean el texto como un bloque dentro de un diseño visual. La relación de un diseñador con el texto es muy diferente a la de un usuario; un diseñador posiciona el texto como una forma, un usuario lo lee línea por línea. En consecuencia, los diseñadores tienden a subestimar la cantidad de contraste que requiere el texto.

El texto gris claro es estéticamente hermoso pero funcionalmente inútil. El texto está destinado a ser leído y debe cumplir con los estándares WCAG AA en ordenadores de sobremesa y los estándares WCAG AAA en dispositivos móviles, o en cualquier situación con muchas fuentes de luz ambiental. Cuanto más grande sea el texto, más margen de maniobra tendrás.

El texto debe probarse minuciosamente para determinar el contraste, pero como punto de partida, el texto de 18 píxeles sobre un fondo blanco nunca debe ser más claro que #595959.

2. Aprieta el espaciado de los títulos

La gran mayoría de los tipos de letra están diseñados para usarse como texto del cuerpo: grandes bloques de texto continuo, de varias líneas. Cuando se hizo la fuente, se espació para este uso.

A diferencia del texto de cuerpo, los encabezados tienden a ser cortos y están rodeados por más espacios en blanco, especialmente arriba y abajo. El espacio en blanco adicional inunda visualmente el espacio negativo en las formas de las palabras y separa las letras.

Para compensar, ajusta el espacio entre letras y palabras de los encabezados en un 1–5%.

3. Afloja el espaciado sin palabras

Cuando leemos, nuestro cerebro no deletrea las palabras letra por letra; reconoce formas de palabras e incluso formas de grupos de palabras.

La mayor parte de la micro-tipografía se preocupa por no alterar esas formas de palabras. Sin embargo, hay ocasiones en las que quieres evitar que se formen palabras y permitir caracteres individuales.

Afloja el espacio entre letras en cualquier texto destinado a leerse como una serie de caracteres, como números de serie, códigos de seguimiento y datos tabulares.

4. Utiliza fuentes predeterminadas para los datos

La privacidad es un gran problema para los usuarios. Todo lo que puedas hacer como diseñador para asegurar a los usuarios que sus datos están seguros aumentará la UX positiva de su sitio.

Diseña tus entradas HTML para utilizar fuentes del sistema: las fuentes predeterminadas establecidas por el sistema operativo con el que el usuario accede al sitio. Esto crea una delimitación clara entre los datos de la marca en las fuentes de la marca y los datos del usuario en las fuentes del usuario.

El uso de fuentes del sistema de esta manera alienta al usuario a sentirse dueño de sus datos, genera confianza y aumenta las conversiones.

5. Marca los párrafos una única vez

Los párrafos de texto necesitan una indicación visual de que han comenzado. Hay tres formas en que esto se transmite normalmente: siguiendo un encabezado, con un espacio vertical antes del párrafo, o sangrando la primera línea.

Cada párrafo debe utilizar uno de estos indicadores y solo uno. Debido a la naturaleza del contenido web y los beneficios que tienen los encabezados para escanear y leer rápidamente el contenido, para la mayoría de los sitios, la mejor opción es una combinación de seguir un encabezado y espaciado vertical.

6. Utiliza estilos genuinos

Por varias razones que van desde la disponibilidad de fuentes hasta una optimización agresiva, es común que los sitios falsifiquen estilos alternativos usando CSS. Las cursivas se pueden falsificar como oblicuas con un sesgo, los pesos en negrita se pueden falsificar utilizando los valores predeterminados del navegador y las minúsculas se pueden falsificar estableciendo el texto en mayúsculas y reduciendo el tamaño de la fuente.

Estos trucos hacen más daño que bien, creando formas de palabras distorsionadas que interrumpen el flujo natural del texto.

Si no puedes implementar cursiva, negrita y minúsculas genuinas, no las falsifiques. Encuentra formas alternativas de crear énfasis, como cambiar de color.

7. Utiliza los signos correctos

Los apóstrofes, las comillas simples y dobles son caracteres específicos. La mayoría de las fuentes les proporcionan un glifo que es distinto de la tecla rápida de comillas simples o dobles de tu teclado.

Estas comillas se denominan más comúnmente comillas «inteligentes» porque las aplicaciones de procesamiento de texto suelen tener la opción de ser «inteligentes» sobre los glifos que utilizan.

Usar las citas correctas es una de las formas más sencillas de entregar un texto refinado.

8. Escribe correctamente el texto con guiones

La división de palabras es la división de una palabra en dos líneas. Permite un texto de derecha irregular menos extremo y es vital en dispositivos móviles donde el ancho de página disponible es relativamente pequeño en comparación con el escritorio.

La web tiene un soporte sorprendentemente pobre para la separación de palabras correcta, pero está mejorando gradualmente y se puede aplicar como una mejora progresiva.

El CSS te permite establecer la separación de sílabas en ninguno (sin guiones), automático (el navegador se inserta automáticamente) y manual (en el que especifica dónde deben aparecer los guiones utilizando el carácter de guión suave).

Tipográficamente, se puede insertar un guión en cualquier palabra que tenga cinco caracteres o más; debe haber al menos dos caracteres antes del guión y al menos tres después del guión.

Nunca debes dividir tres líneas consecutivas de texto, pero abordar esto requiere JavaScript. Puedes minimizar este problema aumentando su medida.