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

Tamanho de fonte fluido de 16px a 24px

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

Dimensionar o tamanho da fonte de maneira fluida de 16px para 24px é uma das perguntas mais comuns em pesquisas CSS clamp(), porque 16px é o padrão quase universal do corpo do texto e 24px é um avanço frequente para um título ou parágrafo inicial um pouco maior. Esta página abre a calculadora exatamente com esse par pré-preenchido em um intervalo de janela de visualização de 320px a 1280px, de forma que a linha clamp() esteja pronta no momento em que for carregada.

Se você precisar apenas do rem estático ou equivalente em de 16px ou 24px - sem qualquer dimensionamento baseado em viewport - o conversor px para rem responde isso em uma única etapa; esta calculadora é para o caso em que o valor em si deve mudar suavemente à medida que a janela do navegador é redimensionada, em vez de permanecer fixa em um valor rem.

O detalhamento abaixo mostra exatamente como 16px e 24px se transformam em uma inclinação, um coeficiente vw e uma interseção do eixo y, e o controle deslizante de visualização ao vivo permite arrastar o intervalo de 320–1280px para observar o texto crescer de um tamanho para outro em tempo real antes de copiar a linha CSS em sua folha de estilo.

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