Divida os pixels pelo font-size da raiz. Com a base de 16px: 24px ÷ 16 = 1,5rem, 14px ÷ 16 = 0,875rem e 10px ÷ 16 = 0,625rem. Para o caminho inverso, multiplique: 1,25rem × 16 = 20px.
Carregando ferramenta… / Loading tool…
Converta px, rem, em, pt, cm, vw e mais, troque unidades em blocos inteiros de CSS, gere clamp() fluido, escala tipográfica e media queries em em.
rem é uma unidade relativa ao font-size do elemento raiz (html). Como os navegadores usam 16px por padrão, 1rem vale 16px, 24px vale 1,5rem (24 ÷ 16) e 12px vale 0,75rem. Para voltar, multiplique: 2rem × 16 = 32px. Esta ferramenta deixa você mudar a base, porque projetos que definem outro font-size na raiz têm outra conversão. O em é parecido, mas a base muda com o contexto: em font-size ele usa o tamanho do elemento pai, e nas outras propriedades (padding, margin, width) usa o tamanho do próprio elemento. Por isso em compõe quando aninhado, e rem não. As unidades absolutas têm relação fixa com o px definida pela especificação: 1in = 96px, 1pt = 1/72in (1pt = 1,333px), 1pc = 16px, 1cm = 96 ÷ 2,54 px. Em tela, porém, são medidas de CSS e não centímetros físicos. vw e vh valem 1% da largura e da altura do viewport. Além da conversão simples, a ferramenta troca unidades em um bloco de CSS inteiro (ignorando comentários, strings, url() e nomes), mostra uma tabela de 4px a 128px ao lado da escala de espaçamento do Tailwind, gera clamp() para tipografia fluida com a fórmula explicada, monta escalas tipográficas exportáveis e converte breakpoints de px para em. Usar rem para tamanhos de fonte ajuda quem altera o tamanho de fonte padrão do navegador, o que é parte de cumprir o critério 1.4.4 (Redimensionar texto, nível AA) das WCAG, segundo o qual o texto pode ser ampliado até 200% sem perda de conteúdo ou funcionalidade. Tipografia fluida com vw exige cuidado extra com esse critério, e a ferramenta avisa quando o máximo fica abaixo do dobro do mínimo.
Cole o código no seu HTML e a ferramenta aparece na sua página, sem a navegação e sem os anúncios do J-Kit. Ela continua rodando no navegador de quem visita o seu site.
<iframe
src="https://jkit.tools/embed/pt-BR/conversor-px-rem"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Conversor de px para rem, em e outras unidades CSS"
></iframe>Estas referências ajudam a contextualizar fórmulas, padrões, APIs e limitações usadas nesta página. Elas não substituem validação profissional quando o resultado tiver impacto jurídico, financeiro, médico ou operacional.
Divida os pixels pelo font-size da raiz. Com a base de 16px: 24px ÷ 16 = 1,5rem, 14px ÷ 16 = 0,875rem e 10px ÷ 16 = 0,625rem. Para o caminho inverso, multiplique: 1,25rem × 16 = 20px.
Aqui, % é porcentagem do font-size de referência (como em font-size: 150%). Em width, padding e outras propriedades o % se refere a outra coisa, então esta conversão não vale para elas.
Para rem: 24 ÷ 16 = 1.5 rem
Cole um bloco de CSS e troque todos os valores de uma unidade por outra, sem mexer no resto. Comentários, strings, url() e números dentro de nomes (classes, variáveis, cores) ficam intactos.
Cole um bloco de CSS acima para converter. O resultado aparece aqui na hora.
Referência rápida com font-size da raiz de 16px. Clique em um valor em rem para copiar. A coluna Tailwind mostra o passo n em que n × 0,25rem dá o mesmo tamanho.
| px | rem | Tailwind (n) |
|---|---|---|
| 4px | 1 | |
| 6px | 1,5 | |
| 8px | 2 | |
| 10px | 2,5 | |
| 12px | 3 | |
| 14px | 3,5 | |
| 16px | 4 | |
| 18px | - | |
| 20px | 5 | |
| 24px | 6 | |
| 28px | 7 | |
| 32px | 8 | |
| 36px | 9 | |
| 40px | 10 | |
| 48px | 12 | |
| 56px | 14 | |
| 64px | 16 | |
| 72px | - | |
| 80px | 20 | |
| 96px | 24 | |
| 112px | 28 | |
| 128px | 32 |
| n | rem | px |
|---|---|---|
| 0 | 0 | 0 |
| 0,5 | 0,125 | 2 |
| 1 | 0,25 | 4 |
| 1,5 | 0,375 | 6 |
| 2 | 0,5 | 8 |
| 2,5 | 0,625 | 10 |
| 3 | 0,75 | 12 |
| 3,5 | 0,875 | 14 |
| 4 | 1 | 16 |
| 5 | 1,25 | 20 |
| 6 | 1,5 | 24 |
| 7 | 1,75 | 28 |
| 8 | 2 | 32 |
| 9 | 2,25 | 36 |
| 10 | 2,5 | 40 |
| 11 | 2,75 | 44 |
| 12 | 3 | 48 |
| 14 | 3,5 | 56 |
| 16 | 4 | 64 |
| 20 | 5 | 80 |
| 24 | 6 | 96 |
| 28 | 7 | 112 |
| 32 | 8 | 128 |
| 36 | 9 | 144 |
| 40 | 10 | 160 |
| 44 | 11 | 176 |
| 48 | 12 | 192 |
| 52 | 13 | 208 |
| 56 | 14 | 224 |
| 60 | 15 | 240 |
| 64 | 16 | 256 |
| 72 | 18 | 288 |
| 80 | 20 | 320 |
| 96 | 24 | 384 |
No Tailwind, o espaçamento é n × 0,25rem (a variável --spacing vale 0,25rem por padrão), então p-4 é 1rem. A coluna px segue o font-size da raiz informado acima. Os passos listados são os da escala clássica; a tabela da esquerda mostra - quando o tamanho não cai em um deles.
Gere um clamp() que faz o tamanho crescer de forma linear entre dois viewports e travar nos extremos. A saída usa rem + vw, com a fórmula mostrada passo a passo.
O tamanho máximo é menor que o dobro do mínimo. Adrian Roselli aponta que, com vw ou clamp() limitando o tamanho, o usuário pode não conseguir chegar a 200% (WCAG 1.4.4, nível AA), e sugere nunca deixar o máximo abaixo do dobro do tamanho base. Isto não garante conformidade em nenhum caso: teste com zoom de 200% e 300%.
1) Inclinação = (24 - 16) ÷ (1280 - 320) = 0,008333 px de fonte por px de tela
2) Em vw: 0,008333 × 100 = 0,8333vw
3) Termo fixo = 16 - 0,008333 × 320 = 13,3333px = 0,8333rem (÷ 16)
4) Valor preferido = 0.8333rem + 0.8333vw, travado entre o mínimo e o máximo pelo clamp()
vw puro ignora a preferência de tamanho de fonte do usuário e pode quebrar o zoom do texto. Por isso o termo fixo sai em rem: ele acompanha a preferência, e só a parte que cresce com a tela usa vw.
| Viewport | px | rem |
|---|---|---|
| 320px | 16 | 1 |
| 375px | 16,46 | 1,029 |
| 414px | 16,78 | 1,049 |
| 768px | 19,73 | 1,233 |
| 1024px | 21,87 | 1,367 |
| 1280px | 24 | 1,5 |
| 1440px | 24 | 1,5 |
| 1920px | 24 | 1,5 |
Tipografia fluida muda de tamanho com a tela
Tamanho agora: 20px (1,25rem)
A caixa usa a mesma fórmula com cqw (unidade de container) no lugar de vw, então o navegador resolve o clamp() de verdade. Em telas estreitas a caixa não passa da largura da tela.
Cada passo é o tamanho base multiplicado pela razão elevada ao número do passo. Escolha a razão, veja a escala em rem e px e exporte como variáveis CSS ou Tailwind.
As amostras param em 72px para caber na tela; os valores da tabela são os reais.
:root {
--text-7xl: 5.9605rem;
--text-6xl: 4.7684rem;
--text-5xl: 3.8147rem;
--text-4xl: 3.0518rem;
--text-3xl: 2.4414rem;
--text-2xl: 1.9531rem;
--text-xl: 1.5625rem;
--text-lg: 1.25rem;
--text-base: 1rem;
--text-sm: 0.8rem;
--text-xs: 0.64rem;
}Converta breakpoints de px para em e gere as media queries. Cole uma lista (um por linha, ou separados por vírgula) em px, em ou rem.
| px | em | Condição | Copiar |
|---|---|---|---|
| 640 | 40 | (min-width: 40em) | |
| 768 | 48 | (min-width: 48em) | |
| 1024 | 64 | (min-width: 64em) | |
| 1280 | 80 | (min-width: 80em) | |
| 1536 | 96 | (min-width: 96em) |
@media (min-width: 40em) {
/* ... */
}
@media (min-width: 48em) {
/* ... */
}
@media (min-width: 64em) {
/* ... */
}
@media (min-width: 80em) {
/* ... */
}
@media (min-width: 96em) {
/* ... */
}A especificação de Media Queries diz que unidades relativas em media queries são baseadas no valor inicial, nunca em declarações da página. No HTML, o em vale o font-size inicial definido pelo navegador ou pela preferência do usuário, e não o que o seu CSS declara.
Consequência prática: em e rem valem o mesmo dentro de uma media query, e um html com font-size: 62.5% não muda os breakpoints. Se o usuário aumentar o tamanho de fonte padrão, os breakpoints em em sobem junto e o layout muda mais cedo, o que costuma ser o desejado para texto maior.
A sintaxe de intervalo (width >= 48em, width < 48em) dispensa o truque do 0,02px, porque o limite superior é exclusivo. Ela só funciona em navegadores recentes; confira o suporte antes de usar em produção.
rem é múltiplo do font-size do elemento raiz, que por padrão é o tamanho de fonte configurado no navegador (16px na configuração padrão). Se a pessoa aumenta esse tamanho nas configurações, tudo em rem cresce junto. Um valor em px fica fixo, não importa a preferência. Escolha o padrão do navegador abaixo e compare.
O texto se ajusta ao leitor?
font-size: 16px resulta em 16px, sempre
O texto se ajusta ao leitor?
font-size: 1rem resulta em 16px
O zoom do navegador (Ctrl e +) amplia a página inteira, inclusive o que está em px. A preferência de tamanho de fonte, disponível em navegadores como Chrome, Edge e Firefox, só afeta o que é relativo (rem, em, %).