O que é Tipografia Fluida?

Tipografia fluida faz seu texto escalar suavemente em diferentes tamanhos de tela em vez de pular entre pontos de interrupção fixos. Usando a função CSS clamp(), o font-size e line-height se ajustam proporcionalmente conforme a largura do viewport muda — sem necessidade de media queries.

Abordagem Tradicional

Pontos de Interrupção Fixos

Mudanças abruptas de tamanho nos pontos de interrupção
Múltiplas media queries necessárias
Manutenção de muitos valores por elemento
Escala inconsistente entre pontos de interrupção

Tipografia Fluida

Solução clamp()

Escala suave e contínua
Sem necessidade de media queries
Declaração única por elemento
Tamanho perfeito em qualquer viewport

Entendendo clamp()

A função clamp(min, preferred, max) aceita três valores: um tamanho mínimo, um tamanho preferido baseado na largura do viewport e um tamanho máximo. O navegador calcula automaticamente o tamanho certo para qualquer viewport.

Exemplo: font-size: clamp(1rem, 0.5rem + 0.7143vw, 1.5rem) escala suavemente o texto de 16px em viewport de 320px para 24px em viewport de 1440px.

Por Que Usar Esta Calculadora?

Calcular o valor preferido (o parâmetro do meio) requer matemática complexa: converter valores em pixels para rem, calcular a inclinação e a interceptação y de uma função linear. Esta calculadora realiza todos os cálculos e fornece código CSS pronto para produção instantaneamente.

Cálculos Automáticos

Fórmulas matemáticas complexas calculadas instantaneamente com resultados precisos.

Visualização em Tempo Real

Veja exatamente como sua tipografia escala em diferentes tamanhos de viewport.

Código Pronto para Usar

Copie código CSS pronto para produção diretamente para seu projeto.

Table of Contents

1. O que é Tipografia Fluida?
2. Como Usar
3. Recursos
4. Perguntas Frequentes

Como Usar

Siga estas etapas simples para gerar CSS de tipografia fluida para seu projeto. A calculadora o guia através de cada parâmetro com visualização em tempo real e geração de código instantânea.

Defina Seu Intervalo de Viewport

Digite as larguras mínima e máxima do viewport para seu design. Valores comuns são 320px (mobile menor) e 1440px (desktop padrão). O texto escalará linearmente entre esses pontos de interrupção.

Intervalo recomendado: 320px–1440px cobre 95% dos dispositivos de mobile a desktop.

Defina o Tamanho da Fonte

Use os controles deslizantes ou digite os tamanhos mínimo e máximo de fonte. O mínimo é o tamanho no menor viewport, o máximo é o tamanho no maior viewport.

Você também pode clicar em um preset (H1–H6, Body, Small) para carregar valores de tipografia comuns baseados em melhores práticas.

Ajuste a Altura da Linha

Defina valores mínimo e máximo de line-height. Texto maior geralmente precisa de line-height mais apertada (ex: 1.1–1.2 para títulos), enquanto texto de corpo precisa de mais espaçamento (ex: 1.5–1.7).

Dica: Se ambos os valores forem iguais, uma line-height estática é gerada em vez de clamp() para código mais limpo.

Escolha a Unidade de Saída

Selecione rem (recomendado) ou px para a saída. Ao usar rem, defina o tamanho da Fonte Base para corresponder ao font-size raiz do seu projeto (tipicamente 16px).

rem: Respeita as configurações do navegador do usuário (melhor acessibilidade)
px: Tamanho fixo independente do font-size raiz

Visualize e Copie

Arraste o controle deslizante de viewport para visualizar como o texto escala em diferentes tamanhos de tela. Quando satisfeito, clique em Copiar para copiar o código CSS para sua área de transferência.

Recursos

Esta calculadora fornece ferramentas abrangentes para criar tipografia fluida com precisão e facilidade. Cada recurso foi projetado para simplificar seu fluxo de trabalho e garantir resultados precisos.

Geração CSS clamp()

Gera CSS pronto para produção usando a função clamp() para font-size e line-height.

Valores de inclinação (vw) calculados corretamente
Valores de interceptação (rem ou px) precisos
Saída limpa e otimizada

Presets de Tipografia

Oito presets integrados cobrem necessidades de tipografia comuns baseadas em melhores práticas da indústria.

Títulos H1 a H6
Texto de corpo e texto pequeno
Intervalos de tamanho e line-height otimizados

Visualização Interativa

Um controle deslizante de viewport permite simular qualquer largura de tela de 320px a 1920px.

Visualização de escala de texto em tempo real
Simulação exata do tamanho do viewport
Feedback visual instantâneo

Detalhamento da Fórmula

A seção de fórmula mostra o cálculo passo a passo para transparência completa.

Detalhes do cálculo de inclinação
Coeficiente de largura do viewport
Cálculo da interceptação y

Saída Flexível

Alterne entre saída rem e px com font-size base configurável.

Seleção de unidade rem ou px
Font-size base personalizável
Conversões precisas

Line Height Fluida

Gera valores de line-height fluida usando clamp() para legibilidade ideal em todos os tamanhos.

Escala proporcionalmente com font-size
Saída estática quando valores correspondem
Mantém legibilidade em todos os viewports

Perguntas Frequentes

O que é CSS clamp()?

clamp(min, preferred, max) é uma função CSS que restringe um valor entre um mínimo e máximo. O valor preferido (geralmente usando unidades vw) escala com o viewport, mas nunca fica abaixo do mín ou acima do máx.

Exemplo de Sintaxe clamp()

/* font-size: clamp(minimum, preferred, maximum) */
font-size: clamp(1rem, 0.5rem + 0.7143vw, 1.5rem);

Devo usar rem ou px?

Use rem na maioria dos casos. Unidades rem respeitam as configurações de font-size do navegador do usuário, melhorando a acessibilidade. Use px apenas se precisar que o tamanho seja independente do font-size raiz.

Melhor prática: Unidades rem proporcionam melhor acessibilidade e respeitam as preferências do usuário, tornando sua tipografia mais inclusiva.

Qual intervalo de viewport devo usar?

Um intervalo de 320px a 1440px funciona bem para a maioria dos projetos. 320px cobre as menores telas mobile comuns, e 1440px é uma largura desktop padrão. Ajuste com base na análise do seu projeto ou especificações de design.

320px: Menores dispositivos mobile (iPhone SE, Android antigo)
1440px: Telas padrão de desktop/laptop
Intervalos personalizados: Use dados de análise para seu público específico

O que é a configuração "Fonte Base"?

Este é seu font-size raiz (o valor definido no elemento <html>). O padrão é 16px. Se seu projeto usa um font-size raiz diferente, altere isso para que as conversões rem sejam precisas.

Definindo Tamanho de Fonte Raiz

html {
  font-size: 16px; /* Base font for rem calculations */
}

Por que minha saída de line-height mostra um valor estático em vez de clamp()?

Quando os valores mínimo e máximo de line-height são iguais, não há necessidade de escala. A calculadora gera um valor estático simples em vez de um clamp() desnecessário para CSS mais limpo e eficiente.

Exemplo: Se tanto min quanto max line-height forem definidos como 1.5, a saída será line-height: 1.5; em vez de line-height: clamp(1.5, 1.5, 1.5);

clamp() é suportado em todos os navegadores?

CSS clamp() é suportado em todos os navegadores modernos incluindo Chrome 79+, Firefox 75+, Safari 13.1+ e Edge 79+. Para suporte a navegadores antigos, considere fornecer um font-size alternativo antes da declaração clamp().

Navegador	Versão Mínima	Data de Lançamento	Suporte
Chrome	79+	Dez 2019	Suporte Completo
Firefox	75+	Abr 2020	Suporte Completo
Safari	13.1+	Mar 2020	Suporte Completo
Edge	79+	Jan 2020	Suporte Completo

Exemplo de Alternativa

h1 {
  font-size: 2rem; /* Fallback for older browsers */
  font-size: clamp(1.5rem, 1rem + 2vw, 3rem); /* Modern browsers */
}

Posso usar isso para espaçamento e outras propriedades?

A matemática por trás de clamp() funciona para qualquer propriedade CSS que aceite valores de comprimento — padding, margin, gap, width, etc. Use a fórmula gerada como referência e ajuste o nome da propriedade em seu CSS.

Propriedades de Espaçamento

padding
margin
gap
border-radius

Propriedades de Tamanho

width / max-width
height / max-height
column-gap / row-gap
border-width

Exemplo de Espaçamento Fluido

.container {
  /* Fluid padding */
  padding: clamp(1rem, 0.5rem + 2vw, 3rem);
  
  /* Fluid gap */
  gap: clamp(0.5rem, 0.25rem + 1vw, 2rem);
  
  /* Fluid max-width */
  max-width: clamp(320px, 90vw, 1200px);
}