Calculadora CSS clamp() & Tipografia Fluida

Calculadora CSS clamp() & Tipografia Fluida

Gere expressões CSS clamp() prontas para colar para tipografia fluida e dimensões responsivas. Defina um viewport mínimo e máximo, depois qualquer quantidade de valores (tamanhos de fonte, espaçamento, altura de linha) com seus mínimos e máximos. A calculadora produz um clamp() que escala linearmente entre as duas larguras e fixa em cada limite. Um preview ao vivo renderiza texto de exemplo no viewport simulado para você conferir a curva. Predefinições de type scale (Major Third, Perfect Fourth, Golden Ratio…) geram toda a hierarquia h1–h6 com um clique.

O que é a função CSS clamp() e por que usá-la para tipografia?

clamp(MIN, PREFERRED, MAX) retorna PREFERRED, a menos que esteja abaixo de MIN (então MIN) ou acima de MAX (então MAX). Para tipografia, o truque é fazer PREFERRED ser uma expressão fluida baseada em vw — o tamanho cresce linearmente com o viewport entre as duas bordas.

Exemplo: font-size: clamp(1rem, 0.857rem + 0.714vw, 1.5rem) dá 16px a 320px de largura, 24px a 1440px e permanece fixo fora dessa faixa.

Vantagens sobre media queries:
- Uma declaração em vez de três ou quatro.
- O tamanho realmente escala — sem saltos nos breakpoints.
- Respeita o zoom do usuário (quando você usa rem para MIN/MAX, o padrão desta ferramenta).
- Suporte de navegador desde 2020: Chrome 79, Safari 13.1, Firefox 75 — universal nos navegadores modernos.

Como funciona a matemática?

Dado um tamanho mínimo no viewport mínimo (m1, v1) e um máximo no viewport máximo (m2, v2), queremos uma função linear f(x) = a·x + b passando pelos dois pontos.

- Inclinação: a = (m2 − m1) / (v2 − v1)
- Intercepto: b = m1 − a · v1

A expressão PREFERRED em clamp() precisa ser CSS válido, então usamos unidades vw. Como 1vw = viewport_width / 100, a fórmula vira:

PREFERRED = b + (a · 100) vw

Usando rem, tanto b quanto MIN/MAX são divididos pelo tamanho da fonte raiz (padrão 16px). O coeficiente da inclinação fica em vw porque vw é relativo ao viewport e não é afetado pelo tamanho raiz.

É a mesma fórmula por trás de Utopia e Modern Fluid Typography. A calculadora arredonda para 3 casas decimais para manter o CSS legível.

Devo usar rem ou px para MIN e MAX?

Use rem em produção. Motivos:

- Respeito ao zoom do usuário. Quando alguém define o tamanho de fonte padrão em 20px (em vez de 16px) por acessibilidade, valores em rem escalam; px não. Travar o texto em 16px ignorando a preferência é problema de acessibilidade WCAG.
- Consistência da type scale. Definir tamanhos em rem mantém as proporções em todo o documento caso você ajuste o tamanho raiz mais tarde.
- O componente vw cuida do lado fluido independentemente da unidade das constantes — as bordas MIN/MAX são onde rem importa.

Use px quando estiver medindo algo onde a saída pixel-perfect é o objetivo (ícone específico, grid fixo). Para texto, rem quase sempre vence.

Que faixa de viewport escolher para min e max?

A faixa fluida vai do menor dispositivo que você suporta até a maior largura típica do seu layout. Combinações comuns:

- 320 → 1440: muito comum; cobre iPhone SE estreito até laptop / design 1440p.
- 360 → 1280: 'celular moderno' a desktop padrão; preferível quando você não otimiza para telas minúsculas.
- 375 → 1920: largura do iPhone de referência até full-HD widescreen.

Ideia central: escolha valores que combinem com onde seu conteúdo vive. Fora da faixa, clamp() fixa em MIN ou MAX — então se o viewport max for 1440 e o usuário tiver um ultra-wide de 3440px, o texto fica em MAX. Geralmente é o que se quer — texto não deve crescer indefinidamente em monitores enormes.

O que é uma 'type scale' e por que usar?

Type scale é um pequeno conjunto de tamanhos derivados de um tamanho base e uma proporção. Escolha uma proporção (ex. 1.250 — Major Third) e aplique iterativamente:

body = 16px
h6 = body × 1 = 16px
h5 = body × 1.25 = 20px
h4 = body × 1.25² = 25px
h3 = body × 1.25³ = 31.25px
h2 = body × 1.25⁴ = 39px
h1 = body × 1.25⁵ = 48.83px

Usar uma escala em vez de tamanhos aleatórios dá ritmo à sua tipografia e consistência visual. O botão 'Carregar Type Scale' preenche as linhas com uma hierarquia de seis passos usando sua proporção tanto no viewport mínimo quanto no máximo. Depois você ajusta linha a linha. Proporções populares:

- Minor Third (1.200) — sutil, denso.
- Major Third (1.250) — equilibrado, padrão para UI.
- Perfect Fourth (1.333) — editorial clássico.
- Augmented Fourth (1.414) — manchetes fortes.
- Perfect Fifth (1.500) — hierarquia forte.
- Golden Ratio (1.618) — dramático, capas editoriais.

Quão preciso é o preview ao vivo?

O preview renderiza o texto de cada linha no tamanho que clamp() produziria na largura simulada (o slider). Esse valor é calculado em JavaScript com a mesma interpolação linear que o navegador faz internamente:

value = intercept + slope × viewport_px
limitado entre minPx e maxPx

Arraste o slider entre 280 e seu viewport max para ver o texto crescer; passe de qualquer borda e o tamanho fica fixo. O preview é pixel-perfect para a largura simulada, mas não muda com sua janela real — para isso, redimensione a janela ou abra o modo dispositivo do DevTools para conferir num viewport real depois que o CSS estiver no seu stylesheet.

Diferença entre tipografia fluida e abordagem com media queries?

Abordagem media query (antiga):

h1 { font-size: 32px; }
@media (min-width: 768px) { h1 { font-size: 40px; } }
@media (min-width: 1280px) { h1 { font-size: 56px; } }

O tamanho salta em três passos discretos nos breakpoints. Entre breakpoints é estático.

Abordagem fluida (clamp):

h1 { font-size: clamp(2rem, 1.4rem + 1.875vw, 3.5rem); }

O tamanho escala continuamente de 32px a 56px conforme o viewport cresce de ~320px a ~1440px, depois fixa nas duas pontas. Uma declaração substitui três media queries.

Fluido é preferido hoje porque: (1) sem breakpoints intermediários desconfortáveis, (2) menos CSS, (3) sensação mais natural. Mantenha media queries para layouts totalmente diferentes — tipografia fluida cuida do tamanho, não da estrutura.

Onde posso usar as clamp() geradas?

Em qualquer lugar que CSS aceite um valor de comprimento:

- font-size — o caso canônico.
- padding, margin, gap — espaçamento fluido que escala com o viewport.
- width, max-width — seções hero que crescem com a tela.
- line-height — embora normalmente seja melhor manter sem unidade e deixar escalar com font-size.
- border-radius, gap em grid, qualquer outra coisa que aceite comprimento.

O Bloco CSS Completo usa custom properties (--fs-h1, --fs-body, …) para serem referenciadas em todo o stylesheet: font-size: var(--fs-h1). Mantém uma única fonte de verdade para sua escala fluida.

Nenhuma etapa de build ou pré-processador é necessária; navegadores modernos lidam com clamp() nativamente.

Principais Recursos

• Calcula clamp(MIN, PREFERRED, MAX) para qualquer par viewport/valor
• Múltiplas linhas — defina h1 até small no mesmo lugar
• Preview ao vivo com viewport simulado arrastável
• Predefinições de escala: Minor Third, Major Third, Perfect Fourth, Augmented Fourth, Perfect Fifth, Golden Ratio
• Saída em rem (padrão) ou px para MIN e MAX
• Tamanho da fonte raiz configurável (16px padrão) para conversão rem precisa
• Bloco CSS completo com custom properties (--fs-h1, --fs-body…)
• clamp() por linha com cópia em um clique
• Cálculo pixel-perfect em qualquer viewport simulado
• Padrões sensatos: viewport 320 → 1440, hierarquia h1–small
• Adicione e remova linhas em tempo real
• JavaScript puro, sem bibliotecas externas
• Funciona offline após o primeiro carregamento
• UI responsiva, compatível com modo escuro
• 100% no cliente — nada é enviado ao servidor