Ferramenta gera escalas tipográficas e exporta CSS

Ferramenta de escalas tipográficas

O Type Scale Tool, criado por Adonis Raul Raduca, é uma ferramenta para criar escalas tipográficas precisas e exportá-las como CSS ou CSV, voltada para designers e desenvolvedores que trabalham de aplicativos de negócios complexos a sites de consumo.

Configuração da escala

A base do funcionamento são os Base Values: entradas de Font Size, Line Height e Letter Spacing que guiam o cálculo de toda a escala. O usuário escolhe uma Scale para definir a relação entre os diferentes tamanhos de fonte, com opções inspiradas em intervalos musicais, como Major Third e Perfect Fifth, além de uma opção chamada Equal Tempered Piano.

A ferramenta também oferece um Line Grid em pixels que restringe os line heights a múltiplos de uma unidade. Com grid de 4px, por exemplo, todos os line heights são arredondados ao múltiplo de 4 mais próximo; definir o valor como 1px desativa o arredondamento.

Modular e metric scales

O Modular Type Scale visa trazer ritmo, consistência e equilíbrio aos designs. A ferramenta sugere escalas pequenas para produtos focados em negócios, médias para produtos de consumo e websites, e grandes para declarações visuais mais ousadas. Como referência, cita o Material Design, sistema de design conhecido que usa tipografia com Modular Scale.

A página também menciona a abordagem Metric Type Scale e modelos separados para font size, line height e letter spacing, além de seções de Models com os cálculos.

Histórico

A fonte situa a popularização das escalas tipográficas no trabalho de Tim Brown sobre Modular Scale, que teria estabelecido um novo padrão para tipografia na web. A ferramenta se apresenta como um passo além do tamanho de fonte, oferecendo um sistema completo de design a implementação.

Visualização e exportação

A ferramenta inclui Type Scale Charts, que mostram a evolução de font sizes, line heights e letter spacing pela escala - com aumento do tamanho da fonte, aumento do line height e diminuição do letter spacing ao longo dos passos. Os valores podem ser visualizados em múltiplas unidades: px, rem, ratio, % e em, permitindo comparação entre formatos.

O usuário pode adicionar ou remover passos da escala, ajustar o espaçamento entre opções Tight, Medium e Wide, resetar a escala e a fonte, e escolher fontes do Google Fonts com variante de caps. A exportação é feita via Get CSS ou Get CSV.