⭐ 0
🔍
Texto Imagem PDF e Documentos Áudio Música Eletrônica Tempo Utilitários Validadores Esoterismo Jogos

Gerador de escala de tipo fluido

Calcule um valor CSS clamp() real e fluido a partir de um tamanho mínimo e máximo em duas larguras de janela de visualização, com a inclinação e a interseção mostradas passo a passo e uma visualização de redimensionamento ao vivo.

Processando... 0%

Resultado

Esta página abre a calculadora diretamente no modo de escala de tipo com uma base de 16px e uma proporção de 1,25 (terço maior) já selecionada — um ponto de partida sólido e amplamente utilizado para uma escala tipográfica. Somente a partir desses dois números, seis tamanhos são gerados: pequeno, base, h4, h3, h2 e h1, cada um com seu próprio valor fluid clamp() em vez de um único tamanho fixo.

Cada etapa mantém o tamanho base ancorado no mesmo valor tanto no terminal móvel quanto no desktop, enquanto os títulos aumentam de forma mais agressiva na janela de visualização mais ampla do desktop do que na estreita do móvel - a mesma ideia de escolher uma proporção mais suave para telas pequenas e uma proporção mais ousada para telas grandes, derivada automaticamente da proporção única que você escolher.

Alterar a proporção para 1,125, 1,2, 1,333 ou 1,5 regenera toda a tabela instantaneamente, e o botão abaixo copia todos os seis valores clamp() como um bloco pronto para colar de propriedades personalizadas CSS para o restante da folha de estilo para referência.

🛡️
Executado no navegador

Seus arquivos e entradas nunca saem deste dispositivo. O processamento é executado totalmente offline. 100% seguro.

Formatos e regras aceitos

  • Matemática real de tipografia de fluidos: inclinação, coeficiente vw e interseção do eixo y mostrados explicitamente, não apenas a linha clamp() final.
  • Visualização ao vivo: arraste o controle deslizante de largura da janela de visualização para observar o redimensionamento do texto de amostra exatamente como seria enquanto uma janela real do navegador é redimensionada.
  • Modo de escala de tipo: um tamanho base e uma proporção de 1,125 a 1,5 geram seis etapas fluid clamp() - small, base, h4, h3, h2, h1 - como CSS pronto para cópia.

Principais benefícios

✓ A linha clamp(), os números de inclinação e interseção e a visualização ao vivo são atualizados conforme você digita – nenhum botão para pressionar.
✓ Um controle deslizante de largura da janela de visualização aciona uma caixa de visualização ao vivo, para que você veja o dimensionamento fluido exato em ação entre os pontos de interrupção mínimo e máximo, e não apenas uma fórmula.
✓ Um modo de escala de tipo separado transforma um tamanho e proporção básicos em uma escala de cabeçalho fluida completa de 6 etapas, pronta como um bloco de propriedades personalizadas CSS.

Casos de uso

  • • Transforme um tamanho de fonte mínimo/máximo e um intervalo de janela de visualização em uma linha clamp() real — inclinação, coeficiente vw e interseção incluídos — em vez de observar uma de um tutorial.
  • • Arraste um controle deslizante de largura da janela de visualização para visualizar um cabeçalho fluido ou redimensionamento do tamanho do corpo exatamente como faria enquanto uma janela real do navegador é redimensionada, antes de enviá-la para uma folha de estilo.
  • • Gere uma escala completa de tipo de fluido de 6 etapas (de pequeno a h1) a partir de um tamanho e proporção básicos, copiado como um bloco pronto para colar de propriedades personalizadas CSS.
  • • Crie um fluid clamp() para espaçamento (margem, preenchimento, lacuna) em vez de tamanho da fonte — a mesma fórmula de inclinação/interseção se aplica a qualquer propriedade CSS.