Escala tipográfica modular: Cómo construir un sistema tipográfico coherente

Una escala tipográfica modular consiste en aplicar una proporción a un tamaño base que genera todos los tamaños de fuente del producto. Esa es la idea principal. Se elige la proporción, se fija la base, se generan los pasos, se distribuyen como tokens y se utilizan esos tokens en todas partes en lugar de valores de píxeles individuales. Si se implementa correctamente, cada tamaño del producto se relaciona con los demás, porque matemáticamente lo hacen.

Si se implementa mal, se termina con diecisiete tamaños de fuente indefinibles, encabezados que compiten por la jerarquía con el texto principal y una reunión de rediseño trimestral donde alguien propone "estandaricemos los tamaños" y nadie sabe hacia dónde estandarizar. La escala es el elemento que se estandariza. Este artículo explica cómo crear una escala que funcione en un producto real, con proporciones reales, una estructura de tokens real y las traducciones de Figma y Tailwind que la hacen ejecutable.

Qué es una escala tipográfica modular

Una escala tipográfica modular es una única proporción aplicada a un tamaño base que genera todos los tamaños de fuente del producto, y esa proporción es la clave.

Elige un tamaño base, por ejemplo, 16 píxeles, y una proporción, por ejemplo, 1,25. Multiplica 16 por 1,25 y obtendrás 20. Multiplica 20 por 1,25 y obtendrás 25. Continúa así y obtendrás 31, 39, 49, 61. Divide 16 entre 1,25 y obtendrás 12,8. Divide ese valor entre 1,25 y obtendrás 10,24. Esa es la escala. Ocho tamaños, una base, una proporción, total coherencia matemática.

La razón por la que esto funciona es psicofísica. La percepción visual humana responde a proporciones, no a diferencias absolutas. Un salto de 12 a 14 se percibe de forma similar a un salto de 24 a 28, porque ambos representan aproximadamente el mismo incremento. Una escala lineal (12, 14, 16, 18, 20, 22) se siente estrecha en la parte superior y demasiado amplia en la inferior. Una escala modular se siente uniforme, porque, relativamente, lo es.

La misma lógica subyace a los intervalos musicales (las octavas son 2x, las quintas 1,5x, las cuartas 1,333x), las aperturas fotográficas y la mayor parte de la teoría de la proporción arquitectónica. Type simplemente la tomó prestada. Las proporciones que verá en este artículo (segunda menor, cuarta justa, proporción áurea) se importan de la música por una razón: describen el mismo tipo de relación perceptiva.

Las cinco proporciones que cubren productos reales

La mayoría de los productos se encuentran entre 1,125 y 1,618, y cada proporción conlleva una señal de densidad específica.

Las cinco proporciones que cubren casi todas las interfaces reales:

| Proporción | Nombre | Señal de densidad | Implementación real |

|------:|------|----------------|---------------------|

| 1.125 | Segunda menor | Compacta, densa, con gran cantidad de datos | Vercel, Geist, la mayoría de los paneles de administración |

| 1.2 | Tercera menor | Compacta, equilibrada | Escala predeterminada de Tailwind |

| 1.25 | Tercera mayor | Editorial estándar | Stripe, roles de cuerpo de Material Design 3 |

| 1.333 | Cuarta perfecta | Generosa, estilo revista | Sitios editoriales, blogs de formato largo |

| 1.618 | Proporción áurea | Dramática, centrada en la visualización | Páginas de marketing, sitios web con contenido destacado |

A veces aparecen dos valores más. 1.414 (la cuarta aumentada, que es la raíz cuadrada de 2 y la proporción detrás del papel A4) se sitúa entre la cuarta y la quinta perfectas, y es una opción razonable para productos con estilo revista que buscan un nivel adicional de dramatismo que el que ofrece 1.333. 1.5 (la quinta justa) es más fuerte que 1.333 y más suave que 1.618, y es el valor predeterminado en muchos generadores de páginas de marketing.

Puedes usar proporciones fuera de este rango, pero generalmente no es recomendable. Por debajo de 1.1, los pasos son tan pequeños que se fusionan entre sí, y no se puede distinguir un encabezado 3 de uno 4 a simple vista. Por encima de 1.7, la escala aumenta tan rápido que se agotan los tamaños intermedios utilizables. Los diseñadores que buscan un rango más amplio que el que ofrece 1.618 suelen estar resolviendo el problema equivocado: necesitan dos escalas, no una más grande.

Elige la proporción que requiere tu densidad

Una aplicación con gran cantidad de datos requiere una proporción ajustada, un sitio editorial requiere una amplia, y una elección incorrecta se refleja en todos los demás casos.

Si el producto es un panel de control, un panel de administración, un CRM, una herramienta de análisis o cualquier aplicación donde el usuario lea largas filas de información densa durante horas, utilice por defecto 1.125 o 1.2. Esta proporción ajustada evita que el tamaño de los encabezados desvíe la atención de los datos. La jerarquía sigue funcionando porque, a esta escala, se basa principalmente en el grosor, el color y el espaciado, no en el tamaño.

Si el producto es una página de marketing SaaS, un sitio de contenido, una página de producto o una superficie de documentación, utilice por defecto 1.25 o 1.333. Las proporciones intermedias proporcionan suficiente impacto visual en los encabezados para diferenciar las secciones sin que el texto principal parezca pequeño en comparación. Este es el nicho de mercado de la mayoría de los productos B2B, y es donde convergen Tailwind, Material Design y BRAND16.

Si el producto es editorial, de estilo revista o centrado en la publicidad gráfica, como una publicación extensa, un sitio de moda o un micrositio de campaña, utilice por defecto 1.414 o 1.618. La relación de aspecto amplia hace que los titulares se vean como titulares, de esos que merecen un bloque completo de encabezado. El texto principal puede mantenerse razonable porque el espacio entre el encabezado y el cuerpo cumple su función.

El error radica en elegir una relación de aspecto porque suena impresionante (la proporción áurea es un ejemplo famoso) y aplicarla a un producto que no necesita ese dramatismo. Una relación de 1,618 en un CRM genera ruido ilegible. Una relación de 1,125 en un sitio editorial se ve débil. Elija la relación de aspecto que su producto realmente necesita y acéptela.

Bloquee el tamaño base antes de escalar

El tamaño de fuente base es el punto de referencia para cada paso; si se equivoca, todos los pasos serán incorrectos.

Establezca un tamaño predeterminado de 16 píxeles para el texto principal en la web. El valor predeterminado del navegador es 16, la hoja de estilo del agente de usuario es 16, el tamaño de lectura preferido promedio para adultos es 16, y las directrices de accesibilidad de WCAG y las Pautas de Interfaz Humana Apple consideran 16 como el mínimo para el texto principal. Puedes usar 17 o 18 si el público es mayor o si el producto requiere mucha lectura, pero nunca debes usar menos de 16 puntos en el texto principal.

Esa base es el punto multiplicador. Cada paso superior es la base multiplicada por la proporción elevada a una potencia determinada. Cada paso inferior es la base dividida por la proporción elevada a una potencia determinada. Si cambias la base, cada paso se modifica. Esto es normal, así es como funciona el sistema. Sin embargo, significa que cambiar la base es un cambio estructural, no un ajuste por pantalla, y debe hacerse una sola vez, de forma deliberada, antes de la distribución del texto.

Para dispositivos móviles, puedes reducir la base (15 o 16) y usar unidades relativas. Para impresión, la base suele ser de 11 o 12 puntos y las proporciones se mantienen. Para documentación con bloques de código, establece el texto principal en 16 y el código monocromático en 14, aplicando la misma proporción a la escala del código. La base es por medio, la proporción es por producto, y ambas decisiones se toman una sola vez.

Una regla más. En la web, establece la base en rem, no en píxeles. La escala completa debe expresarse en rem para que las preferencias de tamaño de fuente del usuario y las herramientas de accesibilidad (zoom, modo lectura, escalado del navegador) se propaguen correctamente. Tailwind ya lo hace. Material Design también. El tipo dinámico de iOS de Apple hace lo mismo. Si tu escala está codificada en píxeles, estás entrando en conflicto con la plataforma.

Genera los pasos y etiquétalos por función

Una escala de siete a nueve pasos cubre todos los tamaños que necesita un producto; nómbralos por función, no por tamaño.

Usa una base de 16 píxeles y una relación de 1,25. Los pasos son:

• 10 (leyenda extra pequeña, nota al pie)
• 13 (texto pequeño, secundario)
• 16 (cuerpo, base)
• 20 (encabezado, cuerpo grande)
• 25 (h4, título pequeño)
• 31 (h3, título medio)
• 39 (h2, título grande)
• 49 (h1, título de página)
• 61 (imagen principal, héroe)

Nueve pasos. Ese es el producto completo. Algunos productos usan siete u ocho, otros llegan a diez, pero a partir de diez la escala se reduce y aparecen tamaños que nadie usa.

Ahora, nómbralos. No "texto-31" ni "39px". Nómbralos según su función: leyenda, pequeño, cuerpo, encabezado, h4, h3, h2, h1, imagen principal. Los nombres de las funciones son el acuerdo con el departamento de ingeniería, no los valores en píxeles. El valor en píxeles puede cambiar si la base o la proporción cambian, pero la función permanece igual. h1 siempre es el título más grande. El cuerpo siempre es la base. El pie de foto siempre es el texto legible más pequeño.

Esto es lo que convierte una escala en un sistema en lugar de una hoja de cálculo. Un diseñador dice "esto es el cuerpo" y un ingeniero entrega texto-cuerpo. Si la escala cambia el próximo trimestre, cuerpo sigue siendo cuerpo, y cada componente adopta el nuevo valor automáticamente. Nadie tiene que buscar cada 16 en el código fuente y cambiarlo a 17.

Material Design 3 entrega su escala nombrada por rol: display, headline, title, label, body, con variantes de tamaño (grande, mediano, pequeño) dentro de cada una. La escala HIG de Apple entrega Título grande, Título 1, Título 2, Título 3, Headline, Body, Callout, Subhead, Footnote, Caption 1, Caption 2. Tailwind entrega texto-xs a texto-9xl, que es un sistema de tallas de camisetas en lugar de nombres de roles, y es el único aspecto en el que las configuraciones predeterminadas de Tailwind son posiblemente más débiles que las de Material Design. La mayoría de los equipos que adoptan Tailwind terminan añadiendo alias con nombres de roles a las clases de camisetas.

Traducir la escala a tokens de diseño

Los tokens transforman la escala, que antes era una hoja de cálculo del diseñador, en el contrato del equipo.

Fichas de diseño son valores con nombre que representan decisiones de diseño. Para una escala tipográfica, se necesitan tres capas:

1. Tokens sin procesar. Los valores de tamaño reales. font-size-100, font-size-200, etc., o con nombres como font-size-body, font-size-h1. Estos son la fuente de información principal.

2. Tokens semánticos. Alias ​​que expresan la intención. text-heading-page, text-body-default, text-caption. Los tokens semánticos hacen referencia a los tokens sin procesar. Los componentes utilizan tokens semánticos, nunca tokens sin procesar directamente.

3. Tokens de componente. Enlaces dentro de componentes específicos. card-title-size apunta a text-heading-card, que a su vez apunta a font-size-200. Los tokens de componente permiten realizar anulaciones por componente sin afectar al sistema.

Un archivo de token JSON mínimo para una escala de 16 bases y 1,25 de relación:

{
  "font-size": {
    "raw": {
      "100": { "value": "0.625rem" },
      "200": { "value": "0.8125rem" },
      "300": { "value": "1rem" },
      "400": { "value": "1.25rem" },
      "500": { "value": "1.5625rem" },
      "600": { "value": "1.9375rem" },
      "700": { "value": "2.4375rem" },
      "800": { "value": "3.0625rem" },
      "900": { "value": "3.8125rem" }
    },
    "semantic": {
      "caption":  { "value": "{font-size.raw.100}" },
      "small":    { "value": "{font-size.raw.200}" },
      "body":     { "value": "{font-size.raw.300}" },
      "lead":     { "value": "{font-size.raw.400}" },
      "h4":       { "value": "{font-size.raw.500}" },
      "h3":       { "value": "{font-size.raw.600}" },
      "h2":       { "value": "{font-size.raw.700}" },
      "h1":       { "value": "{font-size.raw.800}" },
      "display":  { "value": "{font-size.raw.900}" }
    }
  }
}

Esta estructura es portable. Style Dictionary, Tokens Studio, Specify y Supernova leen este formato y generan variables Figma, variables CSS, configuración de Tailwind, constantes Swift para iOS, XML para Android, o cualquier otro recurso que necesiten las plataformas. Los tokens son la fuente. Todo lo demás se genera automáticamente.

Enviar la escala a las variables Figma

Las variables Figma son donde reside la escala para el equipo de diseño, estructurada como una única colección tipográfica con alias semánticos.

Crea una colección de variables llamada Tipografía. Dentro de ella, agrega una variable numérica para cada tamaño original: size/100 a size/900, con los valores de píxeles equivalentes en rem (10, 13, 16, 20, 25, 31, 39, 49, 61). Luego, añade un segundo nivel de alias: text/caption, text/small, text/body, text/lead, text/h4, text/h3, text/h2, text/h1, text/display. Cada alias apunta a una variable de tamaño sin procesar.

A continuación, crea estilos de texto, uno por rol. Heading/H1 utiliza text/h1 para el tamaño, la tipografía del encabezado para la familia, el grosor del encabezado para el peso y la relación de interlineado del encabezado para el interlineado. Body/Default utiliza text/body, la tipografía del cuerpo y el grosor normal. Repite el proceso para cada rol.

La disciplina consiste en que los diseñadores creen interfaces usando estilos de texto, no introduciendo tamaños de fuente en el inspector. Una vez que un equipo adopta esta disciplina, la escala se aplica automáticamente. Cualquiera que establezca un tamaño personalizado debe romper el patrón visiblemente, y esa visibilidad es la clave.

Combina esto con una configuración de Modos si admites varios modos de densidad. Un modo "compacto" puede anular las variables de tamaño originales para usar una relación de 1.125 y lograr una experiencia más densa. Un modo "cómodo" puede usar 1.25. Los alias se mantienen. Los componentes no cambian. La escala simplemente se ajusta debajo de ellos. Eso es lo que ofrece el sistema.

Integrar la escala en Tailwind CSS

La configuración de Tailwind es donde reside la escala para el equipo de ingeniería, y debe reflejar exactamente la estructura de variables de Figma.

Reemplaza el valor predeterminado de Tailwind, fontSize, con tu escala, en tailwind.config.js:

module.exports = {
  theme: {
    fontSize: {
      'caption':  ['0.625rem',  { lineHeight: '1rem' }],
      'small':    ['0.8125rem', { lineHeight: '1.25rem' }],
      'body':     ['1rem',      { lineHeight: '1.5rem' }],
      'lead':     ['1.25rem',   { lineHeight: '1.75rem' }],
      'h4':       ['1.5625rem', { lineHeight: '2rem' }],
      'h3':       ['1.9375rem', { lineHeight: '2.375rem' }],
      'h2':       ['2.4375rem', { lineHeight: '2.875rem' }],
      'h1':       ['3.0625rem', { lineHeight: '3.5rem' }],
      'display':  ['3.8125rem', { lineHeight: '4.25rem' }],
    },
  },
}

Ahora, text-h1 en el marcado significa lo mismo que Heading/H1 en Figma. El nombre de la clase es el contrato. Los ingenieros no eligen tamaños, sino roles, y el rol se resuelve al valor de píxeles correcto en tiempo de compilación.

Las alturas de línea aquí no son arbitrarias. El patrón es: altura de línea ajustada para el cuerpo en tamaños pequeños, interlineado más amplio para el cuerpo y el encabezado, y nuevamente interlineado ajustado para los encabezados. Una regla común es altura de línea de 1.5 para el cuerpo, altura de línea de 1.1 a 1.2 para los encabezados, con una transición de 1.3 a 1.4 alrededor de los tamaños de encabezado y h4. Puedes expresar esto como otra escala (una escala de interlineado) o como valores por paso, pero la relación entre tamaño e interlineado debe ser deliberada, no a ojo.

Si quieres mantener las clases predeterminadas de Tailwind disponibles junto con tu escala (para código heredado o componentes de terceros), usa extend en lugar de reemplazar fontSize directamente. Pero el objetivo a largo plazo es una sola escala, no dos. Dos escalas tipográficas en el mismo producto equivalen a una sola escala tipográfica y un montón de errores.

Combina la escala con un guía de combinación de fuentes real para la selección de tipografías y un marco sistema de diseño que contextualice la escala. La escala es una parte del sistema tipográfico; la selección de tipografías y la asignación de roles son las otras partes. ¿Necesitas una escala funcional, tokens reales y Figma + Tailwind configurado correctamente desde el primer día? Contratar Brainy. Distribuimos sistemas de tipos completos a través de BrandBrainy y UXBrainy, con los tokens, las variables Figma y la configuración de Tailwind integrados en una sola entrega.

Las reglas de gobernanza que mantienen viva una escala

Todas las escalas de tipos obsoletas mueren de la misma manera: por excepción.

Tres reglas mantendrán viva una escala más tiempo que cualquier herramienta:

Regla uno: cada nuevo componente elige roles, no tamaños. Un diseñador que crea una tarjeta elige Body para el cuerpo, H3 para el título y Caption para la marca de tiempo. No escribe font-size: 18px en el inspector. Si el rol no existe, propone un nuevo rol a través del sistema, no una anulación puntual.

Regla dos: las excepciones tienen nombre y fecha. Si el equipo de marketing necesita un titular de 72 px para un elemento principal en una página de campaña y el tamaño de visualización es de 61 px, la excepción se nombra (hero-marketing-q3-launch) y se fecha. Una vez lanzada la campaña, la excepción se integra a la escala (si es reutilizable) o se elimina (si fue un caso aislado). No se permiten anulaciones anónimas.

Regla tres: la escala se revisa trimestralmente, no anualmente. Trimestralmente es un plazo lo suficientemente corto como para detectar desviaciones cuando aún son pequeñas. Anualmente es demasiado largo, ya que todos los equipos han trabajado en torno a las deficiencias y corregirlas se convierte en un proyecto. La revisión trimestral dura quince minutos. La revisión anual implica un rediseño.

Los equipos que pierden su escala tipográfica siempre cuentan la misma historia después. Alguien necesitaba un tamaño de 17 px para un botón, otro necesitaba uno de 21 px para un banner, y seis meses después hay cuarenta y siete tamaños de fuente en el código y nadie sabe cuáles son los reales. La escala desaparece. Lo que queda es un cementerio de tamaños de fuente.

Esto se evita tratando la escala como un contrato, no como una hoja de cálculo. El contrato se aplica mediante herramientas (estilos de Figma, clases de Tailwind, reglas de lint) y mediante revisiones. El contrato se renegocia en la revisión trimestral. Cualquier cosa que no esté contemplada en el contrato se considera un error.

Preguntas frecuentes

¿Qué es una escala tipográfica modular?

Una escala tipográfica modular es un sistema donde cada tamaño de fuente en un producto se genera aplicando una única proporción a un único tamaño base. Elija una base, generalmente 16 píxeles para la web, elija una proporción, generalmente entre 1,125 y 1,618, y multiplique o divida la base por la proporción repetidamente para generar los pasos. El resultado es una escala donde cada tamaño está matemáticamente relacionado con todos los demás, lo que le da a la tipografía una coherencia interna que las elecciones arbitrarias de píxeles no pueden proporcionar.

¿Qué proporción debo usar para mi escala tipográfica?

Elija la proporción según la densidad que requiera su producto. Use 1,125 o 1,2 para productos con gran cantidad de datos, como paneles de control y herramientas de administración, donde los encabezados no deben desviar la atención de los datos. Utilice 1.25 o 1.333 para páginas de marketing SaaS estándar, sitios de contenido y páginas de productos, donde se encuentran la mayoría de los productos B2B. Utilice 1.414 o 1.618 para productos editoriales, revistas o con gran presencia de display, donde los titulares deben tener un aspecto impactante. El error más común es elegir una proporción porque suena impresionante en lugar de porque se ajusta al producto.

¿Cuántos tamaños debe tener una escala tipográfica?

La mayoría de las escalas listas para producción tienen entre siete y nueve tamaños. Los tamaños de título, pequeño, cuerpo, encabezado, h4, h3, h2, h1 y display cubren prácticamente todas las superficies de un producto real. Usar menos de siete tamaños deja huecos que los diseñadores rellenarán con modificaciones puntuales. Usar más de diez tamaños reduce la escala hasta el punto de que algunos tamaños nunca se utilizan y el sistema se vuelve más difícil de mantener. Entre siete y nueve es el punto óptimo, y los nombres de los roles deben describir la función de cada tamaño, no su valor en píxeles.

¿Debo usar rem o px para los valores de la escala tipográfica?

Para la web, utilice rem. El tamaño de fuente raíz del navegador es de 16 píxeles por defecto, pero el usuario puede cambiarlo mediante la configuración de accesibilidad y las preferencias del navegador. Una escala basada en rem respeta automáticamente estas preferencias, mientras que las escalas basadas en píxeles las ignoran. Tailwind, Material Design y la mayoría de los sistemas de diseño modernos utilizan rem por este motivo. Para plataformas móviles, siga las especificaciones de la plataforma: iOS utiliza puntos y admite tipografía dinámica, mientras que Android utiliza píxeles independientes de la escala (sp). El principio es el mismo: utilice la unidad relativa de la plataforma, no las absolutas.

¿Cuál es la diferencia entre una escala tipográfica modular y los tokens de diseño?

Una escala tipográfica modular se basa en las matemáticas; los tokens de diseño son la forma en que se implementan dichas matemáticas. La escala define los valores (10, 13, 16, 20, 25, 31, 39, 49, 61). Los tokens son la capa con nombre que permite al resto del sistema de diseño hacer referencia a esos valores sin necesidad de codificarlos directamente. Puedes tener una escala sin tokens, pero no sobrevivirá en un código real. Puedes tener tokens sin una escala, pero los valores serán arbitrarios. El sistema completo es la escala expresada como tokens, con capas de datos brutos, semánticos y de componentes, y distribuida a Figma y al código a través de la misma fuente.

El patrón que la mayoría de las escalas tipográficas pasan por alto

Una escala tipográfica no es una lista de tamaños de fuente, sino un contrato sobre cómo el texto adquiere jerarquía en tu producto.

Los equipos que lo hacen bien no eligen una proporción y se detienen ahí. Eligen una proporción, construyen la escala, la distribuyen como tokens, la integran en Figma y Tailwind, y luego la hacen cumplir mediante una revisión trimestral y una regla estricta sin excepciones. La escala no es el entregable, sino la disciplina. El entregable es lo que hace posible la disciplina.

Los equipos que se equivocan tratan la escala como un simple moodboard. Seleccionan proporciones atractivas en un prototipo de Pinterest, envían un documento de especificaciones estático y, seis meses después, descubren que el equipo de ingeniería nunca lo adoptó porque el documento no era código ejecutable. O bien, implementan la escala en Figma pero nunca en Tailwind, y los archivos de diseño y la aplicación de producción se desvinculan hasta convertirse en dos productos distintos con tipografías diferentes. O bien, la implementan en ambos y no la gestionan, y en un año las excepciones superan a las reglas.

La solución más sencilla es tratar la escala como un contrato desde el primer día. Las fórmulas matemáticas definen los pasos. Los tokens hacen que los pasos sean implementables. Las variables de Figma y la configuración de Tailwind permiten que los pasos sean utilizables en ambos lados de la línea diseño-ingeniería. La gestión mantiene los pasos vigentes después del lanzamiento. Cada parte del sistema cumple una función específica, y el sistema falla si alguna de ellas no lo hace.

Si desea una escala de tipos modular funcional, tokens reales, variables Figma reales, configuración real de Tailwind y un plan de gobernanza que mantenga la escala unida después del lanzamiento, contratar Brainy. Entregamos sistemas de diseño completos a través de BrandBrainy y UXBrainy, con escalas de tipos diseñadas como tokens desde el primer día, el sistema tipográfico conectado al paleta de colores de la marca y las reglas que mantienen el sistema vivo una vez que el equipo realiza el lanzamiento.