Pixels em rem
Converta valores de pixel em rem para layouts CSS modernos. rem é dimensionado de acordo com o tamanho da fonte raiz do usuário – melhor para acessibilidade do que px fixo.
Como converter px em rem
1. Digite o valor do pixel do seu design (por exemplo, 32 px).
2. Defina o tamanho da fonte raiz (padrão 16 px se inalterado).
3. Copie o resultado rem em sua folha de estilo.
4. Use rem para tamanhos de fonte, espaçamento e escala de componentes; px para bordas finas, se necessário.
Exemplos de Px para rem
Tipo de corpo e título
16 px = 1 rem (padrão). 24 px = cabeçalho de 1,5 rem. 14 px = 0,875 rem texto pequeno.
Raiz personalizada de 10 px (sistemas de design)
Algumas equipes definem html { font-size: 62,5% } então 1 rem = 10 px. Então token de design de 32 px = 3,2 rem.
Escala de espaçamento
grade de 8 px → 0,5 rem na raiz de 16 px. Preenchimento de 16 px = 1 rem; ritmo consistente em escalas semelhantes ao Tailwind.
Quando converter px em rem
• Quando você implementa especificações Figma em CSS responsivo com zoom acessível.
• Quando você alinha com tokens do sistema de design definidos em rem.
• Quando os usuários substituem o tamanho da fonte padrão do navegador - os layouts rem se adaptam.
rem vs em no componente CSS
em são compostos dentro de elementos aninhados com diferentes tamanhos de fonte - o preenchimento em em aumenta com o texto local. rem permanece vinculado à raiz, fornecendo espaçamento previsível entre os componentes. Muitas equipes usam rem para escala de layout e em apenas para espaçamento entre letras ou microajustes vinculados ao tipo local.
Perguntas frequentes
O que é rem?
rem = "root em". 1 rem é igual ao tamanho da fonte do elemento html, não do pai.
Por que não usar px em todos os lugares?
O px fixo ignora as preferências de fonte do usuário. rem respeita o dimensionamento de raiz para acessibilidade (WCAG).
Tamanho da fonte raiz padrão?
A maioria dos navegadores usa como padrão 16 px em html. Os usuários podem alterar isso nas configurações.
Fórmula?
rem = px ÷ rootFontSizePx. Exemplo: 20 px ÷ 16 = 1,25 rem.
Rem funciona para margens e preenchimento?
Sim — rem se aplica a qualquer propriedade de comprimento CSS, não apenas ao tamanho da fonte.