Conversor de pixels em porcentagem para fontes CSS

Informe o tamanho desejado em pixels e o tamanho do pai; a calculadora retorna tanto a porcentagem numérica quanto um valor CSS pronto para uso. Isso ajuda você a substituir tipografia fixa por tamanhos herdados, reproduzir um design existente sem alterar sua escala visual ou documentar a relação entre textos aninhados e o contexto ao redor.

Converta com precisão um design existente em pixels

Comece pelo tamanho de fonte que você deseja reproduzir e pelo tamanho computado do elemento que será o pai. O conversor divide o tamanho em pixels pelo tamanho do pai e multiplica essa proporção por 100. Por exemplo, um elemento filho de 18 pixels dentro de um pai de 16 pixels corresponde a 112.5 por cento. Você pode colar o valor CSS retornado diretamente em uma declaração font-size. A medida do pai é importante porque porcentagens não descrevem um tamanho físico absoluto; elas descrevem uma relação na cadeia de herança. Se o pai mudar depois de 16 pixels para 20 pixels, um filho declarado como 112.5 por cento crescerá junto. Use o tamanho real da fonte do pai imediato, e não um valor de root ou body sem relação direta, a menos que esse elemento seja realmente o pai cuja fonte computada o filho herda. A precisão controla quantas casas decimais são mantidas, equilibrando fidelidade ao design e legibilidade da folha de estilos. Resultados inteiros continuam compactos, sem zeros finais desnecessários.

Entenda como porcentagens de fonte funcionam no CSS

Um tamanho de fonte em porcentagem é resolvido em relação ao tamanho computado da fonte do elemento pai. 100 por cento significa o mesmo tamanho do pai, 50 por cento significa metade e 150 por cento significa uma vez e meia esse tamanho. Esse comportamento faz a tipografia responder naturalmente a alterações herdadas, mas o aninhamento também pode acumular proporções. Se um contêiner estiver em 125 por cento e um filho dentro dele também estiver em 125 por cento, o filho chegará a 156.25 por cento do tamanho externo aos dois níveis. O conversor calcula uma relação por vez; portanto, sempre informe o tamanho do pai no nível exato em que a nova declaração será aplicada. Porcentagens e unidades em expressam a mesma proporção relativa ao pai na propriedade font-size, embora a sintaxe e as convenções dos sistemas de design sejam diferentes. Esta ferramenta retorna especificamente a sintaxe percentual, que torna as relações de escala mais claras para quem revisa uma folha de estilos ou converte uma especificação em pixels em regras CSS herdadas.

Use o resultado com segurança em um sistema tipográfico

Considere o valor convertido um ponto de partida fiel e depois faça testes no layout real. Zoom do navegador, preferências de fonte do usuário, fontes alternativas, altura de linha e largura disponível podem mudar a aparência do texto mesmo quando o tamanho matemático está correto. A definição em porcentagem é especialmente útil para componentes que devem acompanhar a escala do texto ao redor, como legendas, selos, rótulos de navegação e títulos aninhados. Ela pode ser menos adequada quando vários níveis de aninhamento dificultam prever a escala final. Nesse caso, uma unidade relativa à raiz ou um token de design pode ser mais fácil de manter. Preserve casas decimais suficientes para evitar diferenças visíveis, mas não mantenha dígitos sem significado vindos de medidas aproximadas. A calculadora rejeita um pai igual a zero ou negativo porque não é possível derivar uma porcentagem CSS útil, e rejeita tamanhos negativos do filho porque tamanhos de fonte CSS não podem ser negativos. A fórmula e as entradas normalizadas facilitam a auditoria de conversões automáticas antes que declarações geradas sejam incorporadas à folha de estilos.