Las interfaces digitales cotidianas incluyen una rica variedad de imágenes, visualizaciones y otras imágenes. Sin embargo, más que nada, están hechos de palabras. Ay tantas palabras. A medida que equipamos a los equipos para que diseñen y codifiquen interfaces usables, consistentes y hermosas usando 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, escala el tipo o afina el espaciado entre letras. Como resultado, siempre he sido reacio a escribir sobre tipografía.

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

Fuentes

Antes de profundizar en los detalles, debe establecer 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, la creación de una fuente por sí mismas, cada pantalla se deriva y depende de esta elección.

Familias, pesos y alternativas

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 primarias serif y/o sans-serif. Cada fuente se aumenta con una cascada de alternativas (Hello, Arial y Times), y muchos sistemas lanzan una fuente monoespaciada para mostrar el código (incluso si solo es el suyo).

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

Conclusión: llegar a una fuente principal 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 las descargas y cambiarlas es difícil.

Obtención de las fuentes, ya sea mediante descarga, enlace o CDN

Ya sea que un programa de sistema de diseño sea propietario de las fuentes o no, 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 son propiedad intelectual estrictamente restringida con un uso compartido muy intencionalmente limitado. Entonces, como mínimo, una página de Tipografía debe proporcionar descarga directa o instrucciones sobre cómo obtener 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 fuentes localmente.

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

• Descarga directa de fuentes para servir las propias fuentes
• Instrucciones para vincular a un servicio como Google Fonts
• Referencias de CDN a las 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 hospedar y servir la fuente.

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

Escala de tipografía & Jerarquía

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

Cuerpo de texto

Los sistemas aprovechan una escala de tipos para ofrecer tamaños de texto central, 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 tres o más (por lo tanto, mi comodidad con el uso de tallas de camiseta). Comience con unos pocos y amplíelos según sea necesario, como diseños de componentes y composiciones de páginas en la naturaleza.

El texto del cuerpo también puede ofrecer un párrafo distinto de "Lead" (alternativamente, "Lede") para abrir una página, como en un artículo (más sobre esto más adelante). Así, una simple escala S/M/L también puede necesitar otras variantes de plomo. Esto es especialmente relevante en los sistemas que ofrecen varios tamaños, ya que un Lead para pantallas más grandes y de menor densidad sería más grande que un Lead para alternativas más pequeñas y de alta densidad.

Color del 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 de los textos de interfaz, ya sea cuerpo o encabezado.
• Secundario, para disminuir el contraste (a menudo, el “texto gris”) para información complementaria.
• Interactivo, no solo para enlaces sino también para botones planos, etiquetas de pestañas y más
• Deshabilitado, a menudo el resultado son tratamientos de contraste especialmente bajos
• Error, normalmente rojo, por el mayor contraste con su entorno

Cuando se trata de nombrar los colores del texto según la intención, los nombres de Hudl Uniform me parecen más intrigantes: predeterminado, de contraste, sutil y no esencial. Dichos nombres equilibran las ventajas y desventajas de un control más fuerte con una mayor abstracción (y, por lo tanto, una reutilización menos evidente).

Estos tipos son típicos y se encuentran durante los primeros diseños de componentes como botones, entradas y enlaces. A medida que crece una biblioteca, se llenan de basura en 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 abarcan entornos claros y oscuros.

Por ejemplo, en la biblioteca de Yoursite.com (con un mantenimiento mucho menos riguroso, niños zapateros y todo), empleamos una combinación de colores de texto que itera a través de los colores de fondo, por tipo.