Las interfaces digitales cotidianas incluyen una rica variedad de imágenes, visualizaciones y otras imágenes. Sin embargo, más que nada, están hechas de palabras. Oh, tantas palabras. A medida que equipamos a los equipos para diseñar y codificar interfaces utilizables, consistentes y hermosas utilizando sistemas, es esencial que las palabras dependan de una base sólida de tipografía. Lo admito, no soy un experto en tipografía. Carezco de un título en diseño gráfico. Nunca soy la persona que elige una fuente, escala el tipo o perfecciona 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 utilizando tamaño, color, detalles adicionales como la altura de línea y la capacidad de respuesta de las capas. Estos modelos se aplican luego a los componentes de la biblioteca de un sistema (como Article y Header), así como a los componentes personalizados creados por otros equipos.

Fuentes

Antes de profundizar en los detalles, debe decidirse por lo básico: la(s) 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í mismos, cada visualización se deriva de esta elección y depende de ella.

Familias, pesos y alternativas

Si bien los sistemas pueden variar las fuentes según la temática, la mayoría se basa inicialmente en la identificación de la familia de fuentes serif y/o sans-serif primaria. Cada fuente se complementa con una cascada de alternativas (Hello, Arial y Times), y muchos sistemas incluyen una fuente monoespaciada para las visualizaciones de código (aunque solo sea la propia).

Algunos sistemas pueden funcionar con tan solo dos o tres pesos de su tipografía principal, buscando equilibrar la variedad y la flexibilidad con la gobernabilidad 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 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 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, todo se trata de descargas. Algunas fuentes son propiedad intelectual estrictamente confidencial con un uso compartido muy limitado intencionalmente. Por lo tanto, como mínimo, una página de Tipografía debe proporcionar una descarga directa o instrucciones sobre cómo obtener la aprobación para obtenerlas.La mayoría de los equipos proporcionan un archivo ZIP descargable que incluye todos los archivos que necesita para instalar y usar fuentes localmente.

Para los desarrolladores, depende del enfoque, y ofrece opciones como:

• Descarga directa de fuentes para servir las fuentes en sí
• Instrucciones para vincularse a un servicio como Google Fonts
• Referencias de CDN a las que todos los productos hacen referencia colectivamente
• Una invitación para ponerse en contacto con 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.

Lección: diferentes personas necesitan fuentes 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 proporcionar fuentes por sí mismos.

Escala y jerarquía de la tipografí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 construcciones como el cuerpo del texto, los encabezados, el color, la capacidad de respuesta, el color y otros detalles de grano fino.

Cuerpo del texto

Los sistemas aprovechan una escala tipográfica para ofrecer tamaños de texto básicos, a menudo denominados simplemente 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 (de ahí mi comodidad con el uso de tallas de camiseta). Comience con unos pocos y amplíelos según sea necesario, a medida que se vayan creando diseños de componentes y composiciones de páginas.

El cuerpo del texto también puede ofrecer un párrafo de “Inicio” (alternativamente, “Lede”) distintivo para abrir una página, como en un artículo (más sobre esto más adelante). Por lo tanto, una escala S/M/L simple también puede necesitar otras variantes de inicio. Esto es especialmente relevante en sistemas que ofrecen múltiples tamaños, ya que un inicio para pantallas más grandes y de menor densidad sería más grande que un inicio 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: