10 reglas de tipografía web que todo diseñador debe saber
Puede incorporar muchos elementos en su diseño web que crearán compromiso y mantendrán la atención de sus visitantes. Estos incluyen imágenes, videos e incluso sonido. Sin embargo, la parte más importante de casi todos los sitios web es el contenido que los visitantes leen para obtener la información que leen.
Si desea que esa información sea más fácil de leer, visualmente interesante y que ese texto se agregue al diseño general de un sitio web, debe comprender la tipografía. Este es el arte y la habilidad de hacer que la palabra escrita sea tanto funcional como estéticamente agradable.
Si quieres aprender a usar la tipografía a tu favor, consulta estas 10 reglas que todo diseñador debe tener en cuenta.
1 Deje de usar LoremIpsum después del proceso de diseño inicial
Si el contenido es el rey, ¿por qué no se le da una consideración seria en el proceso de diseño web? Al utilizar contenido falso como marcador de posición, los diseñadores web relegan el contenido a un papel secundario. Esta es una gran indicación de que las prioridades de diseño están fuera de control. No es tan problemático en las primeras etapas, por ejemplo, cuando está simulando una variedad de diseños de página. Sin embargo, una vez que haya reducido las cosas, es importante trabajar con contenido web real al crear el diseño final. Esto asegura que lo que se dice en una página web en particular tenga tanta importancia como el diseño y los elementos visuales.
Además de esto, tener texto real es importante en términos de diseño y diseño. No desea estar en la posición de haber diseñado completamente una página web, solo para descubrir que no funciona con el contenido real. Es por eso que es extremadamente importante obtener el texto real de su cliente del escritor de contenido lo antes posible.
2 Hacer texto Sans Serif
El texto Serif es absolutamente hermoso. Estas son excelentes fuentes para imprimir y para aplicaciones de impresión más grandes, como encabezados, títulos y subtítulos. Desafortunadamente, en la pantalla, las gracias no se escalan bien cuando se trata de pantallas de contenido más pequeñas, como bloques de texto. Las gracias que se ven bien en un tamaño más grande, hacen que el texto sea difícil de leer cuando la fuente se vuelve más pequeña. Debido a esto, es recomendable guardar serifas para texto grande y confiar en sans cuando la legibilidad pueda ser un problema. Mejor aún, adopte el aspecto limpio, elegante y moderno de las fuentes sans y guarde las serifas para la imprenta. De esta manera, nunca tendrá que lidiar con la degradación de la legibilidad a favor de usar una fuente que se vea bonita.
3 Piense en las comillas tipográficas y otros símbolos al principio del proceso de diseño
Lo más probable es que haya visitado un sitio web donde ciertos símbolos no se mostrarían correctamente. A veces se reemplazan con una pregunta o una serie de caracteres de aspecto extraño. Otras veces, simplemente no están allí. Esto sucede con frecuencia con comillas tipográficas o "rizadas". A menudo, esto es el resultado de la creación de texto en MS Word u otro paquete y luego transferido a una página web. Las cosas simplemente no se traducen como se desea. También es común para el euro. símbolo, caracteres de doble byte y otros símbolos tomados de contenido extranjero.
Para evitar este problema en tu diseño final, tienes un par de opciones. Primero, puede modificar su contenido para deshacerse de estos símbolos. Esto funciona si está dispuesto a cambiar los símbolos a lenguaje natural. También puede usar HTML para asegurarse de que los símbolos se muestren correctamente en lugar de simplemente copiar y pegar. Independientemente de lo que decida, asegúrese de probar la página web en todos los navegadores que pueda. Lo que podría resolver un problema con los símbolos en un navegador podría no ser efectivo en otro.
4 Las habilidades avanzadas de CSS son extremadamente importantes
Si ha desarrollado buenas habilidades de CSS, sus visitantes deberían poder navegar por las páginas de su sitio web de una manera absolutamente fluida. Si crea sus hojas de estilo correctamente, incluso puede tener varias versiones de la misma página y al mismo tiempo mantener una gran continuidad en lo que respecta a la tipografía. Por supuesto, no es necesario utilizar un montón de trucos. Un buen CSS puede ayudarlo a evitar problemas pequeños pero comunes, como que los tipos de letra y el tamaño de fuente se alteren de una página a la siguiente.
¿Por qué la tipografía consistente es una necesidad? El uso de CSS para mantener una tipografía consistente le da a su sitio web un aspecto profesional y nítido. También significa que no necesita pensar en la tipografía al diseñar cada página. En su lugar, solo usa la hoja de estilo apropiada. Si decides, en una página en particular, que vas a romper la norma y hacer algo diferente con la tipografía para crear un efecto o llamar la atención sobre algo, se destacará más gracias a tu uso de CSS.
5 Tanto la tipografía micro como la macro son importantes
La microtipografía se relaciona con los detalles de la tipografía relacionados con la legibilidad. Por ejemplo, el espaciado es una preocupación relacionada con la microtipografía, al igual que la escala y el contraste. Los ajustes que realiza para asegurarse de que un bloque de texto se pueda leer en cualquier dispositivo o navegador están todos relacionados con la microtipografía.
La macro-tipografía se relaciona con la forma en que sus elecciones con respecto a la tipografía se relacionan con su diseño general. Se relaciona con la estética.
Una buena tipografía tiene en cuenta tanto la micro como la macro tipografía. ¿Alguna vez ha visitado un sitio web que usaba una fuente personalizada de aspecto realmente elegante que también era casi imposible de leer? Eso es lo que sucede cuando se presta atención a la macrotipografía, pero no a la microtipografía.
6 Conozca tanto el contenido como el diseño
Como sabes, un buen sitio web tiene flujo. Parte de esto es la legibilidad del contenido que está en la página. Ya hemos discutido cómo esto se ve afectado por cosas como serifas, y hemos discutido cómo el texto ficticio no sustituye al texto real cuando se trata de las últimas fases del diseño. Aún no hemos terminado. El contenido realmente es el rey. Una vez que el diseño final, incluido el contenido, está listo, debe leer la página web.
Cuando lea el contenido después de que haya terminado su diseño, puede determinar si hay o no problemas de espacio o salto de línea. Estos pueden hacer que el contenido sea confuso o incluso cambiar involuntariamente el significado del contenido. La solución de estos problemas mediante el uso de algunos trucos tipográficos puede garantizar que su producto final comunique exactamente lo que usted o su cliente pretenden.
7 Comprender la importancia de la jerarquía
La jerarquía es la hoja de ruta que le das a las personas que visitan tu sitio web. Puede usar imágenes, video, color y (por supuesto) tipografía para crear esa jerarquía.
Simplemente se trata de guiar al visitante desde lo primero que quieres que vea hasta lo siguiente, y así sucesivamente. Con la tipografía, puede usar el tamaño, los cambios en la fuente y el espaciado para ayudar a definir la jerarquía que desea que sigan los usuarios. De hecho, si tiene una página que no se está convirtiendo, es posible que desee experimentar con la tipografía para ver si los cambios que realice ayudarán a guiar a los visitantes al botón de llamada a la acción.
8 Sea creativo pero cauteloso con el color
La forma más fácil de asegurarse de que nunca tendrá problemas de legibilidad debido a problemas con el color de la fuente y el color de fondo es usar los colores de mayor contraste que existen, blanco y negro. Desafortunadamente, eso puede generar un diseño bastante aburrido.
No tengas miedo de usar colores. De hecho, no tengas miedo de usar combinaciones de colores que no parezcan funcionar. A veces, todo lo que necesita hacer es simplemente ir uno o dos tonos más claros o más oscuros. Luego, su tipografía pasa de ser ilegible a perfectamente perceptible y con un aspecto realmente genial.
9 Zanjar texto centrado
Los problemas con el texto centrado son numerosos. En primer lugar, puede hacer que sus páginas web se parezcan a volantes mal diseñados. Además de esto, casi siempre terminas con márgenes extraños y texto que parece como si estuviera destinado a ser un poema o notas de un viejo álbum de rock. Si bien puede estar bien usar texto centrado para los títulos, por lo general es mejor evitarlo por completo. Quédate con el texto ajustado a la izquierda y tus lectores encontrarán que tu contenido es mucho más fácil de leer.
10 Considere cómo se ve su texto ampliado
Ya sea que usen el pulgar y el índice o hagan clic en el botón de zoom, la gente hará que tu texto sea más grande. A veces, hacen esto para compensar una pantalla más pequeña. Otras veces, simplemente lo hacen porque les resulta difícil leer el texto en el tamaño normal.
Sería genial si todos pudieran ver su texto como se pretende, pero como los boomers a menudo necesitan ayuda adicional para ver el texto, eso simplemente no es posible. Tenga cuidado de no utilizar un tipo de letra que se degrade si se amplía.
Herramientas y recursos útiles
Aquí hay algunas herramientas y recursos útiles para ayudarlo a hacer más con la tipografía:
- FontFace Ninja: esta utilidad te ayuda a identificar las fuentes que encuentras en Internet. Esta es una gran herramienta para tener cuando te encuentras con una fuente que realmente te llama la atención. Este complemento de Chrome lo ayudará a identificar, encontrar y comprar cualquier fuente disponible comercialmente que vea en cualquier sitio web.
- TypePlate: este es un marco de tipografía completo que es perfecto para diseñadores web. TypePlate puede manejar mayúsculas, comillas en bloque, escalado, colores y una variedad de otros desafíos relacionados con la tipografía.
- Escala modular: esta es una escala que le permite determinar la fuente y el tamaño de fuente ideales. También te ayuda a crear un equilibrio entre el tamaño de la fuente de tus títulos y encabezados y la fuente que seleccionas para tu texto.
- TIFF: esta herramienta le permite mostrar dos fuentes diferentes. Luego, muestra las diferencias entre cada una de las dos fuentes para usted. Incluso te permite comparar diferentes letras y números de una fuente a otra.
- TypeWolf: use este sitio web para obtener su solución de algunas de las fuentes más geniales y el uso más inspirador de la tipografía en Internet. Esta es una excelente fuente de inspiración, así como de información.
- Por qué importan las fuentes, Sarah Hyndman: Este es un libro excelente que explora la importancia de las fuentes y las formas en que la tipografía puede influir en el estado de ánimo. Es un gran libro para las personas apasionadas por la tipografía, pero también para las personas que necesitan ser convencidas de la importancia de elegir el tipo correcto de trabajo.
Conclusión
Con suerte, este artículo influirá en los diseñadores web para que piensen un poco más en la tipografía y también para encontrar formas de usar la tipografía de manera más efectiva y creativa en sus diseños.