La tipografía es uno de los elementos más importantes de cualquier sitio web y tiene un impacto tangible en la marca y la experiencia. Por eso, te diremos cómo mejorar la tipografía de su sitio web en menos de 30 minutos.
Esto es tan fundamental, que realizar cambios masivos en su tipografía (elegir una nueva fuente, cambiar la medida, aumentar el interlineado) es difícil y puede llevar mucho tiempo.
Pero hay algunos cambios simples que puede hacer en su tipografía, que no romperán su cuadrícula y se pueden hacer en 30 minutos o menos. Aquí tienes ocho de los más fáciles.
Contenido del Articulo
1. Aumente el contraste de color
Al colocar texto, los diseñadores generalmente ven este texto como un bloque en el diseño visual.
La actitud de un diseñador hacia el texto es muy diferente a la de un usuario; el diseñador coloca el texto como una forma, el usuario lo lee línea por línea. En consecuencia, los diseñadores tienden a subestimar la cantidad de texto de contraste necesario.
El texto gris claro es estéticamente agradable pero funcionalmente inútil. El texto es legible 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 una gran cantidad de fuentes de luz ambiental. Cuanto más grande sea el texto, más libertad tendrá.
El contraste del texto debe probarse rigurosamente, pero como punto de partida, el texto de 18 píxeles sobre un fondo blanco nunca debe ser más claro #595959.
2. Ajuste el espaciado de los títulos
La inmensa mayoría de las fuentes están pensadas para ser utilizadas como cuerpo de texto: grandes bloques de texto continuo, que consta de varias líneas. Cuando se hizo la fuente, se asignó para este uso.
A diferencia del texto que se desplaza, los titulares son generalmente cortos y están rodeados de mucho espacio en blanco, especialmente en la parte superior e inferior. Los espacios adicionales completan visualmente el espacio negativo en forma de palabra y expanden las letras.
Para compensar, reduzca el espacio entre letras y palabras en los títulos entre un 1 y un 5%.
3. Afloje el espaciado de palabras
Cuando leemos, nuestro cerebro no deletrea palabras; reconoce formas de palabras e incluso grupos de palabras.
Gran parte de la micro-tipografía se encarga de no romper estas formas de palabras. Sin embargo, hay ocasiones en las que realmente debe evitar la formación de palabras y permitir caracteres individuales.
Afloje el espacio entre letras en cualquier texto que se lea como una secuencia de caracteres, como números de serie, códigos de seguimiento y datos tabulares.
4. Utilice fuentes del sistema para escribir
La privacidad es un gran problema para los usuarios. Todo lo que pueda hacer como diseñador para convencer a los usuarios de que sus datos están seguros, aumentará la UX positiva de su sitio web.
Configure sus archivos HTML de entrada para usar las fuentes del sistema: las fuentes predeterminadas instaladas por el sistema operativo con el que el usuario accede al sitio.
Esto crea una clara distinción entre los datos de marca, en fuentes de marca y los datos de usuario, en fuentes de usuario.
Este uso de fuentes del sistema hace que el usuario se sienta 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 del comienzo. Por lo general, esto se transmite de tres maneras: después del encabezado, con espacio vertical antes del párrafo o con sangría en la primera línea.
Cada párrafo debe usar uno de estos indicadores y solo uno. Debido a la naturaleza del contenido web y las ventajas de los encabezados para una visualización rápida del contenido, una combinación de encabezado seguido y espaciado vertical, es la mejor opción para la mayoría de los sitios.
6. Usa estilos originales
Por diversas razones, desde la accesibilidad de fuentes hasta optimizaciones agresivas, los sitios a menudo falsifican estilos alternativos con CSS.
La cursiva se puede falsificar como oblicua y sesgada, la negrita se puede falsificar utilizando la configuración predeterminada 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 al crear formas de palabras distorsionadas que interrumpen el flujo natural del texto.
Si no puede usar cursiva, negrita y mayúsculas reales, no las falsifique. Encuentre formas alternativas de crear un acento, como cambiar el color.
7. Utilice las comillas correctas
Los apóstrofos, las comillas simples y las comillas dobles son caracteres específicos. La mayoría de las fuentes tienen un glifo distinto a los métodos abreviados de teclado entre comillas simples o dobles.
Estas citas se denominan más comúnmente comillas “inteligentes” porque las aplicaciones de procesamiento de texto suelen tener la capacidad de elegir de forma inteligente qué glifos utilizan.
“Utilizar comillas correctas es una de las formas más sencillas de transmitir un texto sofisticado”.
8. Envuelve el texto correctamente
Un guión es un ajuste de palabra en dos líneas. Permite un texto de la mano derecha menos nítido, lo cual es vital en dispositivos móviles donde el ancho de página disponible es relativamente pequeño en comparación con un escritorio.
Sorprendentemente, la separación de sílabas tiene un soporte deficiente en Internet, pero está mejorando con el tiempo y se puede aplicar como una mejora progresiva.
CSS permite que la separación de palabras se establezca en Ninguno (sin guiones), Automático (el navegador se inserta automáticamente) y Manual (donde se especifica dónde aparecen los guiones mediante un guión suave).
Normalmente, se puede insertar un guión en cualquier palabra de cinco o más caracteres; debe haber al menos dos caracteres antes del guión y al menos tres después del guión.
Nunca debe ajustar tres líneas consecutivas de texto, pero se requiere JavaScript para resolver este problema. Puede minimizar este problema aumentando su tamaño.
