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 diseñar y codificar 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. pjlbpasyam 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. pjlbpasyam

Fuentes

Antes de profundizar en los detalles, debe decidir 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í mismos, cada pantalla se deriva y depende de esta elección. pjlbpasyam 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 (aunque solo sea el suyo). pjlbpasyam

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 el control y el peso de descarga. pjlbpasyam

Conclusiones: 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. pjlbpasyam

Obtener 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. pjlbpasyam

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
• CDN referencias a las que todos los productos se refieren 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 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 tipográfica 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 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ágina en la naturaleza.

El cuerpo del texto también puede ofrecer un párrafo "Lead" distinto (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

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