Conversor de Unidades CSS
Converta entre px, rem, em e pt. Personalize o tamanho de fonte base.
Pontos (pt):12pt
Tamanho de fonte do elemento <html> do seu site (padrão do navegador é 16px)
rem é relativo ao tamanho de fonte do elemento raiz (<html>). O padrão do navegador é 16px, então 1rem = 16px a menos que seja alterado.
1pt = 1,333px a 96 DPI (resolução de tela). Pontos são usados principalmente em CSS de impressão e ferramentas de design.
Tamanhos CSS comuns
| px | rem | pt | Uso típico |
|---|---|---|---|
| 8 | 0.5 | 6 | Ícone / border-radius |
| 10 | 0.625 | 7.5 | Código, texto pequeno |
| 12 | 0.75 | 9 | Texto pequeno / dica |
| 14 | 0.875 | 10.5 | Corpo de texto (compacto) |
| 16 | 1 | 12 | Corpo de texto padrão |
| 18 | 1.125 | 13.5 | Corpo de texto (confortável) |
| 20 | 1.25 | 15 | Texto grande / subtítulo |
| 24 | 1.5 | 18 | H3 / cabeçalho grande |
| 32 | 2 | 24 | H2 / cabeçalho display |
| 48 | 3 | 36 | H1 / cabeçalho principal |
Perguntas Frequentes
px (pixels) é uma unidade absoluta que sempre é renderizada no mesmo tamanho independentemente das configurações do usuário. rem (root em) é relativo ao tamanho de fonte do elemento raiz <html> — com padrão 16px: 1rem = 16px, 2rem = 32px. em é relativo ao tamanho de fonte do elemento pai. rem é preferido para layouts escaláveis: se um usuário define o tamanho de fonte do navegador como 20px para acessibilidade, todos os valores rem são dimensionados proporcionalmente.
Divida o valor em pixels pelo tamanho de fonte raiz. Com o padrão de 16px: rem = px ÷ 16. Por exemplo: 24px ÷ 16 = 1,5rem, 32px ÷ 16 = 2rem. Muitos desenvolvedores definem html { font-size: 62,5%; } para que 1rem = 10px, simplificando os cálculos.
Com o tamanho de fonte base padrão de 16px: 16px = 1rem. Valores chave: 8px = 0,5rem, 12px = 0,75rem, 24px = 1,5rem, 32px = 2rem, 48px = 3rem.
rem respeita a preferência de tamanho de fonte do navegador do usuário, o que é importante para acessibilidade. Usuários com problemas de visão podem aumentar o tamanho de fonte base do navegador, e todos os tamanhos rem são dimensionados automaticamente. Os valores px ignoram essa configuração.