Typography Editor

El editor tipográfico ofrece un entorno de pruebas en vivo para propiedades de fuente y salida CSS. Diseñadores y desarrolladores frontend lo utilizan para probar elecciones de font-family, pesos, tamaños, interlineado y espaciado de letras, y comparar resultados en diferentes puntos de quiebre. Las entradas se mapean a reglas tipográficas y se genera una vista previa fiel, permitiendo ajustes precisos antes de integrar la tipografía en una UI de producto.

Conceptualmente, la herramienta convierte las selecciones del usuario en reglas CSS estándar y tokens. Soporta unidades px y rem, convierte tamaños usando una fuente raíz y genera un bloque CSS más una configuración JSON estructurada para sistemas de diseño. También admite font-variation-settings para fuentes variables.

¿Quién se beneficia? Diseñadores UI, ingenieros frontend y estrategas de contenido que buscan consistencia tipográfica entre plataformas. Su valor único reside en el determinismo (unidades, escalas y fallbacks) y en la posibilidad de exportar, reduciendo la brecha entre diseño e implementación y permitiendo experimentación rápida con escalas y espaciados tipográficos. Funciones clave: grupos de entrada para font-family, peso, tamaño, line-height y letter-spacing; soporte opcional de URL de fuente; vista previa en vivo; exportación CSS; exportación de tokens JSON; presets responsivos para breakpoints comunes. Casos de uso: paneles de producto, sitios de marketing, páginas de productos de comercio electrónico y portales de documentación.