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

Grampo de tamanho de fonte fluida() Gerador

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 com uma configuração de tamanho de fonte fluido de uso geral já preenchida: 16px em uma janela de visualização de 320px até 24px em uma janela de visualização de 1280px. Essa é uma faixa confortável do corpo para um pouco maior, que se adapta suavemente de uma tela típica de telefone a uma janela típica de desktop, e é a configuração que a maioria das pessoas quer dizer quando procuram por um clamp() de tamanho de fonte fluido em primeiro lugar.

Os quatro números estão abertos a alterações: aumentar o tamanho máximo de um título em vez do corpo do texto ou restringir o intervalo da janela de visualização se o design precisar apenas ser flexível entre um tablet e um ponto de interrupção de desktop. Independentemente do que você inserir, a inclinação e a interseção do eixo y serão recalculadas da mesma maneira e mostradas como aritmética explícita, não escondidas dentro da linha final.

Abaixo das quatro entradas, um controle deslizante de largura da janela de visualização gera uma visualização ao vivo para que o dimensionamento fique visível imediatamente e a linha clamp() pronta para cópia esteja a um clique de distância. Alternar a unidade de saída entre rem e px recalcula cada número sem tocar nos próprios valores de tamanho mínimo e máximo.

🛡️
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.