Calculadora de tamanho fluido
Fluid Size Calculator
Calcula uma expressão clamp() que escala um tamanho suavemente entre duas larguras de viewport.
Constrói um `clamp()` que escala um tamanho suavemente entre duas larguras de viewport — a expressão da tipografia fluida, com a aritmética feita por você. As duas pontas estão em `rem`, que é a parte que decide se o resultado é acessível.
Âncoras
A expressão
Inclinação
0,833vw
Intercepto
0,833rem
Intervalo
1,000–1,500rem
rem, e isso não é preferência de estilo. Um clamp em px ignora por completo o tamanho de fonte do navegador do leitor: uma falha de WCAG 1.4.4 que quem escreveu nunca vai sentir, porque não é quem deixou o próprio padrão em 24px. O coeficiente vw continua sendo uma proporção da viewport, e é por isso que mudar o tamanho raiz ali em cima move as duas pontas e deixa a inclinação como está.No que isso dá
| Viewport | Tamanho | |
|---|---|---|
| 320px | 16px | |
| 375px | 16.46px | |
| 480px | 17.33px | |
| 640px | 18.67px | |
| 768px | 19.73px | |
| 1024px | 21.87px | |
| 1280px | 24px | |
| 1440px | 24px(preso) | |
| 1920px | 24px(preso) |
Vale saber
- · Acima da âncora de cima o tamanho fica preso, então alargar a janela não muda mais nada. As duas âncoras estão em rem, então ele continua seguindo o tamanho de fonte do próprio leitor — a mesma expressão escrita em px não seguiria.
Montando um conjunto inteiro desses? O gerador de escala tipográfica dá os tamanhos de cada passo para pôr entre os limites do clamp.
Como usar
Defina as quatro âncoras
O tamanho no seu menor viewport, o tamanho no maior, e as duas larguras de viewport em que eles se aplicam. Todo o resto é derivado.
Confira a tabela resolvida
Ela mostra em quanto a expressão resulta em uma série de larguras reais de viewport, marcando aquelas em que o clamp está segurando em vez da inclinação.
Copie a declaração
Um `font-size: clamp(...)`. A inclinação e o intercepto também são mostrados, para quando você quiser entender a expressão em vez de colá-la.
Perguntas frequentes
Por que as unidades são `rem` e não `px`?
Porque um clamp em `px` ignora por completo o tamanho de fonte do navegador do leitor. Alguém que definiu o padrão em 24px porque precisa recebe os seus 16px mesmo assim — isso é uma falha no critério 1.4.4 da WCAG, e uma que o autor nunca vivencia.
As pontas do viewport devem ser meus breakpoints?
Não necessariamente. O clamp cuida de tudo entre elas, então as pontas úteis são o celular mais estreito que você suporta e a largura a partir da qual você não quer que o texto continue crescendo — muitas vezes por volta de 1200–1400px, e não o seu maior breakpoint.
O zoom continua funcionando?
O zoom da página, sim — ele muda a largura do viewport e o clamp acompanha. O zoom só de texto é o que as âncoras em `rem` protegem: a parte em `vw` não responde a ele, então sem um componente em `rem` o texto ficaria congelado. É por isso que a expressão mistura os dois.
Posso usar também para padding e gaps?
Sim — a expressão é aritmética de unidades e não se importa em qual propriedade cai. A saída diz `font-size` porque é o caso comum; troque a propriedade e mantenha o valor.
Pode receber de
Gerador de border-radius
Border Radius Generator
Modela cada canto separadamente, inclusive a sintaxe de dois valores para squircle, e gera o CSS.
Gerador de CSS Grid
CSS Grid Builder
Desenha uma grade visualmente com áreas nomeadas e gera o CSS de grid-template.
Playground de Flexbox
Flexbox Playground
Alterna cada propriedade flex num exemplo ao vivo e mostra o CSS e o que cada propriedade mudou.
Calculadora de proporção
Aspect Ratio Calculator
Calcula a dimensão que falta para uma proporção alvo e lista os tamanhos padrão que ela corresponde.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Formatador e minificador de CSS
CSS Beautifier & Minifier
Formata ou minifica CSS sem reordenar nada, preservando exatamente o fluxo de tokens.
Gerador de CSS Grid
CSS Grid Builder
Desenha uma grade visualmente com áreas nomeadas e gera o CSS de grid-template.
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.
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.