La tipografía es un aspecto esencial del diseño de su sitio web. Elegir un estilo de fuente es fácil, con la mayoría constructores de sitios modernos, cambiar un estilo de fuente está a solo tres clics de distancia. Sin embargo, elegir el estilo de fuente *correcto* para un sitio web nunca es una tarea fácil. Un sitio web con la tipografía correcta da una impresión profesional y permite que sus visitantes lean fácilmente.
En este artículo, exploraremos los diferentes elementos de la tipografía y compartiremos consejos para elegir la tipografía adecuada para su sitio web.
¿Qué es la tipografía?
La tipografía es el arte y la técnica de organizar los tipos para hacer que el lenguaje escrito sea legible, legible y atractivo cuando se muestre.
Algunos elementos esenciales de la tipografía con los que debe estar familiarizado antes de profundizar incluyen:
Tipo de letra y fuente
Una tipografía es el diseño de un conjunto particular de caracteres. Por ejemplo, Times New Roman, Arial o Helvetica son algunos tipos de letra comunes que probablemente haya encontrado en el pasado.
La fuente es el peso, el ancho y el estilo específicos de un tipo de letra, por ejemplo: Arial Bold o Times New Roman Italic.
Tamaño de la fuente
El tamaño de una fuente se mide en puntos. En el diseño web, el tamaño de fuente se mide en píxeles (px), ems (em), rems (rem) y porcentajes (%). Los píxeles (px) es una unidad de medida absoluta que define el tamaño de la fuente en un número fijo de píxeles. Ems (em), Rems (rem) y Porcentajes (%), por otro lado, son unidades de medida relativas que se basan en diferentes elementos en una página web. El tamaño de letra adecuado depende del tamaño de la pantalla y de la distancia entre los lectores y la pantalla.
En general, se recomiendan 16 px a 20 px para escritorio y 14 px a 18 px para dispositivos móviles. La fuente de este sitio que está leyendo tiene un tamaño de 18 px para pantallas de escritorio y móviles.
El interlineado
El interlineado es la cantidad de espacio vertical entre líneas de texto, también conocido como interlineado.
Jerarquía
La jerarquía tipográfica se refiere a la disposición de los diferentes niveles de texto en una página. La mayoría de los diseñadores web dividen el contenido en secciones por tema y utilizan la jerarquía tipográfica para que el contenido sea fácil de navegar y digerir.
Por ejemplo, esta publicación de blog comienza con el texto del título (también conocido como Título 1 o H1), seguido de diferentes títulos de sección (H2) y subtítulos (H3, H4, negrita), texto del cuerpo (los bloques de contenido que está leyendo ahora ), y subtexto (las letras pequeñas que aparecen en la sección de pie de página).
Mediante el uso de diferentes niveles de encabezados, subtítulos, tamaños de fuente, grosores de fuente, colores y espacios en blanco, puede crear una jerarquía visual clara que guíe la atención del usuario hacia su información más importante y facilite el escaneo y la digestión del contenido.
Consejos de tipografía para principiantes
Ahora que hemos aclarado los conceptos básicos, veamos algunos consejos prácticos que puede aplicar al diseño de su sitio.
1. Elija fuentes que reflejen la personalidad de la marca de su sitio web
Diferentes fuentes tienen diferentes personalidades. Es importante elegir los que se alineen con la identidad y los valores de la marca de su sitio web. Por lo general, una fuente sans-serif puede ser más moderna y elegante, mientras que una fuente serif puede ser más tradicional y elegante.
Para los principiantes, a menudo es mejor comenzar con fuentes comunes como Arial, Helvetica, Roboto, Open Sans, Lato, Montserrat o incluso Verdana. Estos tipos de fuentes no solo se adaptan fácilmente a la mayoría de los diseños de diseño, sino que también están ampliamente disponibles en la mayoría de los dispositivos y navegadores. lo que los hace "seguros para la web".
Ejemplos de tipografía
Al seleccionar un tipo de letra, tenga en cuenta factores como la legibilidad, la legibilidad y el tono de voz, y asegúrese de que coincida con el estilo general y la marca de su sitio web. A continuación se muestran algunos ejemplos de la vida real capturados de la World Wide Web.
2. No use más de tres tipos de letra
Menos es más. El uso de demasiadas fuentes a menudo da como resultado un diseño desordenado y confuso. Una regla general es no usar más de 2 o 3 fuentes diferentes. En WHSR, usamos solo un tipo de fuente en todo nuestro sitio.
3. Presta atención al emparejamiento de fuentes
Las fuentes deben complementarse entre sí, no competir entre sí. Use una herramienta de emparejamiento de fuentes para encontrar fuentes que funcionen bien juntas.
4. Use suficiente espacio (altura de línea) entre líneas para mejorar la legibilidad
Se recomienda una altura de línea de al menos 1.5 para el cuerpo del texto y se puede ajustar según el tamaño y el tipo de fuente. La cantidad correcta de altura de línea puede ayudar a evitar que el texto parezca apretado o desordenado, lo que hace que sea mucho más fácil para los lectores escanear y captar rápidamente la idea de su contenido.
5. Evita el texto animado
Ya no vivimos en los 90. Los textos animados no molan. Además, pueden distraer y hacer que su contenido sea difícil de leer. En su lugar, utilice la animación con moderación y estratégicamente para llamar la atención sobre información importante.
Por ejemplo, puede usar una animación para resaltar un botón de llamado a la acción o para revelar contenido oculto en la página.
Cuando se usa animación, la regla general es que no interfiere con la legibilidad o accesibilidad del contenido.
6. Minimice el uso de mayúsculas
Todas las oraciones en mayúsculas, ya sea en el cuerpo del texto o en los titulares, pueden ser difíciles de leer. Si necesita enfatizar un punto, considere usar estilos de fuente en negrita o cursiva, o fondos de colores contrastantes en su lugar.
7. Prueba tu tipografía en diferentes dispositivos y tamaños de pantalla
Probar su tipografía en diferentes dispositivos ayuda a identificar cualquier problema de UX o inconsistencias de diseño. Asegúrese de que los tamaños de fuente, las alturas de línea y otros elementos de diseño se ajusten en consecuencia tanto para pantallas pequeñas como grandes, de modo que su sitio web sea fácil de navegar y comprender.
No tenga miedo de experimentar con diferentes fuentes, tamaños y diseños. Pruebe el diseño con los usuarios e itere en función de los datos analíticos web (tiempo en la página, tasa de rebote, etc.) y sus comentarios.
Recursos y herramientas de tipografía útiles
Aquí hay algunos sitios web y herramientas útiles que pueden ayudarlo a seleccionar la tipografía para sus sitios web:
- Google Fo : una colección gratuita de fuentes compatibles con la web que se pueden integrar fácilmente en su sitio web.
- FontPair.co: Fuentes gratuitas y galería de combinaciones de fuentes para todo tipo de diseños.
- Fonts.com: un sitio web que ofrece una gran selección de fuentes diseñadas profesionalmente para uso web e impreso.
- Font Squirrel: un recurso de fuente gratuito que ofrece una amplia selección de fuentes de alta calidad para uso comercial y personal.
- Comparador de fuentes Sprint: una herramienta gratuita de búsqueda de fuentes que ayuda a identificar los tipos de fuentes de las imágenes cargadas.
- DaFont: un sitio web popular que ofrece una amplia selección de fuentes gratuitas que se pueden usar para proyectos personales y comerciales.
- FuenteEspacio: otra colección de fuentes gratuitas que ofrece una amplia selección de fuentes de alta calidad para uso personal y comercial.
- Fontanello: una extensión del navegador que le permite mostrar los estilos tipográficos básicos de un texto haciendo clic con el botón derecho en él.
Envolver
La tipografía es un cruciOtro aspecto del diseño web que puede tener un gran impacto en la legibilidad, la legibilidad y la experiencia general del usuario de su sitio web. Al comprender los conceptos básicos de la tipografía, puede crear sitios web más efectivos y atractivos.
