Gerador de escala tipográfica com CSS fluido em clamp() | We.Inc
Gere uma escala tipográfica modular a partir de um tamanho base e uma proporção, com valores fluidos em clamp() para cada nível, uma prévia ao vivo e variáveis CSS ou Tailwind para copiar.
Gerador de escala tipográfica
Uma escala tipográfica multiplica um tamanho de fonte base pela mesma proporção várias vezes, para que cada tamanho de título se relacione com o texto do corpo. Escolha uma base e uma proporção para celulares e outras para desktops; este gerador transforma cada nível em um valor clamp() em rem e vw que cresce suavemente entre as duas larguras.
Proporções comuns e para que servem
Proporção
Valor
Sensação
Segunda menor
Apps densos, dashboards
Segunda maior
Apps densos, dashboards
Terça menor
Artigos, páginas de marketing
Terça maior
Artigos, páginas de marketing
Quarta justa
Artigos, páginas de marketing
Quarta aumentada
Pôsteres, landing pages ousadas
Quinta justa
Pôsteres, landing pages ousadas
Proporção áurea
Pôsteres, landing pages ousadas
A maioria das ferramentas de escala tipográfica gera um único conjunto fixo de tamanhos. Esta gera dois, uma escala para telas pequenas e outra para telas grandes, e une as duas com clamp() para você publicar uma única regra por nível em vez de um monte de media queries.
Por que duas proporções
Uma proporção que parece generosa em um monitor de 1440 pixels faz os títulos quebrarem em quatro linhas no celular. Usar uma proporção mais contida em telas pequenas, como 1.2, e uma mais ampla em telas grandes, como 1.25 ou 1.333, mantém os títulos fortes no desktop e legíveis no mobile.
Os níveis abaixo de zero funcionam do mesmo jeito ao contrário: a base é dividida pela proporção, o que gera tamanhos de legenda e letras miúdas que continuam proporcionais.
Como os valores de clamp() são calculados
Para cada nível, a ferramenta sabe o tamanho na largura pequena e na largura grande. Ela traça uma reta entre esses dois pontos: a inclinação vira a parte em vw e o deslocamento inicial vira a parte em rem do valor preferido.
Então clamp(min, preferred, max) mantém o tamanho no mínimo abaixo da largura pequena e no máximo acima da largura grande. Misturar rem no valor preferido é importante: um tamanho só em vw ignora o zoom do navegador, enquanto a parte em rem continua crescendo quando alguém aumenta o zoom.
O MDN recomenda que, quando clamp() define o tamanho do texto, o máximo seja pelo menos o dobro do mínimo para que o texto chegue a 200 por cento de zoom, o nível de redimensionamento do WCAG 1.4.4. Uma faixa fluida modesta não atinge isso sozinha, então teste seus maiores níveis com o zoom do navegador em 200 por cento.
Defina o tamanho de fonte raiz (16, a menos que o seu CSS mude o tamanho do html) e as larguras de viewport estreita e larga.
Escolha um tamanho base e uma proporção para cada extremo. Valores iguais geram uma escala fixa; valores diferentes geram uma escala fluida.
Escolha quantos níveis acima e abaixo da base você precisa. A maioria dos sites usa quatro ou cinco acima e um ou dois abaixo.
Arraste o controle de largura da prévia para ver cada nível em qualquer tamanho de tela e depois copie as variáveis CSS ou o bloco de tema do Tailwind.
Comece o texto do corpo com 16 a 18 pixels; abaixo disso a leitura longa no celular fica prejudicada.
Reduza a altura da linha conforme o tamanho cresce: cerca de 1.5 para o texto do corpo e 1.1 a 1.2 para títulos grandes fica equilibrado.
Raramente você precisa de mais de seis níveis. Se dois níveis parecem quase iguais na prévia, remova um.
Nomeie as variáveis pelo nível, não pelo elemento (step-3 em vez de h2), para que o título de um card possa usar um tamanho de título sem confusão.
Perguntas frequentes
Qual é uma boa proporção para escala tipográfica?
Para sites com muito texto, 1.2 (terça menor) ou 1.25 (terça maior) são escolhas seguras. 1.333 (quarta justa) serve para páginas de marketing com títulos curtos e marcantes. Proporções de 1.5 ou mais dão saltos grandes que funcionam em pôsteres, mas rapidamente geram títulos enormes.
A proporção áurea é boa para tipografia?
Com cerca de 1.618 ela é muito íngreme: cinco níveis acima de 16px já passam de 170px. Pode funcionar para uma escala de destaque com dois ou três níveis, mas a maioria das interfaces fica mais legível com uma proporção menor.
Por que usar rem mais vw em vez de só vw?
Texto dimensionado só em vw não responde ao zoom de texto do navegador, o que prejudica quem aumenta o texto. A parte em rem no valor preferido mantém o zoom funcionando enquanto o vw cuida do crescimento suave entre as larguras.
Posso usar o resultado com Tailwind CSS?
Sim. O Tailwind v4 cria um utilitário text-* a partir de cada variável --text-* dentro de um bloco @theme, então colar o resultado para Tailwind dá classes como text-step-2 no seu markup.
Usando a escala no seu CSS
Um exemplo prático: base de 16px em 375px subindo para 18px em 1280px, proporção 1.2 subindo para 1.25.
Níveis como custom properties
Cada nível é um clamp(). Aplique-os a elementos ou a classes utilitárias, com uma altura de linha por nível.
Resultado ao vivo
As mesmas variáveis em uma pequena página. Edite o código para testar outros valores; o quadro é estreito, então você vê o extremo das telas pequenas.
Nomes das proporções e valores exatos
Os nomes musicais vêm das razões de frequência dos intervalos; cada valor aqui é a fração exata arredondada para três casas.
Proporções nomeadas
Nome
Fração
Valor
Cinco níveis acima de 16px
Segunda menor
Segunda maior
Terça menor
Terça maior
Quarta justa
Quarta aumentada
Quinta justa
Proporção áurea
Monte sua escala
Defina um tamanho base e uma proporção para uma tela pequena e para uma tela larga. Cada nível ganha um valor clamp() que cresce suavemente entre as duas larguras, além de uma prévia ao vivo e CSS para copiar.