Diseño Web

10  reglas de tipografía en diseño web que todo diseñador debe conocer

reglas-tipografía-diseño-web-1

Puedes incorporar muchos elementos en tu diseño web que creen engagement y mantengan la atención de tus visitantes. Estos elementos incluyen imágenes, videos e, incluso, sonido. Sin embargo, la parte más importante de casi cada página web es el contenido que los visitantes leen para llegar a la información que necesitan.

Si deseas que esa información sea fácil de leer, visualmente interesante y que el texto aporte al diseño general de una página web, tienes que comprender la tipografía. Ese es el arte de hacer que la palabra escrita sea tanto funcional como estéticamente atractiva.

Si deseas aprender a usar la tipografía a tu ventaja, pon atención a estas diez reglas que todo diseñador debe tener en mente.

1. Deja de usar LoremIpsum después del proceso de diseño inicial

Si el contenido es el rey, ¿por qué no se le considera en el proceso de diseño web? Al usar contenido falso como una marca de texto, los diseñadores web relegan el contenido como una tarea secundaria. Esa una una gran indicación de que las prioridades del diseño web son desastrosas. No es tan problemático en las primeras fases, por ejemplo, cuando creas varios bosquejos de diseño web. Sin embargo, una vez que hayas reducido las cosas, es importante trabajar con el contenido web real al crear el diseño web final. Esto asegura lo que se dice sobre una página web en particular a la que se da diseño y elementos visuales igual importancia.

Asimismo, tener texto real importa en términos de diseño y esquema. No debes estar en la posición de tener una página web totalmente diseñada solo para saber que no funciona con el contenido real. Por eso es muy importante obtener el texto real de tu cliente lo más pronto posible.

2. Haz que el texto sea Sans Serif

El texto Serif es absolutamente hermoso. Son fuentes excelente para usar en textos impresos y para aplicaciones impresas más grandes como encabezados, títulos y subencabezados. Desafortunadamente, las serif no funcionan bien cuando se trata de presentaciones más pequeñas de bloques de texto. Las serif que lucen bien a gran escala dificultan la lectura cuando se reduce la letra. Debido a esto, se aconseja dejar las serifs para textos grandes y usar las fuentes sans cuando la legibilidad puede ser un problema. Mejor aun, adopta una apariencia limpia, elegante y moderna y guarda los serifs para los medios impresos. De esta forma nunca tendrás que lidiar con la degradación de legibilidad en favor de usar una fuente que luzca bonita.

reglas-tipografía-diseño-web-2

3. Piensa en citas llamativas y otros símbolos a inicios de proceso de diseño

Es probable que hayas visitado una página web donde ciertos símbolos no se muestran bien. A veces son remplazados con una pregunta o una serie de personajes que lucen raros. Otra veces, simplemente no ves nada. Con frecuencia, esto sucede con citas elegantes. Este es el resultado de un texto creado en MS Word y luego trasladado a una página web.  Los elementos simplemente no se trasladan bien.

Para evitar este problema en tu diseño web final, tienes un par de opciones. En primer lugar, puedes modificar tu contenido para deshacerte de estos símbolos. Esto funciona si estás dispuesto a cambiar los símbolos en un lenguaje natural. También puedes usar HTML para asegurar que los símbolos se muestren apropiadamente en lugar de solo confiar en copiar y pegar. Sea lo que sea que decidas, asegúrate de probar la página web en todos los navegadores que puedas. Lo que puede solucionar un problema con símbolos en un navegador puede no ser efectivo en otro.

4. Es muy importante tener buenas habilidades CSS

Si has desarrollado buenas habilidades en CSS, tus visitantes pueden ser capaces de navegar en toda tu página web sin dificultad. Si crear unas hojas de estilo apropiadamente, puedes tener varias versiones de la misma página y seguir manteniendo una buena continuidad cuando se trata de tipografía. Por supuesto, no necesitas usar muchos trucos. Un buen CSS puede ayudarte a evitar problemas pequeños, pero comunes, como la alteración de fuentes y sus tamaños en diferentes secciones de tu página web.

¿Por qué tener una tipografía consistente es una necesidad? Usar CSS para mantener una tipografía consistente brinda a tu página web una apariencia profesional. También significa que no necesitas pensar en tu tipografía como tu diseño de cada sección web. Debes usar las hojas de estilo apropiadas. Si decides quebrar el diseño web en una sección en particular y hacer algo diferente con la tipografía para crear un efecto o llamar la atención hacia algo, resaltará más gracias al uso de CSS.

5. La  tipografía micro y macro importan

La microtipografía se relaciona con los detalles de la tipografía relacionados con la legibilidad. Por ejemplo, el espaciado es un problema relacionado con la microtipografía, al igual que es el escalado y contraste. Los ajustes que realizas para asegurarte que un bloque de texto es legible en cualquier dispositivo o navegador están relacionados con la microtipografía.

La microtipografía está relacionada con la forma que tus elecciones de tipografía encajan con tu diseño web general. Se trata de estética.

La buena tipografía considera la micro y macrotipografía. ¿Alguna vez has visitado una página web que usa una fuente elegante, personalizada que es casi imposible de leer? Eso es lo que sucede cuando se presta atención a la macrotipografía, pero no micro.

6. Conoce el contenido al igual que el diseño web

Como sabes, una buena página web tiene un flujo. Parte de esto es la legibilidad del contenido en la web. Ya mencionamos cómo un texto tonto no es sustituto de algo real cuando se pasa a la etapa final del diseño. El contenido es el rey. Una vez que el esté listo el diseño final, incluyendo el texto, están listo para leer la página web.

reglas-tipografía-diseño-web-3

Cuando lees el contenido después de que el diseño web esté listo, puedes determinar si existen problemas de espaciado. Estos problemas pueden hacer que el contenido se confuso o, inclusive, cambiar el significado del mismo. Solucionar estos problemas usando algunos trucos de tipografía pueden asegurar que tu producto final comunique exactamente lo que tú o tu cliente necesita.

7.  Conoce la importancia de la jerarquía

La jerarquía es el mapa que brindas a las personas que visitan tu página web. Puedes usar imágenes, videos, colores y, por supuesto, tipografía para crear dicha jerarquía.

Es cuestión de guiar al visitante desde la primera cosa que quieras que vea la siguiente y así sucesivamente. Con la tipografía puedes usar tamaños, cambios de fuente y espaciado para definir la jerarquía que deseas que tus usuarios sigan. De hecho, si tienes una página web que no esté convirtiendo, tal vez debas jugar un poco con la tipografía para ver si cualquier cambio que realices ayude a guiar a los visitantes hacia la llamada a la acción.

8. Sé creativo, pero cauteloso con los colores

La forma más fácil de asegurar que nunca tengas problemas de legibilidad debido a problemas con color de fuente y color de fondo es usar los colores más contrastantes que existan, negro y blanco, Desafortunadamente, eso puede crear un diseño web bastante aburrido.

reglas-tipografía-diseño-web-4

No temas usar colores. De hecho, no  temas usar combinaciones de color que no parezcan funcionar juntos. Algunas veces, apostar por una o dos tonalidades más claras u obscuras es todo lo que necesitas. Entonces, tu tipografía para de ilegible a perfectamente discernible y atractiva.

9. Texto centrado

Los problemas con textos centrados son numerosos. En primer lugar, puede hacer que tu página web luzca pobre. Además, casi siempre terminas con márgenes y texto que parecer ser un poema o letras de un álbum de rock. Aunque puede estar bien usar texto centrado para encabezados, es mejor evitarlo. Quédate con un texto ajustado y tus lectores encontrarán tu contenido mucho más fácil de leer.

10. Considera cómo tu texto luce cuando se agranda

Ya sea que usen su pulgar e índice o hagaen clic en el botón de acercamiento, las personas harán que tu texto sea grande. Algunas veces, hacen esto para compensar una pantalla pequeña. Otras veces, simplemente lo hacen porque les es difícil leer tu texto a una escala normal. Sería genial si todos fuesen capaces de ver tu texto como lo esperas, pero siempre es necesario algo de ayuda. Ten cuidado de no usar una fuente que baje de calidad al aumentar de tamaño.

Este artículo fue publicado originalmente en Instant Shift, en idioma inglés, y ha sido traducido y adaptado por Staff Digital, agencia digital en Lima, Perú. Nos encanta encontrar y compartir información de alta calidad de diversas fuentes. Si encuentras un artículo interesante en inglés sobre Diseño de Páginas Web o ecommerce, ponte en contacto con nosotros y uno de nuestros editores se encargará de traducirlo y publicarlo. Gracias por visitarnos!

Luiggi Santa María

Luiggi Santa María

CEO de Staff Digital. Experto en Diseño Web Gráfico y Publicitario.

Deja una respuesta