Softonic

Conversor de EM para REM

Etapa 1 / 2 rem
Resultados

Um designer envia especificações do Figma em pixels, a base de código usa rem, e metade dos componentes aninha em em em lugares onde eles mudam com base no tamanho da fonte do pai. Este conversor calcula os equivalentes em px e rem de qualquer valor em em qualquer tamanho de fonte raiz, para que você possa copiar o número certo para o arquivo CSS sem recalcular na sua cabeça toda vez.

Como converter em, rem e pixels

  1. 1

    Defina o tamanho da fonte base

    Geralmente 16px, o padrão do navegador. Alguns sistemas de design usam 14px ou 18px como raiz.

  2. 2

    Para em, defina o tamanho da fonte do pai

    em é relativo ao elemento pai. Se o pai for 20px, 1em equivale a 20px.

  3. 3

    Insira um valor

    Em em; os equivalentes em px e rem se atualizam automaticamente.

  4. 4

    Leia a conversão

    Valores de px, em e rem com decimais arredondados e exatos mostrados.

As fórmulas

rem é sempre relativo ao elemento raiz (<html>):

px = rem * root_font_size rem = px / root_font_size

em é relativo ao pai do elemento atual:

px = em * parent_font_size em = px / parent_font_size

Conversões com raiz de 16px

Pixels rem em (com pai de 16px)
10 0.625 0.625
12 0.75 0.75
14 0.875 0.875
16 1 1
18 1.125 1.125
20 1.25 1.25
24 1.5 1.5
32 2 2
48 3 3
64 4 4

Quando usar cada um

  • px: bordas, detalhes finos, controle exato. 1px box-shadow, 1px border.
  • rem: margens, preenchimento, tipografia que deve escalar com a preferência de fonte do usuário.
  • em: espaçamento local do componente que se adapta ao seu próprio tamanho de fonte (botões, badges).
  • % e vw/vh: relativos ao contêiner e à viewport, conversa separada.

O truque dos 62.5%

Algumas bases de código definem html { font-size: 62.5%; }, o que faz com que 1rem = 10px. Isso facilita a matemática rem (24px = 2.4rem) à custa de quebrar as preferências de tamanho de fonte do navegador para usuários que aumentam o texto. A prática moderna evita esse truque; use 16px como raiz e tolere decimais.

Armadilha da herança em

em herda através da cascata. Se um pai tem tamanho de fonte 1.2em relativo ao seu próprio pai, e dentro dele você tem preenchimento 1em, o preenchimento é 1.2 * 1.2 = 1.44 * raiz. Ems aninhados se acumulam, o que pode produzir resultados surpreendentes. Rem evita isso porque sempre se resolve contra <html>.

Exemplo de escala tipográfica

Uma escala de tipo modular comum com razão de 1.25:

Nível rem px (com raiz de 16)
Legenda 0.75 12
Corpo 1 16
Corpo+ 1.125 18
H4 1.25 20
H3 1.5625 25
H2 1.953 ~31
H1 2.441 ~39
Destaque 3.052 ~49

Usar rem significa que cada nível escala proporcionalmente se um usuário aumentar o tamanho da fonte do navegador para acessibilidade.

Respeitando as preferências do usuário

Codificar px em toda uma folha de estilo quebra usuários que aumentam o texto por razões de visão. rem respeita essas preferências porque se resolve contra o tamanho raiz, que o usuário pode mudar. Esta é a principal razão pela qual guias de estilo recomendam rem para tipografia e espaçamento.

Perguntas frequentes

Use rem para tipografia, espaçamento e dimensionamento de layout. Use em para dimensionamento interno do componente que deve escalar com o próprio tamanho de fonte do componente (botões, ícones dentro do texto). Use px apenas para detalhes finos que não devem escalar.

Os usuários podem mudar o tamanho da fonte padrão do navegador. O Chrome tem como padrão 16px; se o usuário definir 18px, todos os seus rems são 12,5% maiores. Designers que assumem uma raiz fixa de 16px muitas vezes perdem isso; rem respeita a escolha, que é o ponto.

A escala de espaçamento do Tailwind usa rem. text-base é 1rem = 16px por padrão, text-lg é 1.125rem. A escala é consistente e respeita o tamanho da fonte raiz por padrão.

Não. Os números inseridos são usados apenas para calcular a conversão, e nada é armazenado.

Ferramentas relacionadas

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Gerador de Cores Análogas

Crie uma paleta análoga de cinco cores a partir de qualquer cor base, com o trio clássico, dois tons externos e valores hex, RGB e HSL.

Formatador de HTML

Formate HTML localmente no navegador com indentação de dois ou quatro espaços. O HTML não é enviado nem validado.

Gerador de Papel de Parede em Gradiente

Gere papéis de parede em gradiente borrados de três cores para laptop, telefone ou fundos do Zoom. Randomize ou defina o ângulo e o desfoque manualmente.

Ferramenta disponível em outros idiomas