Contenido del curso
Escalas tipográficas con proporción áurea
Las escalas tipográficas son la base para que tus diseños se vean armónicos sin tener que adivinar cada tamaño de letra. Aquí entenderás qué es una escala, cómo se calcula el radio entre tamaños y cómo aplicarlo en Figma para construir un sistema de diseño coherente.
¿Qué es una escala tipográfica y por qué importa?
Una escala tipográfica es una proporción matemática que define la distancia entre un tamaño de letra y el siguiente. En lugar de elegir tamaños al azar para tu H1, H2 o H3, partes de una base y multiplicas por un radio constante. Así, todo el sistema visual se siente armónico.
Esa proporción no se inventa: viene de secuencias que existen en la naturaleza, en la música o en la arquitectura. Ya hubo pensadores que se encargaron de definir esos números perfectos que generan la ilusión de armonía [0:50].
¿Qué es una escala tipográfica? Es una proporción que multiplica un tamaño base por un radio fijo para generar todos los demás tamaños de letra de un diseño de forma armónica.
¿Cómo se calcula el radio entre dos tamaños de letra?
La lógica es una regla matemática sencilla. Si tu base son 12 puntos y el siguiente tamaño es 19.416, planteas la ecuación: 12 × X = 19.416. Despejas X dividiendo 19.416 entre 12 y obtienes 1.618 [2:30].
Ese número no es casualidad. Es la proporción áurea, una relación que aparece una y otra vez en la naturaleza y que genera composiciones visualmente equilibradas. Cuéntame en los comentarios dónde has escuchado hablar de la proporción áurea.
Una vez tienes el radio, el resto fluye solo:
Esto te libera de pensar caso por caso qué tan grande debe ser cada heading. La proporción decide por ti.
¿Qué escalas tipográficas musicales existen y cómo se usan?
Además de la proporción áurea, en diseño se usan escalas derivadas de intervalos musicales. Una tercera menor, por ejemplo, corresponde a una relación de frecuencia de 6/5, lo que se traduce en un radio de 1.2 [4:30].
Estas son algunas de las más populares para tipografía:
La elección depende del contraste que quieras. Una escala más pequeña como 1.125 da diferencias sutiles entre tamaños; una más grande como 1.618 genera jerarquías muy marcadas.
¿Cómo generar una escala tipográfica sin hacer cálculos manuales?
No necesitas calculadora. Existe una herramienta web llamada Type Scale que automatiza todo el proceso [5:30]. Solo defines dos cosas:
La herramienta te devuelve la lista completa de tamaños listos para usar en tu sistema. A nivel visual el resultado se ve limpio: la letra más grande no compite con el resto, todo respira en proporción.
¿Cuál es el tamaño base ideal para una escala tipográfica web? Lo más habitual es 16 px, que equivale a 1 rem y es el tamaño por defecto de los navegadores. Puedes bajarlo a 12 px o ajustarlo según tu diseño.
¿Hay un plugin de escalas tipográficas para Figma?
Sí. En Figma puedes instalar un plugin llamado Type Scales que replica el mismo flujo: defines la base, eliges la escala y obtienes los tamaños listos para aplicar [6:35]. ¿Conoces otros plugins similares? Déjalos en los comentarios.
¿Cómo organizar los foundations de tipografía en Figma?
Para empezar tu sistema de diseño en Figma, crea un nuevo team y nómbralo, por ejemplo, Design System. En el plan Basic gratuito puedes trabajar sin problema; el plan pago es solo necesario más adelante para publicar componentes [7:50].
Dentro del team, crea tu primer archivo y renombra la página inicial como Foundations. Ahí montarás un frame con todas las escalas tipográficas del proyecto.
¿Qué son los múltiplos de 4 en diseño? Son una regla de oro que consiste en usar tamaños y espaciados que sean múltiplos de 4 px. Genera consistencia visual y encaja bien con grids y pantallas.
En este caso, la escala usada para el proyecto no sigue una proporción musical ni áurea, sino múltiplos de 4 [9:25], adaptados al tamaño del sistema:
La razón es práctica: el sistema no es muy grande y estos seis tamaños cubren todas las necesidades. La regla real es esta: escoge la escala que tu proyecto necesite, no la que esté de moda. Lo importante es que exista una proporción detrás y que la respetes en todo el diseño.
