Tipografía en sistemas de diseño

Elija fuentes, establezca una jerarquía e integre con componentes

Las interfaces digitales diarias incluyen una rica variedad de imágenes, visualizaciones y otras imágenes. Sin embargo, más que nada, están hechos de palabras. Oh tantas palabras A medida que equipamos a los equipos para diseñar y codificar interfaces usables, consistentes y hermosas que utilizan sistemas, es esencial que las palabras dependan de una base sólida de tipografía.

Lo admito, no soy un experto en tipografía. Me falta un título de diseño gráfico. Nunca soy la persona que elige una fuente, un tipo de escala o un espacio entre letras fino. Como resultado, siempre he sido reacio a escribir sobre tipografía.

Por otro lado, soy un cazador de patrones. Con los años, he contribuido a muchos sistemas de diseño que establecen una base para la tipografía. Cada uno atravesó pasos y decisiones para establecer una base y aplicarlo a una biblioteca emergente de componentes de interfaz. Este artículo resume esos patrones.

La tipografía comienza estableciendo una base de familias de fuentes y pesos junto con retrocesos. Luego explora cómo construir una jerarquía usando tamaño, color, detalles adicionales como altura de línea y capacidad de respuesta en capas. Esos modelos se aplican a los componentes de la biblioteca de un sistema (como Artículo y Encabezado), así como a los componentes personalizados creados por otros equipos.

Fuentes

Antes de profundizar en los detalles, debe decidirse por lo básico: fuente (s). A través de la exploración, la comparación, la investigación y, a menudo, para las grandes empresas, hacer una fuente por sí mismas, cada pantalla se conecta en cascada y depende de esta elección.

Familias, Pesos y Fallbacks

Si bien los sistemas pueden variar las fuentes en función de la temática, la mayoría se basan inicialmente en la identificación de la familia de fuentes serif principal y / o sans-serif. Cada fuente se complementa con una cascada de fallos (Hello, Arial y Times), y muchos sistemas incorporan una fuente monoespaciada para la visualización de código (aunque solo sea la suya).

Escriba especímenes en tres pesos de la fuente Barlow

Algunos sistemas pueden salirse con tan solo dos o tres pesos de su tipo de letra primario, buscando equilibrar la variedad y la flexibilidad con el gobierno y el peso de la descarga.

Para llevar: llegar a una fuente primaria no siempre es difícil, pero elegir qué pesos incluir tiene consecuencias a largo plazo. Agregar fuentes y pesos es fácil. Administrar el tamaño de descarga y cambiarlos es difícil.

Obtener las fuentes, ya sea por descarga, enlace o CDN

Independientemente de si un programa de sistema de diseño posee las fuentes, los usuarios de un sistema de diseño esperan que un sistema proporcione las instrucciones necesarias para usar las fuentes.

Desde la perspectiva de un diseñador, se trata de descargas. Algunas fuentes tienen una propiedad intelectual muy estricta con un uso compartido limitado intencionalmente. Por lo tanto, como mínimo, una página de Tipografía debe proporcionar descargas directas o instrucciones sobre cómo obtener la aprobación para obtenerlas. La mayoría de los equipos proporcionan un ZIP descargable que incluye todos los archivos que necesita para instalar y usar las fuentes localmente.

Para los desarrolladores, depende del enfoque, proporcionando opciones como:

  • Descarga directa de fuentes para servir las fuentes mismas
  • Instrucciones para vincular a un servicio como Google Fonts
  • CDN hace referencia a que todos los productos se refieren colectivamente
  • Una invitación para contactar a un arquitecto técnico, ya que se requiere una licencia para la fuente. Las organizaciones requieren esto para controlar el costo recurrente y a menudo no trivial de alojar y servir la fuente.

Para llevar: las fuentes son necesarias para diferentes personas de diferentes maneras. Los usuarios del sistema esperan que el sistema explique cómo usar todo fácilmente, incluso si no es el trabajo del equipo del sistema crear fuentes personalizadas o servir las fuentes ellos mismos.

Escala de tipografía y jerarquía

La mayoría de los sistemas de diseño demuestran una escala de tipografía en la documentación como una pila vertical. Eso no es suficiente. Un sistema tipográfico también debe establecer construcciones como texto del cuerpo, encabezados, color, capacidad de respuesta, color y otros detalles de grano fino.

Cuerpo de texto

Los sistemas aprovechan una escala de tipo para ofrecer tamaños de texto básicos, a menudo denominados simplemente como texto o cuerpo, que incluyen pequeño, mediano, grande y, si lo necesita, xs, xl, etc. La mayoría de los sistemas necesitan más o menos tres (por lo tanto, mi comodidad con el uso de tallas de camiseta). Comience con algunos y amplíe según sea necesario como diseños de componentes, y composiciones de páginas en la naturaleza.

Texto pequeño, mediano y grande.

La copia del cuerpo también puede ofrecer un párrafo distinto de "Plomo" (alternativamente, "Lede") para abrir una página, como en un artículo (más sobre eso más adelante). Por lo tanto, una simple escala S / M / L también puede necesitar otras variantes de plomo. Esto es especialmente relevante en sistemas que ofrecen múltiples tamaños, ya que un cable para pantallas más grandes y de menor densidad sería más grande que un cable para alternativas más pequeñas y de alta densidad.

Contrastar un párrafo principal del texto medio o grande

Para llevar: Mantenga los tamaños del cuerpo simples y pocos, pero permita variantes específicas fuera de la escala. Dado que la copia del cuerpo se entrelaza con la mayoría de los componentes, cada una de estas opciones ofrece propiedades (tamaño, peso, altura de línea, ...) para ajustar para que cada una sea correcta.

Color de texto

El color también juega un papel clave en la jerarquía tipográfica de una interfaz, a menudo por tipos establecidos como:

  • Principal, para la mayoría del texto de la interfaz, ya sea cuerpo o encabezado.
  • Secundario, para disminuir el contraste (a menudo, el "texto gris") para obtener información complementaria.
  • Interactivo, no solo para enlaces, sino también para botones planos, etiquetas de pestañas y más
  • Discapacitados, a menudo resultantes son tratamientos especialmente de bajo contraste.
  • Error, generalmente rojo, para el mayor contraste con su entorno

Cuando se trata de nombrar colores de texto basados ​​en la intención, encuentro que los nombres de Hudl Uniform son los más intrigantes: predeterminado, contraste, sutil y no esencial. Tales nombres equilibran las compensaciones de un control más fuerte con una mayor abstracción (y, por lo tanto, una reutilización menos evidente).

Color del texto en fondos

Estos tipos son típicos, se encuentran durante los primeros diseños de componentes como botón, entrada y enlace. A medida que crece la biblioteca, se ensucian en todo el catálogo de componentes a través de herramientas como tokens y mixin. En particular, se vuelven necesarios a medida que los diseños de los componentes se extienden en entornos claros y oscuros.

Por ejemplo, en la biblioteca eightshapes.com (mucho menos rigurosamente mantenida, los niños del zapatero y todo lo demás), empleamos un mixin para colorear texto que itera a través de los colores de fondo, por tipo.

Para llevar: la jerarquía tipográfica no se limita al tamaño y al peso; el color también tiene un impacto considerable. Los sistemas de diseño requieren una aplicación de color consistente para crear contraste dentro y entre los componentes, y depender de tipos bien modelados es esencial para gestionar tales relaciones.

Niveles de rumbo y casos especiales

Los encabezados contribuyen de manera crítica a la jerarquía de la página. La mayoría de los sistemas ofrecen al menos cuatro, aunque algunos ofrecen muchos más. Los títulos de las páginas generalmente (pero no siempre) se alinean con el nivel de encabezado más grande. Los niveles restantes están entretejidos en todos los componentes: un título de tarjeta aquí, un título de mensaje de alerta allí y un título de dos niveles modal también.

Además, algunos sistemas ofrecen encabezados especializados fuera de la escala de encabezado típica, como el subtítulo de una imagen o una ceja (ver Morningstar Design System). El hecho de que un encabezado exista fuera de la escala tradicional no significa que no sea un encabezado reutilizable en un catálogo.

Encabezado de cejas

Los sistemas también pueden ofrecer combinaciones más sofisticadas de encabezados y texto del cuerpo. Por ejemplo, IBM Carbon basa la tipografía en el tipo de letra IBM Plex, y distingue los títulos relevantes para las interfaces de producto basadas en web (Productivo) y marketing digital (Expresivo).

Para llevar: resuelva solo los tipos de encabezado suficientes y coloque en capas controles de encabezado más complicados solo según sea necesario y el contexto es claro. Por lo general, cuatro a seis nivel de encabezado y una pizca de variantes especiales servirá.

Niveles de encabezado Tags Etiquetas H #

En HTML, las etiquetas de encabezado asignan significado semántico al rol de un elemento dentro de la jerarquía de una página. Sin embargo, las etiquetas de un componente no se alinean o no se pueden alinear con cada HTML de cada página en la que se usa, especialmente en páginas o en una aplicación completa. Además, lo que podría ser el título más grande en una pantalla (como el título de la página de una especificación de producto) puede ser el tercer título más grande en otra página (como la página de inicio de un producto).

Niveles de encabezado distintos, pero con la misma etiqueta HTML

Como resultado, animo encarecidamente a los equipos a separar el concepto de nivel de encabezado (el resultado visual de aplicar propiedades de estilo) de la etiqueta H (elementos HTML como H1, H2, H3, etc.).

Para llevar: la aplicación de escalas de encabezado no debería requerir el uso de un elemento HTML específico. En cambio, separe las dos preocupaciones. Un sistema debe tejer niveles de encabezado consistentemente en todos los componentes y ofrece herramientas para que los adoptantes hagan lo mismo con sus creaciones personalizadas.

Altura de línea y otras propiedades

La tipografía está influenciada por muchas otras propiedades, que incluyen:

  • altura de la línea
  • alineación (rara vez se controla a nivel del sistema, generalmente por defecto a la izquierda)
  • espaciado de letras
  • transformación de texto (como mayúsculas)

En particular, la altura de la línea es un desafío. En algunas bibliotecas, usaremos convenciones y herramientas para recortar el espacio negativo establecido por la altura de línea de todo el texto incluido en los componentes, como se describe en Espacio en sistemas de diseño.

Altura de línea recortada frente a elementos de texto que incluyen impactos de altura de línea

La altura de la línea de recorte de las bibliotecas incluye el sistema de diseño Morningstar, el sistema de diseño de cometas de Discovery Education y ~ 50% de otras que hemos fabricado desde 2016. En todas las otras bibliotecas, hemos "dejado que la altura de la línea haga lo suyo", previsiblemente colisionando con relleno de elementos que contienen.

Para llevar: a medida que un sistema comienza a escribir, escriba en los detalles y comience algunas convenciones, como la forma en que lidiará con la altura de la línea. Sin embargo, evite finalizar todas las reglas antes de hacer lo primero. En cambio, siéntase cómodo con el caos temprano y con detalles suaves a medida que la biblioteca toma forma. A medida que se acerque a una versión principal, bloquee las convenciones y asegúrese de que las herramientas se apliquen de manera consistente.

Tipografía sensible

Los sistemas pueden ofrecer tamaños de letra receptivos ajustados centralmente en un conjunto predecible de puntos de interrupción. Para el texto del cuerpo, el tamaño aumenta lentamente. Por otro lado, los títulos más grandes pueden aumentar dramáticamente en esos mismos puntos de interrupción.

Si se incluye la capacidad de respuesta, un sistema debe elegir si está "siempre encendido" u opcional. Si es opcional, ¿la capacidad de respuesta está activada o desactivada de forma predeterminada? Si está desactivado de manera predeterminada, la capacidad de respuesta se puede habilitar a través de una API para herramientas como mixin como sys-header-level-2:

@mixin sys-header-level-2 ($ responsive: false);

y la clase de modificador CSS como sys-header - responsive:

  

  Título   

  
...

Los sistemas pueden liberar componentes que carecen de tipografía receptiva. Está bien. No te sientas tan mal. De hecho, algunos sistemas carecen de controles de tipo receptivo centralizados durante meses o más de un año. Sin embargo, hacerlo conlleva un costo en el futuro. Por lo tanto, el diseño técnico temprano puede estar justificado para que las herramientas de código y los planes de prueba anticipen eventualmente la capacidad de respuesta.

Para llevar: Si bien un MVP podría no resolverlo, la tipografía receptiva es un sello distintivo de un sistema maduro y estable. Establezca una escala por punto de interrupción y haga que sea invocable en diferentes niveles de composición de jerarquía: por elemento, por componente, por región de una página y para una página general.

Relacionar la tipografía con los componentes

Si está tentado a restablecer páginas, controle lo que puede controlar

En ecosistemas más raros, un sistema es central y autoritario. Define cómo funciona todo el desarrollo front-end y cómo se construyen todas las páginas. En la mayoría de las empresas, incluidas las que sirvo, un sistema carece de ese lujo. Un producto puede integrar el código de muchos equipos de productos dependiendo de las diferentes versiones del sistema o del sistema completo.

En esos escenarios, un sistema no puede confiar en los reinicios a nivel de página. En cambio, los elementos se restablecen en un límite controlado, como un bloque de componentes mixin ...

.system-button {
  @include component-font-reset ();
  ...

... para restablecer al menos un rango de propiedades de tipo, como:

Para llevar: Hay arrogancia al creer que un sistema controla todo en una página, convencido de que no colisionará con ningún otro estilo. Por lo tanto, fortifique lo que envía en el contexto que controla, incluido el restablecimiento de elementos para la tipografía.

Herramientas para los adoptantes para hacer componentes ellos mismos

Un sistema nunca ofrece "todos los componentes que necesitará". Los adoptantes crean entre el 30% y el 70% de su interfaz restante. Por lo tanto, dependerán de las herramientas del sistema para diseñar el texto en lo que crean, como los mixins de Sass.

Por ejemplo, un adoptante podría querer aplicar un encabezado al elemento del título ...

.my-custom-component-title {
    @include system-level-3-header ();
}

… Para obtener CSS compatible con el sistema como:

.my-custom-component-title {
  tamaño de fuente: 24px;
  font-family: "Barlow", ...;
  estilo de fuente: normal;
  font-weight: "Semibold";
  altura de línea: 1.2;
}

Si bien las herramientas de código no deberían abrumar al magnífico documento de tipografía, esa página es una ubicación razonable que muchos desarrolladores deberían encontrar herramientas útiles y potentes.

Para llevar: no limite el acceso a la tipografía utilizando solo componentes preconstruidos. En cambio, permita a los usuarios alinear sus componentes con la tipografía del sistema. Las herramientas de nivel inferior también ayudan y conducen a contribuciones limpias más adelante.

Tipografía UI ≠ Artículos (anteriormente falta espacio)

Una idea errónea que desacredito temprano y con frecuencia: desarrollar un sistema de tipografía para componentes de la interfaz de usuario es equivalente a resolver para pantallas de lectura de formato largo que involucran principalmente encabezados y texto corporal.

Este no es el caso, ya que:

  • La tipografía del artículo está hecha de encabezados, texto del cuerpo y algunos otros componentes (como una imagen subtitulada); La tipografía UI aborda una gama muy diversa de componentes y elementos dentro.
  • La densidad de la tipografía del artículo tiende a ser más flexible .; La densidad de la tipografía UI varía.
  • Los encabezados de tipografía de artículo comienzan en 2 y ascienden uno por uno; La tipografía UI utiliza combinaciones irregulares de niveles de encabezado como 3, 4 y 5.
  • Los artículos ordenan una columna principal, a menudo ancha, en el medio de una página; La tipografía UI ocupa espacios estrechos y anchos en toda una página.
  • Los artículos de tipografía incluyen un pequeño conjunto de combinaciones predecibles; La tipografía UI aborda una cantidad incalculable de combinaciones de componentes.
  • La tipografía de la interfaz de usuario reside en diseños de muchas columnas en los que el texto es imposible de alinear consistentemente en una cuadrícula de línea de base compartida. Francamente, ni siquiera lo intento. Sin embargo, las cuadrículas de referencia dominan la discusión de la tipografía de artículos.

Para llevar: los contextos de tipografía en torno a una interfaz de usuario varían sustancialmente, y el formato de un artículo es solo uno entre muchos. Separe las reglas aplicables en una biblioteca de componentes de la interfaz de usuario de aquellas relevantes para contextos más estrechos como un artículo.

El componente de encabezado

Los estilos de nivel de título se aplican ampliamente en una biblioteca de componentes. Pero eso no significa que las composiciones de página no puedan crear su propia jerarquía al incluir un componente de Encabezado que ofrece algunas campanas y un silbato.

El componente de encabezado del sistema de diseño Morningstar

Por ejemplo, el componente Encabezado de Morningstar solidifica la disposición de muchos elementos relacionados, incluidas las propiedades para:

  • Un icono (¿con información sobre herramientas incorporada?) Adyacente a la etiqueta del encabezado
  • Acciones, ya sea como botones o botones de icono
  • Opciones de borde para crear contraste entre regiones de página

Para llevar: la tipografía de rumbo no es más que una parte de un componente de rumbo potencial, que relaciona ese tipo con señales adyacentes, interacciones y tipo adicional. Empaquete esas reglas y relaciones en un componente de Encabezado según sea necesario, separado de las herramientas genéricas de estilo de encabezado.

El componente del artículo, incluida la longitud de la línea y los emparejamientos de elementos

Un componente de artículo (o texto de formato largo) contiene reglas que separan los niveles de encabezado, los textos del cuerpo, las listas (sin ordenar y ordenadas) y otros elementos "básicos" como una imagen con un título. También puede ofrecer una línea de autor y algunos otros tipos de elementos. Esencialmente, el rango de elementos que recorre en un artículo medio como este o en la página de documentación de componentes del sistema.

Elementos básicos del componente del artículo, incluido el espacio incrustado

Me gusta equiparar un componente de Artículo a "Todos los estilos que necesitaría para formatear adecuadamente el contenido típico ingresado en un editor de texto enriquecido de CMS". El Morningstar Design System también incluye un componente de Artículo con características sólidas.

Hay que tener mucho cuidado con las relaciones emparejadas fuera del contexto controlado por un componente. Sin embargo, el contexto de un artículo ofrece un conjunto cerrado de combinaciones de elementos predecibles: h2 luego h3, h3 luego p, o h2 luego p, y así sucesivamente. Cada una de esas combinaciones se puede perfeccionar según el modelo de espaciado (como "use margin-bottom" o "use margin-top").

Para llevar: Tenga mucho cuidado al refinar la experiencia de lectura en formato largo de sus usuarios. El desafío incluye no solo la jerarquía, sino también la longitud de la línea, el espacio entre líneas, las relaciones con otros elementos del artículo (mazo, línea del autor, imágenes y más) dentro de ese bloque más amplio y ampliamente reutilizable.

La profundidad de la tipografía requiere más días, meses y años de aprendizaje de los que ofrece este artículo. Sin embargo, armados con una base sólida, los sistemas de diseño y los equipos que apoyan pueden producir experiencias mucho más rápidas, mejores y consistentes que antes. Que estas herramientas sean un comienzo útil.