Como usar: Conversor PX para REM
- Defina o tamanho de fonte raiz (deixe 16 a menos que seu site altere o tamanho de fonte do
html). - Digite um valor em Pixels, REM ou EM — os outros campos são atualizados na hora.
- Use a tabela de tamanhos comuns para copiar com um clique os valores rem mais usados.
- Para converter uma folha de estilo inteira, cole o código em Seu CSS, escolha as opções e copie o resultado.
O que é rem?
rem significa “root em”: 1rem equivale ao tamanho de fonte do elemento raiz <html>. Os navegadores usam 16px por padrão, então 1.5rem = 24px. A grande diferença em relação aos pixels é que o rem respeita a preferência de tamanho de fonte do usuário no navegador — quem define o padrão como 20px vê textos e espaçamentos proporcionalmente maiores, o que um valor px fixo ignoraria.
A fórmula de conversão
rem = px ÷ tamanho de fonte raiz e px = rem × tamanho de fonte raiz. Com a raiz padrão de 16px: 12px = 0,75rem, 14px = 0,875rem, 18px = 1,125rem, 32px = 2rem. O em usa a mesma conta, mas divide pelo tamanho de fonte do próprio elemento (para font-size, o do elemento pai), então os ems se acumulam quando aninhados.
| Unidade | Relativa a | Ideal para |
|---|---|---|
px | Nada — valor fixo | Bordas finas, sombras, detalhes pequenos |
rem | Tamanho de fonte da raiz (html) | Tamanhos de fonte, espaçamentos, larguras de layout |
em | Tamanho de fonte do elemento atual | Preenchimentos que acompanham o texto de um botão, tamanhos de ícones, media queries |
Convertendo um arquivo CSS inteiro
O conversor de trechos encontra todo número seguido de px e o divide pela sua base, ignorando comentários, strings entre aspas e caminhos url(…) (assim bg-16px.png permanece intacto). Valores de 1px são mantidos por padrão, porque bordas devem continuar nítidas. Dentro de media queries, rem e em sempre são baseados no tamanho de fonte padrão do navegador (normalmente 16px), e não na regra do seu html — marque Não alterar @media queries se a sua base for diferente.
O truque dos 62,5% — e por que evitá-lo
Definir html { font-size: 62.5%; } faz 1rem = 10px, facilitando as contas, mas cada componente passa a precisar de tamanhos de fonte explícitos e widgets de terceiros ficam minúsculos. Manter o padrão de 16px e usar um conversor como este é mais simples e seguro.
rem no Webflow
Os menus de unidade do Webflow aceitam rem e em, e você pode digitar 1.5rem diretamente em um campo. Observe que um tamanho de fonte definido na tag Body (All Pages) do Webflow afeta o texto herdado e o em, mas não o rem — o rem sempre se refere ao elemento html. Para valores que acompanham o tamanho da tela, gere-os com a Calculadora clamp().
Também pesquisado como: px para rem, rem para px, px para em, em para px, calculadora rem, pixel para rem, conversor de fonte, tamanho de fonte raiz.
Ferramentas que combinam com: Conversor PX para REM
- Conversor de unidades — Converta entre unidades métricas, imperiais e técnicas em dez categorias — com um conversor bidirecional e uma tabela que mostra todas as unidades de uma vez só.
- Formatador de CSS — Transforme uma folha de estilo minificada em CSS legível, com uma propriedade por linha e blocos @media aninhados corretamente.
- Minificador CSS — Cole uma folha de estilos para reduzi-la na hora.
- Gerador de Box Shadow — Empilhe várias camadas de sombra, ajuste deslocamento, desfoque, espalhamento e opacidade em um cartão ao vivo e copie o CSS de box-shadow ou text-shadow.
Perguntas frequentes
Quantos pixels tem 1rem?
html { font-size: 62.5% }, 1rem passa a valer 10px; se o usuário aumentar o tamanho de fonte do navegador, 1rem cresce junto.Qual é a diferença entre rem e em?
html, então é previsível em qualquer lugar. O em é relativo ao tamanho de fonte do elemento atual, então ems aninhados se multiplicam — 1.2em dentro de 1.2em equivale a 1,44× o tamanho externo.Devo usar rem ou px para tamanhos de fonte?
Media queries devem usar px, em ou rem?
html.O conversor de trechos pode quebrar meu CSS?
px e ignora comentários, strings e valores url(). Revise o resultado uma vez — especialmente valores como bordas de 1px, que são mantidos por padrão.