px, rem, em e pt — qual usar?
px é absoluto (pixels). rem é relativo à fonte raiz (html) — ideal para layouts acessíveis que respeitam o zoom do usuário. em é relativo ao tamanho de fonte do próprio elemento (ou do pai). pt (pontos) vem da tipografia impressa: 1pt = 1/72 de polegada, e 1px ≈ 0,75pt na referência de 96 DPI.
Como usar
- Em Valor, digite a medida que quer converter.
- Em Unidade, escolha a unidade de origem: px, rem, em, pt ou %.
- Ajuste a Fonte raiz (px) se o seu projeto não usa 16px no
html. - Os quadros abaixo mostram o mesmo valor em todas as unidades de medida CSS da ferramenta, atualizados a cada alteração.
Exemplo
Com a fonte raiz em 16px, 24px = 1,5rem = 1,5em = 18pt = 150%. Se a raiz for 10px, os mesmos 24px viram 2,4rem.
Perguntas frequentes
Quais são as unidades de medida CSS mais usadas?
Para tamanho de texto e espaçamento, as mais comuns são px, rem, em e %. O CSS tem outras, como vw e vh (relativas à janela) e ch (largura de um caractere), que este conversor não calcula porque dependem da tela ou da fonte usada.
Por que usar rem em vez de px?
Com rem, basta mudar o font-size do html para reescalar toda a interface, e o texto respeita as preferências de acessibilidade do navegador.
1rem é sempre 16px?
Só se a fonte raiz estiver em 16px (o padrão). Se você definir html{font-size:62.5%}, 1rem passa a valer 10px — por isso a base é configurável aqui.