Keepdesk

Gerador de fórmula CSS clamp() para tipografia fluida

Elimine saltos bruscos de media queries ajustando suavemente o tamanho da fonte entre viewports de dispositivos móveis e desktop.

Passo a passo

  1. 1

    Definir intervalo de fontes

    Insira o tamanho mínimo da fonte (ex.: 16px) e o tamanho máximo da fonte (ex.: 32px).

  2. 2

    Definir limites do viewport

    Especifique o limite inferior do viewport (ex.: 375px) e o limite superior do viewport (ex.: 1440px).

  3. 3

    Copiar código clamp()

    Clique no botão de copiar para obter o snippet de CSS clamp() gerado.

Dimensionamento linear do viewport

Calcula a inclinação exata e o intercepto y em rem e vw para interpolar linearmente o tamanho da fonte conforme a janela do navegador é redimensionada.

CSS limpo para produção

Gera declarações CSS limpas em linha única, prontas para copiar direto nas configurações do Tailwind ou folhas de estilo.

Guias por situação

Calculadora de clamp() CSS →
Calculadora de clamp() para espaçamento e padding responsivosCalcule valores fluidos e responsivos de padding, margin e grid gap usando…

Artigos que usam esta ferramenta

Todas as publicações →
Escala tipográfica fluida com clamp(): títulos e corpo de texto que crescem juntosAprenda a criar uma escala tipográfica fluida e consistente com CSS clamp() para que seus títulos e corpo de texto se ajustem perfeitamente entre viewports.Tipografia fluida com CSS clamp(): a fórmula, a pegadinha de acessibilidade e um exemplo práticoPor que os tamanhos de fonte oscilam em breakpoints, como o clamp() funciona, por que apenas vw quebra o zoom do texto e a matemática de inclinação/intercepto com números reais.

Perguntas frequentes

O CSS clamp é suportado em todos os navegadores modernos?

Sim, o CSS clamp() conta com suporte universal em todos os principais navegadores modernos.

Por que usar rem em vez de pixels puros?

A combinação de rem com vw respeita as preferências de zoom de fonte de acessibilidade do usuário enquanto escala dinamicamente.

Mais ferramentas

Todas as ferramentas →
Visualizador HWPAbra HWP·HWPX coreano no layout original; salve como PDF ou WordPDF → ImagemTransforme páginas de PDF em JPG·PNG·WebP na resolução que você escolherImagens → PDFCombine fotos e digitalizações em um único PDF. Ajuste para A4, reordene páginasJuntar PDFCombine vários PDFs em um só. Reordene, gire