Typography Editor

O Typography Editor oferece um playground ao vivo para propriedades de fonte e saída CSS. Designers e desenvolvedores frontend usam-no para testar escolhas de font-family, pesos, tamanhos, height-line e letter-spacing, e comparar resultados em diferentes breakpoints. as entradas são mapeadas para regras tipográficas e gera uma visualização fiel que permite ajustes precisos antes de integrar a tipografia em uma UI de produto.

Conceitualmente, a ferramenta converte as seleções do usuário em regras CSS padrão e tokens. Suporta unidades px e rem, converte tamanhos com base em um tamanho de fonte raiz e gera um bloco CSS mais uma configuração JSON estruturada para design systems. Suporta ainda font-variation-settings para fontes variáveis.

Quem se beneficia? UI designers, engenheiros frontend e estrategistas de conteúdo que buscam tipografia consistente em todas as plataformas. Valor único: determinismo (unidades, escalas e fallback) e exportabilidade, reduzindo a lacuna entre design e implementação e permitindo experimentação rápida com escalas e espaçamento tipográficos. Principais recursos: blocos de entrada para font-family, peso, tamanho, line-height e letter-spacing; suporte opcional a URL de fonte; visualização ao vivo; exportação CSS; exportação de tokens JSON; presets responsivos opcionais para breakpoints comuns. Casos de uso: painéis de produtos, sites de marketing, páginas de produtos de e-commerce e portais de documentação.