Converter px em rem
Com esta ferramenta você pode converter px em rem (e vice-versa): digite um valor, ajuste o tamanho base e veja rem, em, pt, porcentagem e vw, com uma tabela de tamanhos comuns.
Exemplo: Valor 24 · Unidade do valor: px (pixels) · Tamanho da fonte do elemento raiz (rem) 16 px · Tamanho da fonte do elemento pai (em, %) 16 px · Largura da janela (vw) 1.440 px → Resultado: 24 px = 1,5 rem. Fonte: W3C – CSS Values and Units Module Level 4: absolute lengths (1in = 96px = 72pt) e font-relative lengths (em, rem). Atualizado em: .
Como o cálculo é feito
Com os 16 px padrão do navegador, 24 px são exatamente 1,5 rem. A fórmula é rem = px / tamanho base, e ao contrário px = rem · tamanho base.
Como se calcula
rem é relativo ao tamanho da fonte do elemento raiz (html), em ao do elemento pai. 1 pt é 1/72 de polegada e 1 px 1/96 de polegada, então 1 pt = 4/3 px; 12 pt equivalem a 16 px. Porcentagem no tamanho da fonte refere-se à fonte do pai. 1 vw é 1 % da largura da janela. A ferramenta converte primeiro seu valor para px e daí para todas as outras unidades.
Bom saber
- Se o visitante aumentou a fonte do navegador, os valores em rem escalam sozinhos, enquanto px fica fixo (acessibilidade, WCAG 1.4.4).
- Se o seu CSS define
html { font-size: 62.5% }, 1 rem = 10 px. Então informe 10 como tamanho base. - em se acumula: 1,5 em dentro de um elemento com 1,5 em dá 2,25 vezes. rem evita esse problema.
- rem é comum para espaçamentos e tamanhos de fonte; px continua útil para linhas finas e bordas.
Perguntas frequentes
Como converter px em rem?
Divida o valor em px pelo tamanho de fonte base. Com 16 px: 24 px / 16 = 1,5 rem.
Quantos px tem 1 rem?
Por padrão 16 px, porque os navegadores definem assim a fonte raiz. Se alguém muda a fonte do navegador ou define font-size no html, o valor muda.
Qual a diferença entre em e rem?
rem sempre se refere à fonte raiz (html), em à do elemento pai. Por isso valores em podem se multiplicar em elementos aninhados.
Quantos pt são 16 px?
12 pt, pois 1 pt = 4/3 px. Ao contrário, 10 pt são cerca de 13,33 px.
Fontes e base legal
- W3C – CSS Values and Units Module Level 4: absolute lengths (1in = 96px = 72pt) e font-relative lengths (em, rem)
- MDN – CSS-Längeneinheiten (rem, em, vw)
- W3C WCAG 2.2 – Success Criterion 1.4.4 Resize Text (unidades relativas respeitam o tamanho da fonte do usuário)
Última atualização: · Princípios editoriais
Ferramentas relacionadas
- Pixels para cmConverta pixels para cm com a resolução certa: pixels para cm, mm e polegadas, comprimento em pixels e o tamanho de impressão de uma foto a 300 dpi.
- Gerador de gradiente CSSCrie gradientes CSS: lineares, radiais ou cônicos, quantas paradas de cor quiser, ângulo e cor de fallback – prévia ao vivo e CSS pronto para copiar.
- Gerador de box-shadow CSSCrie sombras CSS com controles: várias sombras, deslocamento, desfoque, expansão, cor com transparência, inset e modelos – prévia ao vivo e CSS para copiar.
- Gerador de border-radius CSSArredonde cantos com controles: todos juntos ou um a um, em px ou %, elípticos com 8 valores – forma abreviada mais curta, prévia ao vivo e CSS para copiar.
- Combinação de fontes para título e textoPares de fontes para título e texto com prévia ao vivo, CSS para copiar e disponibilidade no Windows, Mac, iPhone e Android – só fontes do sistema.
- Conversor de cores: HEX, RGB, HSL, HSV, CMYKConverta cores: HEX para RGB, RGB para HEX, HSL, HSV, HWB e CMYK. Digite em qualquer formato ou use o seletor de cores e copie o resultado, tudo no navegador.
- Qual é o meu endereço IP?Mostra na hora seu endereço IP público, detecta se é IPv4 ou IPv6 e explica a diferença. Grátis – seu IP não é armazenado.
- Calculadora CSS clampCalculadora CSS clamp para tamanhos de fonte e espaçamentos fluidos: informe valor mínimo, máximo e faixa de viewport e copie o clamp() pronto.
- Minificar JavaScriptMinificar JavaScript: remova comentários e espaços, reduza o código e veja a economia em bytes. No navegador, sem upload.