La vista Tipografía
Un espécimen en vivo — titular, entradilla, cuerpo, listas, formularios — donde cada tamaño de fuente es un paso de la escala y cada interlineado se apoya en la rejilla de línea base. No escribes tamaños; seleccionas un elemento y lo desplazas por la escala.
La barra de herramientas
- Base: Fija / Fluida — la fija usa la escala tal cual; la fluida interpola la base entre dos anchos de viewport (más abajo).
- Fuentes de titular / cuerpo — pila del sistema por defecto, o elige de una lista curada de Google Fonts; los espacios de titular y cuerpo son independientes.
- Unidad CSS — rem o px. La escala se define contra la base en cualquier caso; rem la mantiene sensible a las preferencias del usuario.
- Línea base — muestra la unidad de línea base derivada con su derivación
explícita:
8px (16/2). La línea base es base ÷ 2, fijada por la escala — la vista de rejilla la muestra pero no la posee. - Rejilla — superpone la rejilla de columnas del breakpoint más grande como un espejo de solo lectura (la vista Rejilla es la única dueña de las columnas).
Trabajar en el espécimen
Haz clic en un bloque para seleccionarlo, doble clic para editar su texto. Luego:
- ↑ / ↓ — desplaza el tamaño de fuente por la escala.
- ← / → — desplaza el interlineado en incrementos de media línea base.
- Shift+B — alterna la trama de línea base detrás del espécimen.
- Shift+G — alterna la superposición de columnas.
Los elementos del mismo tipo en la misma fila comparten su tamaño — ajusta el encabezado de una columna y sus hermanos lo siguen. El texto del espécimen es contenido: edítalo libremente, y los cambios de idioma no lo sobrescribirán.
La tarjeta de escala
La barra lateral lista la escala generada completa con valores en rem; las marcas de verificación señalan los niveles que el espécimen usa realmente. Es la misma lista que contendrán tus exportaciones — el espécimen es una vista previa de los tokens, no un artefacto aparte.
Modo fluido
El modo fluido interpola la base entre un viewport mínimo y uno máximo (por
defecto 16→18px de 375→1280). Cada valor de la escala se convierte en una
expresión CSS clamp(); la barra de viewport te deja recorrer la vista previa
por todo el rango, con los breakpoints de la rejilla marcados como puntos de
salto. Las guías de tipografía fluida cubren cuándo
vale la pena lo fluido y cómo funciona la matemática.
Zoom
El control de zoom flotante escala la vista previa — ajustar, o 50–150 %. Es una lente sobre el banco de trabajo: el zoom nunca toca tus valores ni la exportación.