Gerador de Tipografia Fluida CSS
Gere uma escala de tipo CSS clamp() (XS a 4XL) que interpola o tamanho da fonte de forma suave entre a largura mínima e máxima da viewport, com uma visualização redimensionável ao vivo e a matemática de interpolação subjacente mostrada. Funciona inteiramente em seu navegador.
Entrada
Tamanho de fonte base na largura mínima da viewport.
Tamanho de fonte base na largura máxima da viewport.
Abaixo desta largura, o tamanho da fonte permanece fixo no tamanho mínimo.
Acima desta largura, o tamanho da fonte permanece fixo no tamanho máximo.
O quanto cada passo cresce em relação ao anterior, na largura mínima da viewport.
O quanto cada passo cresce em relação ao anterior, na largura máxima da viewport.
Desativar gera um bloco de classe utilitária simples .text-xs / .text-base / … em seu lugar.
Saída
Your type scale will appear here.
Uma regra clamp() real em um Shadow DOM isolado — redimensione sua janela do navegador para vê-la escalar em tempo real.
| Passo | Mín. | Máx. | clamp() |
|---|---|---|---|
| No data yet | |||
A marcação de demonstração que a visualização ao vivo acima renderiza — texto de amostra por passo, não para ser colado como está.
O que alimenta a visualização ao vivo acima — as mesmas regras clamp() da saída CSS, aplicadas às classes da marcação da demonstração.
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-fluid-typography-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"minFontSize": "16",
"maxFontSize": "20",
"minViewport": "320",
"maxViewport": "1200",
"minRatio": "1.2",
"maxRatio": "1.25",
"outputUnit": "rem",
"asCustomProperties": "true"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-fluid-typography-generator` tool (CSS Fluid Typography Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-fluid-typography-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Tipografia Fluida CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que faz
Quebras de ponto de parada da media query com font-size fixo fazem o texto pular abruptamente em algumas larguras. A tipografia fluida dimensiona o tamanho da fonte continuamente conforme a viewport é redimensionada, usando CSS clamp() para limitar o resultado entre um tamanho mínimo e máximo. Esta ferramenta constrói uma escala de tipo de 8 etapas completa (XS a 4XL) de regras clamp() a partir de dois tamanhos de fonte, duas larguras de viewport e uma proporção de escala em cada extremidade — sem pontos de parada fixos, sem saltos.
Como usar
- Configure o tamanho de fonte mínimo e a largura mínima da viewport — o tamanho de fonte base abaixo do qual o texto para de encolher.
- Configure o tamanho de fonte máximo e a largura máxima da viewport — o tamanho base acima do qual o texto para de crescer.
- Escolha uma proporção de escala para cada extremidade (Terça Menor, Terça Maior, Quarta Perfeita, …) — o quanto cada passo (SM → base → LG → XL…) cresce em relação ao anterior. Usar uma proporção diferente em cada extremidade permite que os títulos cresçam mais rápido que o texto do corpo conforme a tela fica mais larga, o que é comum em sistemas de tipo fluido.
- Escolha rem ou px para a saída e se deseja produzir propriedades personalizadas de CSS (
--font-base: clamp(...)) ou classes utilitárias (.text-base { font-size: clamp(...); }). - Copie a saída CSS diretamente na sua folha de estilo.
A visualização ao vivo monta as regras clamp() geradas de forma real em um Shadow DOM isolado — redimensione sua janela do navegador e o texto de amostra será dimensionado em tempo real, da mesma forma que funcionará em seu site.
A matemática
Cada clamp() de passo é construído a partir da fórmula de interpolação linear padrão: slope = (maxSize − minSize) / (maxViewport − minViewport), depois preferred = (minSize − minViewport × slope) + slope × 100vw. Esse valor preferido cresce linearmente com a largura da viewport e é limitado por clamp(minSize, preferred, maxSize), portanto o resultado corresponde a minSize exatamente em minViewport, maxSize exatamente em maxViewport e interpola perfeitamente entre eles. Abaixo da viewport mínima ou acima da viewport máxima, o tamanho permanece fixo no limite correspondente. A tabela detalhamento da escala de tipo mostra o tamanho min/max calculado e a string clamp() resultante para cada passo.
Por que não usar apenas uma media query?
Uma media query muda font-size em uma largura de pixel fixa, então o texto salta no instante em que o ponto de parada é ultrapassado. Tipografia fluida baseada em clamp() dimensiona continuamente em todo o intervalo entre seus dois pontos de parada, portanto não há salto perceptível — e nenhum ponto de parada para escolher corretamente para cada dispositivo.
Funciona em todos os navegadores?
clamp() e unidades vw são suportadas em todos os navegadores principais desde 2020, então funciona em todos os lugares, exceto em navegadores muito antigos que precedem propriedades personalizadas de CSS também.
Ferramentas relacionadas
Convertendo um tamanho na outra direção? Use o Conversor de Pixel, REM & EM para converter um único valor entre unidades. Para regras responsivas baseadas em pontos de parada (em vez de fluidas), consulte o Gerador de CSS Media Query. Para um construtor de curva de flexibilização interativa no mesmo estilo, consulte o Gerador de CSS Cubic Bezier.
Privacidade
Tudo funciona em seu navegador — nenhum tamanho de fonte ou configuração é enviado para um servidor.