Gerador de escala tipográfica
Type Scale Generator
Monta uma escala modular de tipos e espaçamentos a partir de um tamanho base e uma razão, exportada como CSS ou tokens.
Constrói uma escala tipográfica modular a partir de um tamanho-base e uma razão, e mostra cada passo no seu tamanho real com os números que importam ao lado: rem, altura de linha, tracking e — o que decide se um tamanho é utilizável para texto corrido — quantos caracteres cabem em uma linha na largura da sua coluna. Ela deriva uma escala de espaçamento da mesma razão, ajustada a uma grade de 4px.
Escala
Proporção: 1.25
Espaçamento da mesma proporção
- space-14px
- space-24px
- space-38px
- space-48px
- space-58px
- space-612px
- space-716px
- space-820px
Encaixado numa grade de 4px — a grade que quase todo sistema de design já tem, e um vão de 13px do lado de um de 12px é ruído.
Prévia
À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso
À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso
À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso
À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso
À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso
À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso
À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso
À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso
À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso
O verde marca de 45 a 75 caracteres por linha — a faixa de Bringhurst para texto latino, da qual o hangul, escrito com espaços, está mais perto do que o CJK de largura inteira.
Exportar
Quer que algum destes tamanhos acompanhe a viewport em vez de ir em degraus? A calculadora de tamanho fluido transforma dois deles num único clamp().
Como usar
Defina o tamanho-base
O tamanho do texto do corpo, quase sempre 16px. Todo o resto é isto multiplicado ou dividido pela razão, então acertá-lo primeiro evita ter de reescolher a razão depois.
Escolha a razão — esta é a decisão
Uma segunda maior (1,125) é o padrão seguro para interfaces: oito passos ainda caem em uma faixa sensata. Uma quarta justa (1,333) é editorial — três passos acima de 16px já são 38px. A proporção áurea é famosa e íngreme demais para texto de interface. Cada predefinição diz para que serve; escolha pela faixa de que precisa, não pelo nome.
Decida quantos passos, e se arredonda
Passos para baixo são para legendas e rótulos; passos para cima, para títulos. Exato mantém a geometria e lhe dá pixels fracionários; arredondamento de 1px ou 2px dá números que uma pessoa consegue guardar na cabeça e quebra a razão ligeiramente. Arredondar é a escolha habitual, e o valor exato continua sendo mostrado ao lado de cada arredondado.
Defina a largura da coluna e leia as contagens de caracteres
Digite a largura da coluna em que este texto realmente fica. O número mais à direita em cada linha é caracteres por linha naquela largura, e ele fica verde entre 45 e 75 — a faixa com evidência real por trás para texto corrido. Um tamanho que se lê bem isolado e dá 110 caracteres por linha é o tamanho errado para texto de corpo.
Exporte os tokens
Variáveis CSS, um bloco de tema do Tailwind, SCSS ou JSON. A escala de espaçamento sai junto, então uma colagem cobre as duas.
Perguntas frequentes
A prévia está mostrando a minha fonte de verdade?
Não — ela renderiza na fonte desta página. Os tamanhos, as alturas de linha e o tracking são reais, mas uma fonte diferente tem uma altura de x diferente, e a altura de x é o que realmente decide quão grande 16px parece. Trate a prévia como uma verificação de proporção, e confirme o tamanho-base no seu próprio produto.
Devo usar a escala inteira?
Não, e gerar onze passos não é motivo para usar onze. A maioria das interfaces precisa de quatro ou cinco tamanhos. Os passos extras existem para que você veja aonde a razão vai, e para que um tamanho raramente necessário tenha um valor definido em vez de ser inventado na hora.
De onde vêm as alturas de linha e o tracking?
De uma regra, não da sua fonte: a altura de linha cai conforme o tamanho cresce, o tracking aperta nos passos grandes e afrouxa ligeiramente nos pequenos. É o ponto de partida convencional e acerta com frequência suficiente para ser útil, mas uma fonte condensada ou uma fonte coreana com blocos silábicos altos vão querer números diferentes. Ajuste depois de olhar.
Por que a escala de espaçamento é ajustada a 4px e a escala tipográfica não?
Porque o olho as lê de forma diferente. Um título de 17px ao lado de um de 18px é uma hierarquia; um gap de 13px ao lado de um de 12px é ruído, e é o tipo de ruído que sobrevive à revisão e depois é copiado. Quase todo design system já tem uma grade de 4px, então a escala de espaçamento a encontra ali.
Pode receber de
Calculadora de tamanho fluido
Fluid Size Calculator
Calcula uma expressão clamp() que escala um tamanho suavemente entre duas larguras de viewport.
Combinação de fontes
Font Pairing
Sugere pares de fonte para título e texto a partir de pilhas de fontes do sistema, com prévia usando seu próprio texto em coreano e inglês, e entrega o CSS.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Calculadora de tamanho fluido
Fluid Size Calculator
Calcula uma expressão clamp() que escala um tamanho suavemente entre duas larguras de viewport.
Extrator de tokens CSS
CSS Token Extractor
Extrai cores, espaçamentos, raios e fontes de uma folha de estilo e propõe um conjunto de propriedades personalizadas.
Combinação de fontes
Font Pairing
Sugere pares de fonte para título e texto a partir de pilhas de fontes do sistema, com prévia usando seu próprio texto em coreano e inglês, e entrega o CSS.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Verificador de contraste
Contrast Checker
Pontua um par de cores de texto e fundo contra WCAG 2 e APCA e sugere a cor aprovada mais próxima.