La tipografía es uno de los elementos más importantes de cualquier web y tiene un impacto considerable en la marca y la experiencia.
Tan fundamental es, que hacer cambios completos en su tipografía (optar por una nueva fuente, cambiar la medida, aumentar el interlineado) es complejo y está lleno de posibles sumideros de tiempo.
Pero hay algunos cambios simples que puede realizar en su tipografía que no romperán su cuadrícula y se pueden lograr en 30 minutos o menos. Aquí hay ocho de los más fáciles.
-
Aumentar el contraste de color
Al diseñar el 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 coloca 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 escritorio 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 es el texto, más margen de maniobra tienes.
El texto debe probarse minuciosamente para comprobar el contraste, pero como punto de partida, el texto de 18px sobre un fondo blanco nunca debe ser más claro que #595959.
-
Aprieta el espacio entre títulos
La gran mayoría de las tipografías están diseñadas para usarse como cuerpo de texto: grandes bloques de texto continuo, varias líneas de largo. Cuando se hizo la fuente, se esparció para este uso.
A diferencia del texto continuo, los encabezados tienden a ser cortos y están rodeados de más espacios en blanco, especialmente arriba y abajo. Los espacios en blanco adicionales inundan visualmente el espacio negativo en las formas de las palabras y separan las letras.
Para compensar, puedes reducir el espacio entre letras y entre palabras de los encabezados entre un 1% y un 5%.
-
Afloja el espacio entre 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ía de las tipografías se preocupan por no interrumpir esas formas de palabras. Sin embargo, hay momentos en los que se desea 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.
-
Usa fuentes del sistema para entradas
La privacidad es un gran problema para los usuarios. Cualquier cosa que puedas hacer como diseñador para asegurar a los usuarios que sus datos están seguros aumentará la UX positiva de tu sitio.
Diseña tus entradas HTML para usar fuentes del sistema: las fuentes predeterminadas establecidas por el sistema operativo con el que su 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.
-
Marca los párrafos una 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 uno solo. Debido a la naturaleza del contenido web y los beneficios que tienen los encabezados para escanear rápidamente el contenido de lectura, para la mayoría de los sitios, la mejor opción es una combinación de seguir un encabezado y espaciado vertical.
-
Usa estilos genuinos
Por varias razones que van desde la disponibilidad de fuentes hasta la optimización agresiva, es común que los sitios falsifiquen estilos alternativos usando CSS. Las cursivas se pueden falsificar como oblicuas con un sesgo, las negritas se pueden falsificar utilizando los valores predeterminados del navegador y las versalitas se pueden falsificar configurando el texto en mayúsculas y reduciendo el tamaño de 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 usar cursivas, negritas y minúsculas genuinas, no las falsifiques. Encuentra formas alternativas de crear énfasis, como cambiar los colores.
-
Usa las comillas correctas
Los apóstrofes, las comillas simples y dobles son caracteres específicos. La mayoría de las fuentes proporcionan un glifo para ellas que es distinto de la tecla rápida de comillas simples o dobles en su teclado.
Estas comillas se conocen comúnmente como comillas «inteligentes» porque las aplicaciones de procesamiento de textos generalmente tienen la opción de ser «inteligentes» con respecto a los glifos que usan.
Usar las comillas correctas es una de las formas más simples de entregar un texto refinado.
-
Divide el texto correctamente
La separación silábica es la división de una palabra en dos líneas. Permite un texto irregular a la derecha 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 apoyo sorprendentemente pobre para la partición correcta, pero está mejorando gradualmente y se puede aplicar como una mejora progresiva.
CSS te permite configurar la división de palabras en ninguno (sin guiones), automático (el navegador se inserta automáticamente) y manual (en el que especifica dónde deben aparecer los guiones usando 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 separar tres líneas consecutivas de texto, pero abordar esto requiere JavaScript. Puedes minimizar este problema aumentando su medida.
En Several somos expertos en diseño y desarrollo web, así que si quieres dejar este trabajo a un grupo de profesionales, contacta con nosotros. ¿Hablamos?
