Conversor de Pixel / REM / EM
Converta entre as unidades CSS px, rem e em instantaneamente. Defina um tamanho de fonte base personalizado e obtenha uma tabela de referência útil. Conversor de unidades CSS gratuito.
| px | rem | em |
|---|---|---|
| 4px | 0.25rem | 0.25em |
| 8px | 0.5rem | 0.5em |
| 10px | 0.625rem | 0.625em |
| 12px | 0.75rem | 0.75em |
| 14px | 0.875rem | 0.875em |
| 16px | 1rem | 1em |
| 18px | 1.125rem | 1.125em |
| 20px | 1.25rem | 1.25em |
| 24px | 1.5rem | 1.5em |
| 28px | 1.75rem | 1.75em |
| 32px | 2rem | 2em |
| 40px | 2.5rem | 2.5em |
| 48px | 3rem | 3em |
| 64px | 4rem | 4em |
Perguntas frequentes
Qual é a diferença entre px, rem e em?
px (pixels) são unidades absolutas — 1px equivale sempre a um pixel físico na escala 1x. rem (root em) é relativo ao tamanho de fonte do elemento raiz <html>, tipicamente 16px por omissão. em é relativo ao tamanho de fonte do elemento pai, o que pode acumular e multiplicar-se de forma imprevisível em elementos aninhados.
Por que devo usar rem em vez de px para tamanhos de fonte?
Usar rem permite aos utilizadores escalar todo o seu site alterando o tamanho de fonte padrão do navegador. Isso melhora a acessibilidade para utilizadores com baixa visão. px ignora as preferências de tamanho de fonte do navegador, enquanto rem e em as respeitam. A maioria dos sistemas de design modernos recomenda rem para tipografia e espaçamento.
Que tamanho de fonte base devo usar?
O tamanho de fonte padrão do navegador é 16px, sendo a base mais comum. Alguns desenvolvedores definem 62,5% (10px) no elemento html para facilitar os cálculos (1rem = 10px). No entanto, isso pode substituir as preferências do utilizador e prejudicar a acessibilidade. A melhor prática é deixar o tamanho de fonte raiz no valor padrão do navegador e trabalhar em rem.