Conversor de unidades CSS

Q: Qual é a diferença entre em e rem, e quando usar cada um?

O rem sempre se refere ao tamanho da fonte do elemento raiz, então 1.5rem significa a mesma coisa em qualquer ponto do documento. O em se refere ao tamanho da fonte do elemento pai (ou do próprio elemento, em propriedades como padding e line-height), por isso ele se acumula em marcações aninhadas. Uma diretriz comum: use rem para tamanhos de fonte e espaçamento, para que os valores se mantenham previsíveis e respeitem as preferências do usuário; use em quando quiser que algo escale com o texto local, como o padding de um botão.

Q: Quantos pixels tem 1pt e como pt e px se relacionam com a polegada?

O CSS define o pixel de referência de modo que 1in = 96px = 72pt . Isso faz 1pt valer 96/72 ≈ 1.3333 px, e 1px valer 0.75pt. É por isso que editores de texto e ferramentas de design para impressão que usam pontos mostram números diferentes dos do CSS: uma fonte de 12pt é renderizada como 16px na tela. O conversor usa exatamente essa razão nos resultados em pt.

Q: Por que meus valores em em não batem com o que o navegador mostra?

Há duas causas comuns. Primeira, o em se acumula : se um elemento pai tem font-size de 1.25em sobre uma raiz de 16px (20px) e o filho está definido como 1.5em, o filho fica com 30px, e não 24px. Segunda, para propriedades como padding, margin e line-height de um elemento, o em se refere ao tamanho da fonte do próprio elemento , não ao do pai. Nesses casos, informe o tamanho de fonte calculado do elemento no campo de tamanho da fonte do pai do conversor.

Q: Para acessibilidade, é melhor usar px ou rem?

O rem é geralmente preferido para tamanhos de fonte porque escala quando o usuário aumenta o texto base do navegador, enquanto o texto em px fica fixo e ignora essa preferência. Isso importa para usuários com baixa visão e é exigido por diretrizes de acessibilidade como a WCAG. O px continua adequado para bordas, sombras e traços finos, em que o escalonamento é indesejável. Uma abordagem prática: rem para tipografia e espaçamento, px para detalhes decorativos críticos ao pixel e clamp() com rem e vw para tipografia fluida.

Atualizado: 14 outubro 2026

Converta um comprimento CSS entre px, rem, em, vw, vh, pt e porcentagem. Digite o valor, escolha a unidade, informe o tamanho da fonte do elemento raiz e do elemento pai, além das dimensões da viewport, e receba todos os equivalentes de uma vez.

Converter entre px, rem, em, vw e vh

Valor

O comprimento que você quer converter. São permitidos valores negativos (por exemplo, margens negativas).

Unidade CSS

Tamanho da fonte raiz

rem

Tamanho da fonte do elemento <html>. O padrão dos navegadores é 16px; necessário para rem.

Tamanho da fonte do elemento pai

Tamanho da fonte calculado do elemento pai; necessário para em e %.

Largura da viewport

Largura da viewport do navegador; necessária para vw.

Altura da viewport

Altura da viewport do navegador; necessária para vh.

Calcular automaticamenteSe ativado, o resultado é atualizado automaticamente quando você altera qualquer valor.

Valores convertidos

Pixelspx

Remsrem

Ems (elemento pai)em

Unidades de largura da viewportvw

Unidades de altura da viewportvh

Pontospt

Base da conversão

Fórmula das unidades CSS

Fórmula

\[ px = v \times f(\text{unidade}) \] \[ x_{\text{alvo}} = \frac{px}{f(\text{unidade alvo})} \]

Onde:

\(v\) — o comprimento que você digitou, em sua unidade original
\(f(\text{unidade})\) — quantos pixels vale uma unidade daquele tipo:
\(px\): 1 \(rem\): tamanho da fonte raiz \(em\): tamanho da fonte do pai \(vw\): largura da viewport \(/ 100\) \(vh\): altura da viewport \(/ 100\) \(pt\): \(96/72 = 1.3333\) \(%\): tamanho da fonte do pai \(/ 100\)

Primeiro, a calculadora converte o valor digitado para pixels e depois divide pelo fator em pixels de cada unidade de destino. Essa abordagem em duas etapas garante que os sete resultados sejam coerentes entre si.

Unidades CSS – exemplo de cálculo

Exemplo: converter 24px para rem, em, vw, vh e pt, com tamanho de fonte raiz e do pai de 16px e viewport de 1920×1080 (os valores padrão da calculadora).

\[ px = 24 \times 1 = 24 \]

\[ rem = \frac{24}{16} = 1.5 \quad em = \frac{24}{16} = 1.5 \]

\[ vw = \frac{24}{1920/100} = \frac{24}{19.2} = 1.25 \quad vh = \frac{24}{1080/100} \approx 2.2222 \]

\[ pt = 24 \times \frac{72}{96} = 18 \]

Resultado: 24px = 1.5rem = 1.5em = 1.25vw = 2.2222vh = 18pt.

Como usar o conversor de unidades CSS

Digite o comprimento no campo Valor — por exemplo, 24. Valores negativos também funcionam, o que é útil para margens negativas.
Selecione a unidade desse valor na lista suspensa Unidade CSS (px, rem, em, vw, vh, pt ou %).
Defina o tamanho da fonte raiz — o tamanho da fonte do elemento <html>. Os navegadores usam 16px como padrão.
Defina o tamanho da fonte do pai — o tamanho de fonte calculado do elemento pai, necessário para as conversões de em e %.
Informe a largura e a altura da viewport da janela do navegador, em pixels; são elas que determinam os resultados em vw e vh.
Leia todos os equivalentes de uma vez em Valores convertidos, junto com a base de conversão, que mostra quantos pixels cada unidade vale na sua configuração.

O que são unidades CSS e por que elas importam?

Os comprimentos em CSS se dividem em duas famílias. As unidades absolutas, como px e pt, têm tamanho fixo: a especificação do CSS define o pixel de referência de modo que 1in = 96px = 72pt. Já as unidades relativas dependem do contexto: o rem se refere ao tamanho da fonte do elemento raiz; o em, ao tamanho da fonte do pai; vw e vh, a 1% da largura ou da altura da viewport; e % (para font-size), ao tamanho da fonte do pai.

A escolha da unidade define o comportamento do layout. Valores em px permanecem constantes independentemente das preferências do usuário, o que os torna previsíveis para bordas e detalhes finos, mas rígidos para tipografia. Valores em rem escalam junto com o tamanho da fonte raiz: se o usuário aumenta o texto base do navegador, tudo que estiver dimensionado em rem cresce proporcionalmente — um requisito essencial de acessibilidade. Valores em em se acumulam em elementos aninhados, o que pode gerar resultados surpreendentes em marcações profundas.

As unidades de viewport fazem a tipografia e o espaçamento reagirem ao tamanho da janela. Uma largura definida como 50vw sempre ocupa metade da tela, por isso seções hero e tipografia fluida costumam combinar vw com rem usando clamp(). Como vw e vh mudam a cada redimensionamento, convertê-los para px só faz sentido para um tamanho específico de viewport — justamente aquele que você informa na calculadora.

Interpretar o resultado é simples: cada valor é o mesmo comprimento físico expresso em uma unidade diferente. Se você está migrando um design system de px para rem, a coluna de rem indica o valor do token a escrever; se você vai imprimir ou comparar com ferramentas de design que usam pontos, a coluna de pt traz o equivalente direto.

Premissas, limitações e dicas práticas

O conversor assume o pixel de referência padrão do CSS: 1in = 96px = 72pt. A saída física (impressão) pode variar um pouco dependendo do dispositivo.
A porcentagem é tratada como relativa ao tamanho da fonte do pai, o que é correto para font-size. Para width, height, margin e padding, a porcentagem se refere às dimensões do pai, e nesses casos é preciso usar outro valor de referência.
O em é relativo ao tamanho da fonte do pai. Quando usado em uma propriedade como line-height ou padding do próprio elemento, o em passa a se referir ao tamanho da fonte desse elemento — ajuste o campo de tamanho da fonte do pai de acordo.
Os resultados em vw e vh só valem para as dimensões de viewport que você informou. Teste alguns tamanhos (por exemplo, 1920×1080, 1366×768, 390×844) para ver como os valores convertidos mudam.
Os navegadores aplicam um tamanho mínimo de fonte em certas configurações, o que pode fazer textos muito pequenos baseados em rem ou em serem exibidos maiores do que o cálculo prevê.
Uma regra prática: com o tamanho de fonte raiz padrão de 16px, 1rem = 16px, ou seja, px ÷ 16 = rem. Se você mudar a raiz para 10px, os valores em rem passam a corresponder a px ÷ 10 na razão de 1:1 — é por isso que muitos design systems usam uma raiz de 10px.

Se você também precisar converter entre unidades de medida ou de engenharia, experimente nosso conversor de unidades de potência, o conversor de taxa de transferência de dados ou o conversor de unidades de velocidade.

Perguntas frequentes

Como converter px para rem manualmente, sem calculadora?

Divida o valor em pixels pelo tamanho da fonte raiz. Com o padrão do navegador de 16px, a fórmula é \( rem = px \div 16 \). Assim, 24px = 1.5rem, 32px = 2rem e 12px = 0.75rem. No caminho inverso, multiplique: \( px = rem \times 16 \). Se o projeto usar uma raiz diferente, como 10px no popular truque dos 62,5%, basta substituir 16 por esse valor.

Qual é a diferença entre em e rem, e quando usar cada um?

O rem sempre se refere ao tamanho da fonte do elemento raiz, então 1.5rem significa a mesma coisa em qualquer ponto do documento. O em se refere ao tamanho da fonte do elemento pai (ou do próprio elemento, em propriedades como padding e line-height), por isso ele se acumula em marcações aninhadas. Uma diretriz comum: use rem para tamanhos de fonte e espaçamento, para que os valores se mantenham previsíveis e respeitem as preferências do usuário; use em quando quiser que algo escale com o texto local, como o padding de um botão.

Quantos pixels tem 1pt e como pt e px se relacionam com a polegada?

O CSS define o pixel de referência de modo que \( 1\text{in} = 96\text{px} = 72\text{pt} \). Isso faz 1pt valer \( 96/72 \approx 1.3333 \)px, e 1px valer 0.75pt. É por isso que editores de texto e ferramentas de design para impressão que usam pontos mostram números diferentes dos do CSS: uma fonte de 12pt é renderizada como 16px na tela. O conversor usa exatamente essa razão nos resultados em pt.

Por que meus valores em em não batem com o que o navegador mostra?

Há duas causas comuns. Primeira, o em se acumula: se um elemento pai tem font-size de 1.25em sobre uma raiz de 16px (20px) e o filho está definido como 1.5em, o filho fica com 30px, e não 24px. Segunda, para propriedades como padding, margin e line-height de um elemento, o em se refere ao tamanho da fonte do próprio elemento, não ao do pai. Nesses casos, informe o tamanho de fonte calculado do elemento no campo de tamanho da fonte do pai do conversor.

Os valores em vw e vh são os mesmos em todas as telas?

Não. 1vw equivale a 1% da largura atual da viewport, então o mesmo valor em vw corresponde a quantidades de pixels diferentes em tamanhos de janela distintos. Por exemplo, 10vw são 192px numa tela de 1920px de largura, mas apenas 39px num celular de 390px. Converta vw/vh para px apenas para um tamanho específico de viewport — informe as dimensões exatas que você quer atingir na calculadora e refaça o cálculo para outros breakpoints.

Como descobrir o tamanho da fonte raiz que um site realmente usa?

Abra as ferramentas de desenvolvedor do navegador, inspecione o elemento <html> e veja o font-size calculado no painel Estilos ou Computado. Se nenhuma regra de CSS o sobrescrever, vale o padrão do navegador de 16px. Note que alguns sites usam o truque dos 62,5%, definindo a raiz como 10px para que 1rem = 10px. Verifique também se alguma extensão do navegador ou configuração de tamanho mínimo de fonte altera o valor efetivo.

Para acessibilidade, é melhor usar px ou rem?

O rem é geralmente preferido para tamanhos de fonte porque escala quando o usuário aumenta o texto base do navegador, enquanto o texto em px fica fixo e ignora essa preferência. Isso importa para usuários com baixa visão e é exigido por diretrizes de acessibilidade como a WCAG. O px continua adequado para bordas, sombras e traços finos, em que o escalonamento é indesejável. Uma abordagem prática: rem para tipografia e espaçamento, px para detalhes decorativos críticos ao pixel e clamp() com rem e vw para tipografia fluida.