logo
La tipografía es uno de los elementos más importantes de cualquier sitio y tiene un gran impacto en la marca y la experiencia.
Es tan fundamental que hacer cambios al por mayor en su tipografía (optar por una nueva fuente, cambiar la medida, aumentar el interlineado) es complejo y está plagado de posibles pérdidas 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.
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 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 computadoras 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 sea el texto, más margen de maniobra tendrá.
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. Apriete el espaciado de rumbo
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 en ejecución, los títulos 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, ajuste el espacio entre letras y palabras de los encabezados entre un 1 y un 5%.
3. Afloje 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 desea evitar que se formen palabras y permitir caracteres individuales.
Afloje 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. Utilice fuentes del sistema para las entradas
La privacidad es un gran problema para los usuarios. Todo lo que pueda hacer como diseñador para asegurar a los usuarios que sus datos están seguros aumentará la UX positiva de su sitio.
Diseñe sus entradas HTML para usar 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. Marque los párrafos una vez
Los párrafos de texto necesitan una indicación visual de que han comenzado. Hay tres formas en las 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. Utilice 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 puede implementar cursiva, negrita y minúscula genuinas, no las falsifique. Encuentre formas alternativas de crear énfasis, como cambiar de color.
7. Utilice las cotizaciones correctas
Los apóstrofos, las comillas simples y las 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 su 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. Escriba 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.
CSS le 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 debe dividir tres líneas consecutivas de texto, pero abordar esto requiere JavaScript. Puede minimizar este problema aumentando su medida.
Foto principal vía Unsplash
