Design
Conversor px → rem / em
Converta pixels para rem e em (e vice-versa) com uma base configurável. Essencial para tipografia fluida e layouts responsivos.
px
O padrão do navegador é 16px (1rem = 16px). Altere se o seu CSS redefinir o font-size do html — por exemplo, html { font-size: 62.5%; } faz com que 1rem = 10px — ou se o seu framework ou CMS usar uma base diferente.
px → rem / em
Digite os pixels — os resultados são calculados instantaneamente.
px
rem / em → px
Insira um valor em rem ou em — o equivalente em px é calculado instantaneamente.
rem/em
px
Tabela de referência rápida
Base: 16px
| px | rem | em |
|---|
Conceitos-chave
rem (root em) é uma unidade relativa ao
font-size do elemento raiz (<html>). Com uma base de 16px, 1rem = 16px. Alterar o font-size do documento escala todos os valores rem proporcionalmente, simplificando o design responsivo global.
em é relativo ao
font-size do elemento pai (ou do próprio elemento quando usado para font-size). Isso pode criar efeitos compostos em elementos aninhados. rem evita esse problema ao sempre ser relativo à raiz. Para espaçamento e dimensionamento dentro de componentes isolados, em pode ser preferível.
Pixels são fixos e não respeitam a preferência de tamanho de fonte do usuário no navegador. Com
rem, se o usuário aumentar o tamanho de fonte base no navegador, todo o conteúdo escala corretamente, melhorando a acessibilidade. O WCAG 1.4.4 também recomenda que o texto possa ser ampliado até 200% sem perda de funcionalidade.
Alguns projetos usam o truque de definir
html { font-size: 62.5%; } para que 1rem = 10px, facilitando o cálculo mental. Outros frameworks ou plataformas CMS podem usar uma base diferente. Use o campo de base para adaptar o conversor ao seu projeto específico.
Além de
rem e em, o CSS oferece unidades de viewport: vw (1% da largura), vh (1% da altura), vmin e vmax. O CSS moderno adiciona unidades de container query (cqi, cqb) e as funções clamp() e calc() que combinam unidades. Para tipografia fluida que escala automaticamente, clamp(1rem, 2.5vw, 2rem) cria tamanhos com mínimo e máximo definidos — sem necessidade de media queries.
Use rem para: tamanhos de fonte globais, espaçamentos do layout principal e qualquer valor que deva escalar com o documento. Use em para: espaçamentos internos de componentes autocontidos (botões, badges, tooltips) que devem escalar com o próprio texto do componente. A regra prática:
rem se quiser que algo escale com o documento raiz; em se quiser que escale com o componente em que está. Misturar ambos estrategicamente dá grande flexibilidade ao sistema de design.
O Bootstrap 5 define seus breakpoints em
em (não em rem) para que as media queries respondam ao zoom do navegador: o breakpoint md é @media (min-width: 48em), equivalente a 768px com base 16px. Os utilitários de espaçamento (p-3, m-2, etc.) são definidos em rem, respeitando automaticamente o tamanho base de fonte do navegador do usuário. Isso torna o Bootstrap acessível sem configuração adicional ao usar suas classes de espaçamento.
Desenvolvedores front-end o usam constantemente para converter valores em pixels de designs do Figma ou Sketch para rem antes de escrever CSS, garantindo que a tipografia e o espaçamento se adaptem ao tamanho de fonte do usuário. Web designers com conhecimento de código o consultam para entender a equivalência entre as métricas visuais do protótipo e as unidades CSS relativas usadas em produção. Equipes que usam frameworks CSS como Tailwind ou Bootstrap precisam converter seus valores de design para as escalas de espaçamento baseadas em rem que esses frameworks usam internamente. Especialistas em acessibilidade web o usam para garantir que os tamanhos mínimos de fonte (normalmente 16px base / 1rem) atendam às recomendações WCAG e respeitem o zoom do navegador. Estudantes de desenvolvimento web o usam como referência de aprendizado para consolidar a relação entre px e unidades relativas.
No computador, pressione Ctrl + D (Windows/Linux) ou Cmd + D (Mac) no Chrome, Firefox ou Edge para adicionar esta página aos favoritos instantaneamente. No Safari para Mac, use Cmd + D ou acesse Favoritos → Adicionar favorito. No celular com Chrome (Android), toque no menu de três pontos (⋮) e escolha «Adicionar à tela inicial» ou «Adicionar aos favoritos». No celular com Safari (iPhone/iPad), toque no botão de compartilhar (□↑) e depois em «Adicionar à tela inicial». Muitos desenvolvedores a mantêm fixada na barra de favoritos do navegador junto às suas ferramentas de código mais usadas.