Lección 2: Escala de tipografía y espaciado — ritmo visual desde un sistema
Un diseñador te entrega un mockup con 11 tamaños de fuente distintos y 7 valores de espaciado al azar. Sin una escala, cada pantalla se ve un poco desalineada. Esta lección te enseña a definir una `type scale` y una `spacing scale` como tokens en `tailwind.config.ts` — pasos fijos que crean ritmo vi
Una escala es como los talles de zapatos: hay un conjunto fijo de pasos que todos comparten, en vez de medir cada pie en milímetros al azar. Así es como todos los pares terminan combinando.
- type scale
- Un conjunto definido de tamaños de fuente que sube en una proporción fija — por ejemplo `sm`, `base`, `lg`, `xl` — así cada texto se elige de un pequeño conjunto de pasos en vez de un tamaño libre.
- spacing scale
- Un conjunto de tokens de espaciado construido sobre una unidad base (normalmente 4px) — `1`, `2`, `4` — que alimenta el padding, el margin y el gap para que cada espacio de la UI se alinee a la misma grilla.
- modular scale
- Una escala donde cada paso es el anterior multiplicado por una proporción fija (por ejemplo, 1.25) — dándole a la tipografía una progresión armoniosa en vez de saltos aleatorios.
- base unit
- El número pequeño del que cada valor de espaciado es múltiplo — normalmente 4px u 8px — así cada valor de la grilla se divide por él y ningún espacio queda 'entre' los pasos.
