EXPERIMENTO · 2025
Typeset.
Um playground interativo de tipografia
Contexto
Decisões de tipografia normalmente acontecem em mockups estáticos, amostradas num tamanho e num peso. As relações que importam de verdade — como uma escala fluida se comporta em larguras reais, como duas fontes se pareiam em tamanho de parágrafo — ficam invisíveis até a implementação, quando mudar é mais caro.
O problema
Renderizar dezenas de amostras de texto vivas no DOM a framerate interativo é um problema de performance; compartilhar uma descoberta sem contas nem armazenamento é um problema de produto.
Meu papel
Conceito, design e desenvolvimento.
O que tornou tecnicamente interessante
Dúzias de amostras de texto atualizando por frame travam o layout no DOM — os previews precisavam manter 60fps usando arquivos reais de fonte.
Uma escala fluida é uma função da largura da viewport; mostrar um número esconde a curva que decide se ela funciona.
A ferramenta precisava ser compartilhável com zero backend, zero contas e zero armazenamento.
Decisões
- Canvas em vez de DOM nos previews
- Dúzias de amostras vivas atualizando por frame travam o layout no DOM. Renderização em canvas mantém a interação a 60fps com o texto vindo de fontes reais.
- A URL é o botão de salvar
- O estado inteiro serializa na query string — compartilhar uma descoberta não custa nada e a ferramenta não precisa de contas nem backend.
Resultado
- Uma ferramenta que eu uso em todo projeto onde tipografia faz parte da interface.
- Uma demonstração pública de que design de interação e tipografia são disciplinas de engenharia, não decoração.
O que eu aprendi
Construa a ferramenta que seu julgamento precisa. Nada ensina um ofício mais rápido do que torná-lo mensurável.
Tem um projeto nesse espaço?
Vamos conversar sobre isso