Elección de fuentes web: una guía completa (segunda parte)

En el artículo anterior, analizamos los conceptos básicos de la elección de fuentes por razones prácticas y de legibilidad. En este artículo, exploraremos algunas de las partes más matizadas de seleccionar y usar fuentes geniales para su diseño web.

(Por cierto, si no ha tenido la oportunidad, es posible que desee revisar el primer artículo, ya que cubre los conceptos básicos para elegir las fuentes de su sitio web).

En este artículo, veremos algunos de los matices que forman parte de una buena selección de fuentes.

Jerarquía de fuentes

Algunos elementos en una página son más importantes que otros. En el diseño web, los elementos más importantes de una página tienen la mayor "jerarquía", lo que significa lo que desea que un espectador vea primero.
Los títulos y los titulares suelen ser la parte más importante. En redacción publicitaria, el título a menudo se denomina "anuncio del anuncio". En el diseño web, esto también es cierto. El título o título le dice a su espectador qué esperar a continuación.

Por esta razón, los títulos y titulares (a veces llamados encabezados) son más grandes.
El tamaño es una forma de llamar la atención sobre ellos. Pero también puede usar color, peso y ubicación en la página para crear un claro jerarquía visual a sus páginas

Líder

Liderando (pronunciado ledding) es el espacio Entre líneas de texto Es un aspecto sutil, pero una herramienta invaluable para el diseño legible de sitios web. La cola (a veces llamada descendente) o el vástago (llamado ascendente) de la letra son los que influyen en la fuente.
Un encabezado deficiente puede arruinar la copia en su página ya que todo se siente apretado. Las líneas que están demasiado juntas realmente desalientan a las personas a leer lo que está escrito, ya que es demasiado difícil de navegar.

Ejemplos de interletraje y seguimiento de fuentes
(¿Ves cómo el encabezado hace que el texto se superponga? Esto reduce la legibilidad).

Para bloques grandes de texto, 1,5 veces el tamaño del texto es un buen tamaño inicial. El texto más pequeño debería tener un encabezado más ajustado, y el texto enorme debería tener mucho. Tienes que usar tu criterio, pero en general, la regla es que, cuanto más grande es la fuente, más se necesita.

Seguimiento y Kerning

El seguimiento y Kerning se centran en el espacio. Entre caracteres en el texto Existe cierta confusión entre los dos, por lo que vale la pena explicarlos.

El logotipo de FedEx es un ejemplo de dominio tipográfico, y utiliza tanto el seguimiento como el interletraje.

El logotipo de fedex es famoso por su excelente diseño.

(¿Notan la flecha oculta en el espacio negativo? Muy bien, ¿eh?)

El seguimiento se utiliza para llenar un espacio más grande o más pequeño que el que actualmente se adapta a la fuente. En el logotipo de FedEx anterior, la mayoría de las letras están espaciadas uniformemente con el seguimiento. Sin embargo, las letras dE y aplastadas juntas. Este es un ejemplo de kerning.

Kerning ajusta el espacio entre dos letras. Si se colocan muy juntas, las palabras son difíciles de leer y se separan demasiado, y se convierten en letras desconectadas en lugar de palabras.

Tenga en cuenta que cambiar el seguimiento a veces puede provocar dificultades para leer el texto, pero también se puede usar para la estética del diseño cuando se modifica a propósito.

Tenga en cuenta que en algunos tipos de letra, las diferentes letras tendrán un espacio más amplio y otras más estrechas. Por lo tanto, debe examinar cómo se ven cuando se muestran en la página.

Color y legibilidad

Si bien no forma parte del diseño de la tipografía, el color es una parte muy importante del tipo de sitio web. Exploraremos esquemas de color en otro artículo, pero por ahora, centrémonos en los conceptos básicos de color y fuentes.

El contraste es esencial para garantizar la legibilidad en su sitio. El texto negro sobre un fondo blanco (o fondo claro) se considera el color más legible para el texto.

Eso no significa que todo deba establecerse en blanco y negro, pero debe tener en cuenta el contraste de su texto.

Como regla, cuanto más oscuro sea el color del texto, más prominente será y se destacará. Cuanto más claro sea el color, más se funde con el fondo.

Sin embargo, aquí es donde entran en juego los fondos, cuanto más contraste mejor, para que el texto en la parte superior del fondo no se pierda ni se mezcle. Algunos colores incluso vibran unos de otros cuando se superponen (por ejemplo, rojo y azul). Por eso es muy importante elegir el color del texto sobre un fondo coloreado.

The Grid puede ser tu guía

En mi opinión, usar la cuadrícula es muy importante para crear una tipografía impactante en la web. Es posible que tenga excelentes fuentes, espaciado preciso y colores, pero si no tiene un buen diseño, todo se desmorona.

El uso de una cuadrícula cuando está diseñando con tipo proporciona un equilibrio claro y una estructura geométrica a su diseño. Hay cuatro tipos básicos de cuadrícula que puede usar:

– Cuadrículas manuscritas
– Rejillas de columna
– Rejillas modulares
– Rejillas jerárquicas

Si diseña con una cuadrícula desde el principio, puede estar seguro de que su diseño será sólido.

La cuadrícula encarna todos los ideales fundamentales del gran diseño: geométrico, consistente, utilizable. Configurar el texto con una cuadrícula es la mejor manera de crear la jerarquía de fuentes, y es útil determinar qué tan grandes o pequeñas deberían ser sus fuentes.

Justificación y Alineamiento

También es importante tener en cuenta la alineación de fuentes, a veces conocida como alineación de texto, justificación de texto o justificación de tipo. Ajustar la justificación es especialmente importante para el texto del cuerpo en el que trabaja. Rara vez el tipo que agregue se ajustará perfectamente, deberá ajustarlo manualmente.

Para una referencia fácil, hay cuatro alineaciones tipográficas básicas:

  • Nivelado a la izquierda: cuando el texto está alineado a lo largo del margen izquierdo o canalón (también conocido como alineado a la izquierda, justificado a la izquierda)
  • Enjuague a la derecha: cuando el texto está alineado a lo largo del margen o margen derecho (también conocido como alineado a la derecha, justificado a la derecha)
  • Justificado: cuando el texto se alinea a lo largo del margen izquierdo, pero el espacio entre letras y palabras se ajusta de modo que el texto quede al ras entre ambos márgenes (también conocido como justificación completa, justificación completa, justificación completa)
  • Centrado: cuando el texto no está alineado con el margen izquierdo o derecho y en su lugar hay un espacio uniforme en cada lado de cada línea.

¡No lo pienses demasiado!

Al decidir qué tipo de letra usar en su sitio web, es importante recordar: no lo pienses demasiado, pero también sé consciente de ello. Puede quedar tan atascado en la fase de selección que todo su diseño se detiene. Es mucho mejor elegir algunos tipos de letra y probarlos en la página. Recuerde que la legibilidad es muy importante.

Como discutimos en la primera parte, el mundo en línea es 95% de texto, por lo que diseñar sus fuentes con cuidado significa que los visitantes de su sitio web tendrán una mejor experiencia.

Brandastic es una compañía de marketing digital y diseño de sitios web con sede en el Condado de Orange, California. Ayudamos a crear marcas que sean memorables e impactantes. Mediante el cambio de marca, el rediseño y la mejora del mensaje de su empresa, lo ayudamos a impulsar su potencial.