Escala fluida de tipografia e espaçamento
Defina os tamanhos na menor e na maior tela: a ferramenta gera a escala de fontes e espaços com clamp(), pronta para colar como custom properties.
Veja
-
--step-5Texto 50,42px 39,81 → 61,04px -
--step-4Texto 41px 33,18 → 48,83px -
--step-3Texto 33,36px 27,65 → 39,06px -
--step-2Texto 27,15px 23,04 → 31,25px -
--step-1Texto 22,1px 19,2 → 25px -
--step-0Texto 18px 16 → 20px -
--step--1Texto 14,67px 13,33 → 16px -
--step--2Texto 11,96px 11,11 → 12,8px
-
--space-3xs4,5px 4 → 5px -
--space-2xs9px 8 → 10px -
--space-xs13,5px 12 → 15px -
--space-s18px 16 → 20px -
--space-m27px 24 → 30px -
--space-l36px 32 → 40px -
--space-xl54px 48 → 60px -
--space-2xl72px 64 → 80px -
--space-3xl108px 96 → 120px
Copie o código
/* De 320px a 1240px de viewport */
:root {
--step-5: clamp(2.4883rem, 2.027rem + 2.3067vw, 3.8147rem);
--step-4: clamp(2.0736rem, 1.7334rem + 1.7011vw, 3.0518rem);
--step-3: clamp(1.728rem, 1.4799rem + 1.2407vw, 2.4414rem);
--step-2: clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem);
--step-1: clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem);
--step-0: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
--step--1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem);
--step--2: clamp(0.6944rem, 0.6577rem + 0.1836vw, 0.8rem);
--space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
--space-2xs: clamp(0.5rem, 0.4565rem + 0.2174vw, 0.625rem);
--space-xs: clamp(0.75rem, 0.6848rem + 0.3261vw, 0.9375rem);
--space-s: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
--space-m: clamp(1.5rem, 1.3696rem + 0.6522vw, 1.875rem);
--space-l: clamp(2rem, 1.8261rem + 0.8696vw, 2.5rem);
--space-xl: clamp(3rem, 2.7391rem + 1.3043vw, 3.75rem);
--space-2xl: clamp(4rem, 3.6522rem + 1.7391vw, 5rem);
--space-3xl: clamp(6rem, 5.4783rem + 2.6087vw, 7.5rem);
}O problema
Com media queries, o tamanho do texto muda aos saltos: 16px até um breakpoint, 18px depois dele. Entre um salto e outro, o texto fica grande demais na tela estreita ou pequeno demais na larga, e cada nível da hierarquia (corpo, subtítulo, título) e cada espaçamento pede o seu par de valores.
Só vw resolve o salto, mas cria dois problemas: sem limite, o texto encolhe ou cresce sem fim, e unidade de viewport pura ignora o zoom e a fonte configurada no navegador.
Como funciona
Cada valor é uma reta entre dois pontos: o tamanho mínimo na viewport menor e o máximo na maior. A inclinação da reta vira vw, o ponto em que ela corta o zero vira rem, e o clamp() segura as pontas:
inclinação = (máx − mín) ÷ (tela máx − tela mín) O valor preferido do clamp() é mín − inclinação × tela mín (em rem) mais inclinação × 100 (em vw).
A escala multiplica a fonte base pela razão a cada passo: com base de 16px e razão 1,2, o passo 1 tem 19,2px e o passo 2, 23,04px. Uma razão maior na tela larga faz os títulos crescerem mais rápido que o corpo do texto.
O rem no valor preferido mantém o texto ligado à fonte que o leitor configurou. Para o zoom chegar a 200% (WCAG 1.4.4), o máximo de cada tamanho não deve passar de 2,5 vezes o mínimo, como mostrou Maxwell Barvian; a ferramenta avisa quando passar.
Os espaços usam as mesmas duas pontas: cada um é um múltiplo do passo 0, de 0,25× a 6×, então crescem na mesma proporção do texto.
Quando usar
- Tokens de tipografia e espaçamento de um design system, em custom properties.
- Blogs e páginas de conteúdo, em que o corpo do texto precisa ficar confortável do celular ao monitor largo.
- Títulos de landing page que devem crescer bem mais que o texto em telas grandes.
- Paddings e gaps de seção que acompanham o tamanho do texto, sem um breakpoint para cada um.
Leia no blog
Outras ferramentas
Calculadora de aspect ratio
Descubra a largura ou a altura a partir de uma proporção e leve o aspect-ratio pronto para o CSS.
SeletoresGerador de quantity queries com :has()
Monte o seletor que muda o layout pelo número de filhos e veja a condição valer na prévia.
FormasPlayground de corner-shape
Teste squircle, bevel, scoop, notch e superellipse() nos cantos e leve o CSS com border-radius e corner-shape.