Qué hacer y qué no hacer al combinar fuentes

clasificaciones tipograficas

Existe todo un mundo enorme de fuentes y encontrar la adecuada para su escenario particular puede ser abrumador. PERO fuentetambién conocida como familia de fuentes, puede establecer el tono general y la personalidad de su sitio o aplicación, y aumentar (o disminuir) la legibilidad.

Comencemos primero definiendo algunas características comunes de las fuentes:

  • Nivel inicial: Una línea imaginaria en la que se sientan las letras.
  • altura X: La altura de las letras minúsculas de la fuente, sin incluir ascendentes y descendentes.
  • Único: la parte de una letra que descansa sobre la línea de base (a menudo se encuentra en fuentes serif)
  • Carrera: Una sola línea, recta o curva, que forma parte de una letra.
Tipografía 101 que muestra definiciones de trazo, pie, altura x y línea de base.
Terminología básica de tipografía

Estas definiciones serán útiles para describir las clasificaciones de fuentes. Cuando busque fuentes para usar en proyectos, decida qué clasificación de fuentes se verá mejor.

Hay varias clasificaciones de fuentes, pero las que suele ver en sitios web y aplicaciones se dividen en las siguientes categorías:

  • con serifas: Tipos de letra que usan pies al final de los trazos de caracteres y, a menudo, usan diferentes anchos de trazo de letra.
  • Sans serif (Francés para “sans-serif”): Tipos de letra sin patas, que a menudo tienen trazos de letras más delgados y alturas de x más altas.
  • Serif débil: Tipos de letra que parecen sans serif pero tienen serifas gruesas que coinciden con el trazo general de la letra.
  • Guion: Tipos de letra adornados con remolinos que recuerdan a la escritura a mano.
  • Monitor: Fuentes que destacan con elementos decorativos y están diseñadas para usarse en tamaños grandes.
  • Monoespaciado: Tipos de letra en los que todos o la mayoría de los caracteres ocupan el mismo espacio horizontal (mientras que en la mayoría de los tipos de letra letras como Mar mucho más ancho que las letras como j)
Ejemplos de cada clasificación tipográfica: serif, sans-serif, serif, manuscrita, display y monospace.
Se muestran seis clasificaciones de fuente (serif, sans-serif, serif, manuscrita, display y monoespaciada) para representar los tamaños de encabezado y cuerpo del texto.

Con estas clasificaciones en mente, puede comenzar a reducir sus opciones al buscar las fuentes que funcionan mejor para su sitio web o aplicación. Pero incluso entonces, elegir una fuente suele ser como un juego de adivinanzas: eliges una fuente, la aplicas a tu diseño, decides que no es lo que quieres o que entra en conflicto con otros aspectos del diseño, y luego vuelves a elegir otra fuente. fuente. Enjuague y repita.

Puede facilitar este proceso comenzando con los siguientes consejos.

Busque fuentes que admitan varios idiomas

Una forma rápida de reducir la lista es centrarse en las fuentes que admiten varios idiomas. Esto es especialmente importante si atiende a usuarios internacionales. Sin embargo, incluso si su sitio admite un idioma, los usuarios pueden traducirlo utilizando software de terceros, por lo que es una buena idea elegir una fuente que admita varios idiomas de todos modos.

Comprueba cómo se verá tu contenido en diferentes idiomas traduciendo una página o aplicación. Observe cómo se ve su fuente con diferentes caracteres y cómo cambia el diseño.

Demostración de una fuente en 3 idiomas: una en inglés, otra en japonés y un ejemplo de un idioma no admitido que no se muestra correctamente
Mismo diseño en tres idiomas usando la misma fuente Proxima Nova: inglés (izquierda); japonés (intermedio); Nepalí (derecha), un idioma no admitido por la fuente.

Saber cómo se ve tu fuente en diferentes idiomas puede afectar cómo diseñas una página y cómo tus usuarios perciben tu producto o servicio.

Evalúa las similitudes entre los personajes.

Algunas fuentes, especialmente las sans-serif, son minimalistas y tienen distinciones borrosas entre los caracteres. Compruebe qué tan bien su fuente candidata distingue los números unamayúscula YO, y minúsculas yo.

Es cierto que los usuarios a menudo pueden averiguar qué significa un carácter según el contexto, por lo que, en muchas situaciones, la falta de distinciones claras entre los caracteres puede no afectar la legibilidad de la fuente. Sin embargo, si su fuente se utilizará para mostrar datos alfanuméricos (como códigos de confirmación), la similitud entre diferentes caracteres puede causar problemas. Esto es especialmente cierto si atiende a usuarios en las industrias financiera, gubernamental o de atención médica donde predominan los números de cuenta.

Demostración de 3 fuentes usando la prueba 1Il
Prueba de similitud entre caracteres comunes en fuentes sans-serif: El ejemplo de la izquierda muestra una fuente con una clara diferencia entre números y letras, pero letras mayúsculas y minúsculas muy similares; el ejemplo del medio no muestra casi ninguna diferencia entre los caracteres y dificulta descifrar los números de cuenta; a la derecha, hay claras diferencias entre cada personaje.

Mezcla fuentes decorativas con neutrales

Las fuentes descriptivas y de visualización agregan personalidad a su sitio o aplicación y lo hacen destacar entre la competencia. Eso sí, no te excedas con la decoración. En este caso, menos es más.

Reserva las fuentes decorativas y con mucha personalidad para elementos menos utilizados como títulos o ilustraciones. Las fuentes decorativas son difíciles de leer en tamaños pequeños y nunca deben usarse para el cuerpo del texto.

Combina un tipo de letra decorativo con un tipo de letra neutral serif o sans-serif. Si su fuente decorativa tiene remolinos intensos, se verá mejor combinada con una fuente sans-serif. Si prefiere combinarlo con serifas o serifas de losa, asegúrese de que sus serifas no sean tan pronunciadas como para competir con las fuentes decorativas.

Un buen ejemplo de uso de una fuente independiente y dos ejemplos de mal uso de una fuente de pantalla.
Usar fuentes decorativas solo en el encabezado principal y sans-serif en el resto (izquierda) funciona bien, pero las fuentes decorativas en todos los encabezados (centro y derecha) son más difíciles de leer. La combinación de una fuente serif para el cuerpo del texto y fuentes decorativas para los encabezados (derecha) es la menos escaneable.

Use pesos de fuente contrastantes para distinguir entre componentes

No siempre es necesario combinar varias fuentes en un diseño. Un diseño que utiliza una sola fuente con varios pesos puede parecer profesional y bien equilibrado. El uso de varios pesos, estilos y tamaños de fuente ayudará a definir la jerarquía visual de la página que guía la vista de los usuarios por la pantalla.

Cuantas más opciones proporcione una fuente, más flexibilidad tendrá en su diseño. Cuando use una sola fuente en su diseño, considere buscar familias de fuentes que incluyan las siguientes opciones:

  • Luz
  • Común
  • Audaz
  • cursiva ligera
  • Cursiva
  • negrita cursiva
Un buen y un mal ejemplo del uso de diferentes pesos de fuente en la misma fuente
Aprovechar una sola fuente con varios grosores y estilos: el diseño de la izquierda utiliza varios grosores y estilos de la misma fuente, Proxima Nova, incluido un título principal en negrita extra, títulos de reseña en negrita, texto de etiqueta claro y texto de cuerpo normal . Estas claras diferencias en el peso del tipo guían a los lectores hacia el diseño. Por el contrario, el ejemplo de la derecha se basa únicamente en el tamaño de fuente para crear una jerarquía visual; este enfoque da como resultado una estructura más plana y menos definida.

Asigne diferentes roles al emparejar fuentes

No importa qué fuente o combinación de fuentes elija, no las use al azar en su diseño. Cada tipo de letra o estilo debe tener una función y un propósito claros.

Al igual que con los ejemplos de fuentes decorativas anteriores, puede asignar una fuente para los encabezados y otra para el cuerpo del texto. El uso de dos fuentes para el cuerpo del texto hace que el diseño parezca inconsistente y sin refinar y puede socavar la credibilidad de su marca o empresa.

Use un sistema de diseño de interfaz o una guía de estilo para definir patrones para todo su sitio o aplicación para mantener la coherencia y cumplir con las expectativas del usuario.

Conclusión

Elegir tipografía para un diseño puede resultar abrumador debido a la gran cantidad de opciones. Con tantas opciones para elegir, puede elegir lo que sea más conveniente o esté disponible en este momento. Estas pautas tipográficas aumentarán su confianza en la creación de diseños que sean lo más fáciles de usar posible sin sacrificar la estética.

Obtenga más información sobre el uso de la tipografía en el diseño en nuestro tutorial. Fundamentos de diseño visual.

Previous post 7 formas de usar el correo electrónico para aumentar el tráfico orgánico
Next post Gigz: un ejemplo del uso de UX / UI. Una aplicación que ayuda a los artistas a encontrar conciertos.

Deja una respuesta