Conversor de Unidades CSS

Converta entre px, rem, em, pt, vw, vh e % instantaneamente, usando seu próprio tamanho de fonte base e dimensões de viewport — chega de adivinhar quanto vale 1.5rem em pixels.

O que é Conversor de Unidades CSS?

O CSS suporta várias unidades diferentes para dimensionamento — absolutas como px e pt, e relativas como rem, em, vw, vh e %. Unidades relativas são essenciais para um design responsivo e acessível (rem em particular respeita a preferência de tamanho de fonte do navegador do usuário), mas converter entre elas mentalmente é genuinamente difícil, já que o resultado depende do contexto: o tamanho de fonte raiz, o tamanho de fonte do elemento atual, ou as dimensões do viewport.

Este conversor faz essa conta por você: defina seu tamanho de fonte base, as dimensões do viewport e o valor que você está convertendo, e veja o valor equivalente em cada outra unidade instantaneamente — útil para traduzir as medidas em pixels de um mockup de design para valores responsivos em rem/vw, ou para verificar o que uma regra CSS existente realmente renderiza na tela.

Fórmula

1rem = 1em = tamanho de fonte base (padrão 16px)

1pt = 96/72 px ≈ 1,333px

1vw = largura do viewport / 100

1vh = altura do viewport / 100

1% = valor de referência / 100

Como calcular

Digite o valor que você quer converter e selecione sua unidade de origem.
Defina seu tamanho de fonte base (padrão do navegador de 16px).
Para conversões vw/vh, digite a largura e altura do viewport de destino.
Leia o valor equivalente em cada outra unidade instantaneamente.

Exemplo

Com um tamanho de fonte base de 16px, 1.5rem converte para 24px. Com uma largura de viewport de 1440px, 5vw converte para 72px.

Benefícios Principais

Converte entre todas as 7 unidades CSS comuns em um só lugar
Usa seu tamanho de fonte base e viewport reais, não uma suposição fixa
Resultados instantâneos enquanto você digita — sem precisar abrir as ferramentas de desenvolvedor
Gratuito, sem cadastro, roda inteiramente no seu navegador

Erros Comuns a Evitar

Assumir que 1rem sempre equivale a 16px, sem verificar se o tamanho de fonte raiz foi alterado
Usar vh para layouts de tela cheia em dispositivos móveis sem considerar o comportamento da barra de endereço do navegador
Aninhar tamanhos de fonte baseados em em e se surpreender quando eles se acumulam inesperadamente
Misturar px e rem de forma inconsistente dentro do mesmo componente, quebrando a escala de acessibilidade

Dicas Profissionais

Prefira rem em vez de em para tamanhos de fonte para evitar acumulação inesperada em componentes aninhados
Use dvh/svh em vez de vh para layouts de tela cheia em dispositivos móveis se seus navegadores de destino suportarem
Mantenha um tamanho de fonte base consistente em todo o seu design system para que as conversões de rem permaneçam previsíveis
Ao traduzir um design pixel-perfeito, converta o espaçamento para rem mas mantenha larguras de borda e outros detalhes finos em px

Termos Chave Explicados

Tamanho de fonte raiz: O font-size definido no elemento html, ao qual todas as unidades rem são relativas
Viewport: A área visível de uma página web na janela do navegador
Unidade absoluta: Uma unidade como px ou pt com um tamanho fixo no mundo real, não relativa a nenhum contexto
Unidade relativa: Uma unidade como rem, em, vw ou % cujo tamanho depende de outro valor

Casos de uso comuns

Converter a especificação em pixels de um design do Figma/Sketch para valores rem em um CSS acessível
Verificar o que um tamanho de fonte responsivo baseado em vw realmente renderiza em uma largura de tela específica
Traduzir CSS legado baseado em pt de impressão ou e-mail para px ou rem padrão da web
Auditar se a escala de espaçamento de um design system se alinha corretamente entre unidades
Verificar rapidamente um valor CSS durante uma revisão de código sem abrir as ferramentas de desenvolvedor

Perguntas Frequentes

Qual a diferença entre rem e em?

rem é sempre relativo ao tamanho de fonte do elemento raiz (html), então permanece consistente independentemente da profundidade de aninhamento de um elemento. em é relativo ao tamanho de fonte do próprio elemento atual, o que significa que pode se acumular quando aninhado — esta ferramenta trata ambos da mesma forma por simplicidade, usando seu tamanho de fonte base.

Por que 1rem geralmente equivale a 16px?

16px é o tamanho de fonte padrão do navegador para o elemento raiz html em praticamente todo navegador. Como rem é relativo a esse tamanho raiz, 1rem equivale a 16px a menos que a página (ou as configurações do navegador do usuário) altere explicitamente o tamanho de fonte raiz.

Para que servem vw e vh?

vw (largura do viewport) e vh (altura do viewport) são percentuais da largura e altura atuais da janela do navegador — 1vw equivale a 1% da largura do viewport. São comumente usados para layouts em tela cheia e tipografia responsiva que se ajusta ao tamanho da tela.

Um pixel é sempre exatamente 1/96 de polegada?

Pela especificação CSS, sim — um pixel CSS é definido como 1/96 de polegada, o que também explica por que 1pt (1/72 de polegada) converte para exatamente 96/72 = 1,333 pixels CSS.

Ferramentas Relacionadas

Calculadora de proporção de aspecto

Calculadora de largura de banda

Calculadora de tempo de download

Calculadora de Custo de Hospedagem em Nuvem

Calculadora de custos de CDN

Calculadora de monetização de Interface de Programação