Cuadrícula de 8 puntos: tipografía en la web

La tipografía web es confusa. ¿Conoce las mejores prácticas?

Cuando comencé a buscar en sitios web populares para descubrir las mejores prácticas para la tipografía web, debo admitir que estaba desconcertado. A continuación se muestran algunos ejemplos de escalas de tipografía que obtuve de algunos sitios web y sistemas de diseño populares. ¿Puedes encontrar el patrón unificador?

Claramente, existen diferentes enfoques para los sistemas de tipos. La realidad es que, como comunidad web, no todos estamos de acuerdo. Sin embargo, como la mayoría de los problemas de diseño, realmente comienza abordando las necesidades del usuario.

Los tres arquetipos de los sistemas tipográficos

Aquí hay tres arquetipos generales del sistema de tipografía. La mayoría de las empresas utilizarán los tres en algún momento, pero es importante reconocer las necesidades subyacentes del usuario que se abordan en cada orientación.

Sitio de marketing

  • Propósito: Creado para contar una historia específica e inspirar a los visitantes a gastar su tiempo y / o dinero en el sitio.
  • Requisitos: cada tipo de letra necesitará su propio conjunto de estilos y la variedad de tamaños se basará en la dirección de arte más que en el ajuste de los elementos.
  • Caso de uso receptivo: el sistema deberá adaptarse a varios tamaños, desde dispositivos móviles hasta computadoras de escritorio.

Las experiencias web diseñadas para ofrecerle algo terminan en esta categoría. Los ambiciosos rompen todas las reglas de la tipografía para crear experiencias convincentes y cautivadoras.

Si bien se piensa mucho en estos sitios, la atención se centra en causar sensación en lugar de en un sistema extensible que pueda construirse en el futuro. Estos sitios generalmente tienen una vida útil corta y se descartan por completo para un rediseño de arriba a abajo.

Un ejemplo avanzado de esto es la función de interpolación utilizada por Leigh Taylor y Nick Jones en la página de inicio de Invision.

El <h1> has a font-size: calc(32px + ((24 * (100vw — 800px))/799)) ;. La tipografía de la página se calcula meticulosamente para que funcione en todos los tamaños de pantalla.

"Usar las matemáticas para hacer una dirección de arte dinámica" - Leigh Taylor

Blog / sitio de información

  • Propósito: transmitir una gran cantidad de información basada en texto.
  • Requisitos: El área de lectura principal puede utilizar un sistema de altura de línea basado en proporciones, tal como lo hace este artículo de Medium.
  • Caso de uso receptivo : probablemente responderá, pero se mantendrá enfocado en la legibilidad.

Este artículo de Medium es un ejemplo de una experiencia web creada para lecturas extensas.

El objetivo no es interpretar pequeñas visualizaciones o completar formularios. Las proporciones de tamaño que han elegido están diseñadas específicamente para que la legibilidad se limite a obtener la longitud de línea deseada. Puedo leer cómodamente cada línea porque la tipografía ha sido cuidadosamente diseñada para satisfacer mis necesidades como lector.

Producto

  • Propósito: Creado para resolver un problema de usuario, como la presentación de impuestos, la administración de un repositorio de Git o la visualización de métricas de rendimiento.
  • Requisitos: el texto debe encajar perfectamente en la jerarquía de elementos. El texto se utiliza principalmente para etiquetas, instrucciones y datos mostrados.
  • Caso de uso receptivo : Mínimamente receptivo. Los productos altamente desarrollados utilizarán un diseño adaptativo, lo que significa diferentes experiencias para dispositivos móviles y de escritorio. La atención se centra en la jerarquía de elementos que respaldan la experiencia del usuario.

Material Design de Google es un lenguaje de diseño popular que se aplica a muchos casos de uso de productos.

El método de espaciado del material se basa en un sistema de cuadrícula de componentes de 8 puntos y una cuadrícula de línea base de 4 puntos para la tipografía. Intentan escalar las alturas de línea con incrementos de 4. Escalar en incrementos de 8 con su cuadrícula de línea de base puede ser difícil porque las alturas de línea disponibles están demasiado separadas para algunos tamaños de texto.

Permitir que algunos de los tamaños de fuente vayan acompañados de una altura de línea más adecuada es un gran camino a seguir. Siempre puede aumentar el espacio por encima o por debajo de una línea determinada en 4px para alinearla con la cuadrícula atómica mayor.

Cuando se aplica, el sistema de cuadrícula de línea de base tiene la capacidad de alinear el sistema espacial del elemento (cuadrícula de 8 puntos) con el sistema de tipografía para crear un ritmo vertical convincente en el diseño.

Implementación de tipografía web - en realidad

Es posible tener una IU estructurada y obstinada que se adhiera a una cuadrícula de 8 puntos que también tenga un área de lectura de formato largo.

Permita que el sistema de cuadrícula de línea de base fija maneje el texto dentro de sus componentes estructurados y use una escala modular para crear una experiencia de lectura óptima para el blog o los documentos que ha agregado a su sitio.

La mayoría de las empresas de productos digitales ya lo hacen entre su página de inicio de marketing, el producto digital y su documentación. Tomar la decisión de estructurar estos dominios tipográficos por separado puede liberarlo de una complejidad insostenible.

La trampa: Ems, rems y píxeles ¡oh, Dios mío!

Para expresar un sistema claro y coherente, el equipo de producto debe interpretar fácilmente las medidas de tipografía.

Unidades relativas como rems y ems a veces se malinterpretan y, en mi experiencia, esto conduce a un sistema de tipografía insostenible. Por ejemplo, la proporción entre un tamaño de fuente de 14 píxeles y una altura de línea de 20 píxeles no debe capturarse en unidades relativas porque esa proporción debe cambiar a medida que aumenta el tamaño de fuente.

Definir una altura de línea de 1.4285714286em es ridículo, porque la mayoría de la gente no puede hacer ese tipo de matemáticas en su cabeza. Si el tamaño de la fuente aumenta a 16px, el navegador generará una altura de línea de 22.857142px y ese tipo de división de píxeles es un dolor de cabeza esperando a que ocurra. Esto crea confusión y es un mal uso de unidades relativas. Vea una lista completa de unidades absolutas vs relativas aquí.

¿Por qué tantos sistemas de diseño se basan hoy en día en tamaños relativos? La respuesta es "accesibilidad".

Sin embargo, los navegadores no escalan el tamaño de fuente base al acercar command +. Existen herramientas de accesibilidad que escalarán los tamaños de fuente base para los usuarios que lo necesiten. Recomiendo probarlo correctamente para asegurarse de que sea la experiencia que desea que tengan los usuarios. La accesibilidad de marcar la casilla puede dañar más de lo que ayuda.

Utilizar rems y ems en su sitio / aplicación es increíblemente poderoso. Hay muchos casos de uso muy interesantes y deberían ser una parte importante de su kit de herramientas.

Mi sugerencia es usarlos con moderación hasta que tenga un uso sólido para ellos. Hornearlos en el núcleo de su sistema de tipografía puede generar confusión y experiencias de usuario inesperadas.

Tipografía de cuadrícula de 8 puntos

La parte más poderosa del concepto de cuadrícula de 8 puntos es su capacidad para impulsar la coherencia en todos sus diseños. Deberá evaluar las necesidades de sus usuarios y la mejor manera de escalar su tipografía para satisfacer esas necesidades.

Recomiendo encarecidamente que el diseño y la ingeniería colaboren en la finalización de estos estándares para una empresa / producto.

Aquí hay ejemplos de algunos nombres familiares: Google Material, Pivotal, Atlassian, Intuit.

Referencias y lecturas relacionadas

  • Priyanka Godbole: un marco para crear un sistema de espaciado predecible y armonioso para una transferencia de diseño-desarrollo más rápida
  • Richard Rutter: los elementos del estilo tipográfico aplicados a la web
  • Ian Yates: Cómo establecer una escala tipográfica modular
  • Nathan Curtis: espacio en sistemas de diseño
  • Vincent De Oliveira: CSS profundo: métricas de fuente, altura de línea y alineación vertical
  • Kezz Bracey: Por qué debería utilizar diseños basados ​​en Rem

Artículos anteriores de cuadrícula de 8 puntos:

  1. Introducción al sistema de cuadrícula de 8 puntos
  2. Cuadrícula de 8 puntos: bordes y diseños
  3. Cuadrícula de 8 puntos: ritmo vertical

Preguntas:

Esto es algo que todavía estoy explorando. ¿Tienes un buen ejemplo para compartir? ¿Tiene un enfoque diferente para un sistema de tipografía de 8 puntos?

Si tiene alguna idea, deje un comentario o comuníquese con Twitter.