Tamanho da fonte base (px)
Valor de entrada
Saída CSS
Conversor de PX para REM
Os valores em pixels são fixos, mas o CSS moderno depende cada vez mais de REM para tipografia, espaçamento e tokens de layout. Converter px para rem manualmente significa dividir pelo tamanho de fonte raiz sempre que necessário. Isso torna-se rapidamente tedioso e propenso a erros numa folha de estilo grande. Os handoffs de design do Figma quase sempre chegam em pixels, deixando aos programadores a tarefa de traduzir cada valor antes de publicar.
Este conversor trata das duas direções instantaneamente, sem recarregar a página e sem fórmulas manuais. Introduza um valor em pixels para obter o seu equivalente em rem, ou converta de rem para px com um clique. Também pode definir um tamanho de fonte base personalizado em vez de usar o padrão de 16px. Cada cálculo é executado do lado do cliente, no seu navegador, pelo que nenhum valor introduzido é alguma vez enviado para um servidor.
Referência rápida: valores de PX e REM (base de 16px)
Píxeis (px) | REM (base 16px) |
|---|---|
| 1px | 0.0625rem |
| 2px | 0.125rem |
| 3px | 0.1875rem |
| 4px | 0.25rem |
| 5px | 0.3125rem |
| 6px | 0.375rem |
| 7px | 0.4375rem |
| 8px | 0.5rem |
| 9px | 0.5625rem |
| 10px | 0.625rem |
Entendendo PX e REM
No desenvolvimento web, Pixels (px) são unidades de tamanho fixo, o que significa que não escalam com as configurações de tamanho de fonte do usuário. REM (Root EM) é uma unidade relativa, onde 1 REM é igual ao tamanho da fonte do elemento HTML raiz (geralmente a tag html). Isso torna as unidades REM ideais para criar designs responsivos que se adaptam às preferências do usuário e diferentes tamanhos de tela.
A conversão entre REM e Pixels é uma tarefa comum para desenvolvedores front-end para garantir consistência e responsividade em seus projetos. A mesma lógica de multiplicar ou dividir se aplica a outras conversões do dia a dia, como o Conversor de Peso para receitas ou cálculos de envio.
Por Que Usar REM em Vez de Pixels para Design Responsivo?
- Acessibilidade: Unidades REM respeitam as configurações de tamanho de fonte do navegador do usuário, permitindo que usuários com deficiência visual aumentem ou diminuam o texto conforme necessário.
- Responsividade: Ao definir um tamanho de fonte base no elemento html, você pode facilmente escalar todas as medidas baseadas em REM em todo o seu site alterando um único valor.
- Manutenibilidade: Mais fácil gerenciar tipografia e espaçamento em grandes projetos.
Como Funciona a Conversão de PX para REM
Converter um valor em pixels para rem usa uma fórmula: divida pelo tamanho de fonte base em pixels. A direção inversa, rem para px, multiplica o valor em rem pelo mesmo tamanho de fonte base. A maioria dos navegadores usa 16px como tamanho de fonte base padrão, a menos que uma página o substitua.
O campo Tamanho da Fonte Base desta ferramenta permite substituir o padrão de 16px antes de converter. Altere-o para corresponder ao tamanho de fonte raiz do seu projeto, e cada resultado é recalculado instantaneamente. Se precisar do equivalente em pixels de uma altura de linha em REM, experimente a Calculadora de Altura da Linha.
Exemplos Práticos de PX para REM
Estes cinco exemplos cobrem as conversões mais comuns, desde uma correspondência exata 1:1 até o truque do tamanho de fonte base de 62,5%. Cada linha mostra a fórmula, o resultado e o que fazer com ele.
Definir html {'{'} font-size: 62.5%; {'}'} reduz o tamanho de fonte raiz do padrão do navegador de 16px para 10px. Como 62,5% de 16px equivale a 10px, cada 1rem passa a equivaler a 10px em vez de uma fração incómoda, tal como mostra o exemplo de 24px para 2,4rem acima.
Tipo | Entrada | Tamanho de Fonte Base | Cálculo | Resultado | O Que Significa |
|---|---|---|---|---|---|
| Caso simples | 16px | 16px | 16 ÷ 16 | 1rem | Uma correspondência perfeita 1:1 com a base padrão — sem cálculo mental. |
| Caso complexo/decimal | 14px | 16px | 14 ÷ 16 | 0.875rem | Útil para texto ligeiramente menor, como rótulos secundários ou legendas. |
| Caso extremo | 1px | 16px | 1 ÷ 16 | 0.0625rem | Comum em bordas de um pixel, onde uma fração de pixel ainda é nítida. |
| Caso real (técnica dos 62,5%) | 24px | 10px* | 24 ÷ 10 | 2.4rem | Com a técnica dos 62,5% ativa, 2,4rem corresponde exatamente a um título de 24px. |
| Percurso inverso | 1.5rem | 16px | 1.5 × 16 | 24px | Confirma que um título de 1,5rem é exibido exatamente a 24px numa base padrão de 16px. |
Usando o Seu Resultado de PX para REM no CSS
As especificações de design do Figma ou Sketch quase sempre indicam os tamanhos de fonte em pixels, mas o CSS de produção deve usar rem. Pegue o valor em pixels do seu ficheiro de design, converta-o com a ferramenta acima e depois cole o valor em rem na sua folha de estilos.
Os utilitários de espaçamento, tipografia e tamanho do Tailwind CSS são baseados em rem por padrão, assumindo o tamanho de fonte raiz padrão de 16px. Se o seu projeto definir um tamanho de fonte raiz diferente, as classes do Tailwind escalam de acordo com esse valor, exceto dentro dos breakpoints das media queries.
/* Especificação do Figma: font-size: 24px; */
font-size: 1.5rem;Segurança e Privacidade
Este conversor funciona inteiramente do lado do cliente, dentro do seu navegador. Os valores que introduz nunca são enviados para um servidor, pelo que cada cálculo permanece privado enquanto trabalha.
Lidando com Erros e Casos Extremos
Este conversor trata algumas entradas de forma diferente de um simples número positivo. Entender estes casos extremos ajuda a confiar no resultado em vez de o pôr em causa.
Se converte regularmente outras unidades técnicas com as suas próprias particularidades de arredondamento, o Conversor de Dados cobre bytes, kilobytes e muito mais.
Entrada | Comportamento |
|---|---|
| Valor negativo em pixels ou rem | Converte normalmente usando a mesma fórmula — válido para propriedades CSS como margin ou transform que aceitam números negativos. |
| Tamanho de fonte base igual a zero | Inválido. A divisão por zero não tem resultado definido, pelo que a ferramenta exige um tamanho de fonte base maior que zero. |
| Entrada não numérica | Ignorada. O resultado é limpo até que seja introduzido um número válido. |
| Decimais muito pequenos ou periódicos | Arredondados a 4 casas decimais para rem e 2 para px, com os zeros finais removidos para um valor pronto para CSS. |
Comparação entre REM, PX e EM
Escolher entre rem, px e em depende de o valor dever respeitar as preferências de tamanho de fonte do utilizador. Se também precisar de converter unidades de comprimento absolutas como polegadas ou centímetros, o Conversor de Comprimento trata dessas conversões separadamente.
A tabela abaixo compara como cada unidade se comporta em relação ao zoom, às configurações de acessibilidade e aos casos de uso comuns. Uma exceção importante para o design responsivo: as unidades rem dentro de uma media query CSS resolvem-se sempre em relação ao tamanho de fonte padrão do navegador, ignorando qualquer tamanho de fonte raiz personalizado na página.
Aspeto | REM | PX | EM |
|---|---|---|---|
| Responsividade | Escala com o tamanho de fonte raiz | Fixo independentemente das configurações | Escala com o tamanho de fonte do elemento pai e acumula-se quando aninhado |
| Zoom completo do navegador | Escala com a página, tal como px e em | Escala com a página, tal como rem e em | Escala com a página, tal como rem e px |
| Configuração de acessibilidade de tamanho de texto | Aumenta ou diminui com a configuração | Não é afetado — permanece fixo | Aumenta ou diminui com a configuração |
| Media queries CSS | Resolve-se em relação ao padrão do navegador, ignorando o tamanho de fonte raiz personalizado | Não é afetado — sempre pixels literais | Resolve-se em relação ao contexto do elemento pai, ignorando alterações da página |
| Caso de uso típico | Tipografia, espaçamento e layout que devem respeitar as preferências do utilizador | Bordas, ícones e qualquer elemento que deva manter um tamanho fixo | Escala ao nível do componente, como emblemas ou botões aninhados |
Perguntas Frequentes (FAQ)
Perguntas Frequentes