Calculadora de tamanho de fonte fluido

Defina a transição de tamanho

1. Insira larguras de janela de visualização menores e maiores em pixels CSS, com pelo menos 100px de distância, e o tamanho da fonte em cada largura. Os tamanhos podem aumentar, diminuir ou permanecer constantes. Indique os pixels CSS assumidos por rem.
2. Inspecione a declaração atual e a tabela de endpoints. Altere a largura de teste do modelo para inspecionar outro ponto; isso altera a amostra do modelo sem alterar o CSS copiado ou fingir que o cartão é uma janela de visualização.
3. Copie CSS e teste-o em um elemento não raiz na página receptora. Seu tamanho real da raiz, janela de visualização, fonte e comportamento de zoom são importantes. A negação da área de transferência permite selecionar a mesma declaração manualmente.

Entenda a expressão

A calculadora divide a diferença font-size pela diferença da largura da janela de visualização para obter uma inclinação. Ele multiplica essa inclinação por 100 para o termo vw e, em seguida, converte o deslocamento e os limites de tamanho numérico para rem usando sua raiz presumida.

Menores e maiores descrevem larguras de viewport, não necessariamente tamanhos de fonte. Um design decrescente usa um coeficiente de janela de visualização negativo com limites clamp ordenados numericamente. Tamanhos de fonte iguais produzem uma declaração rem constante mais simples.

Os coeficientes são arredondados a seis casas decimais; valores exatamente na metade são arredondados para longe de zero. A tabela e a amostra usam os coeficientes copiados, podendo diferir um pouco da interpolação ideal. Os resultados em pixels mostram três casas decimais e indicam quando foram arredondados.

A raiz é uma hipótese usada na conversão. Uma raiz diferente na página de destino pode alterar os limites da fonte e as larguras de transição. rem se refere à raiz do documento e vw à janela; alterar a largura ou a fonte de uma div comum não simula nenhum dos dois.

Exemplos crescentes, decrescentes e arredondados

O design padrão usa 16px em uma janela de visualização de 320px e 32px em 1600px, assumindo uma raiz de 16px. Produz clamp(1rem, calc(0.75rem + 1.25vw), 2rem), com tamanho modelado de exatamente 24px a 960px.

A reversão desses tamanhos de endpoint produz clamp(1rem, calc(2.25rem - 1.25vw), 2rem). Ambos os limites permanecem numericamente ordenados. Inserir 20px em ambas as larguras produz font-size: 1.25rem; na mesma raiz presumida.

Para 17px em 360px e 23px em 1280px, os coeficientes arredondados a seis casas produzem 17,0000024px na primeira largura e 20,0000028px no ponto médio do modelo copiado. A tabela arredonda esses valores e não afirma que os extremos são atingidos exatamente.

Limites de autoria e modelo

As larguras da janela de visualização são números inteiros de 240 a 3840 pixels CSS, separados por pelo menos 100px. Os tamanhos de fonte são de 1 a 256 pixels CSS e os tamanhos de raiz assumidos são de 8 a 32 pixels CSS por rem, com até duas casas decimais. Sinais, unidades em campos, agrupamentos, expoentes e excesso de precisão são rejeitados em vez de corrigidos silenciosamente.

A ferramenta cria uma declaração font-size para um elemento que não é a raiz, usando rem e vw. Ela não importa CSS arbitrário, não cria uma escala tipográfica, não usa unidades de contêiner, não envia fontes e não altera os estilos da raiz. O limite de erro pertence ao modelo aritmético finito, não à rasterização do navegador.

A amostra usa o tamanho calculado em pixels e quebra o texto dentro do cartão. Ela não simula uma janela nem comprova que o CSS terá o mesmo resultado em sua página. Fonte, raiz, janela e precisão do navegador podem alterar o resultado.

Unidades mistas de rem e de janela de visualização não provam automaticamente o redimensionamento de texto acessível. Teste a página receptora com texto do navegador e configurações de zoom. A ferramenta não oferece emblema WCAG universal, promessa fixa de correspondência de pixels ou duplicação garantida da fonte com zoom de 200%.

Criação numérica local sem configurações salvas

A ferramenta não envia valores, solicita fontes remotas, salva rascunhos, cria links com configurações nem adiciona telemetria com os valores. A cópia é iniciada por você. Serviços existentes do site, extensões e cópias guardadas não estão cobertos por uma promessa universal de privacidade ou exclusão.