px, rem, em, vh — quando usar cada unidade CSS
Guia prático para escolher a unidade CSS certa em cada situação: layout, tipografia, espaçamento e design responsivo.
Unidades absolutas vs relativas
As unidades CSS se dividem em duas grandes categorias. As unidades absolutas têm um tamanho fixo que não muda com base no contexto. As unidades relativas derivam seu tamanho de uma referência: um elemento pai, o tamanho de fonte raiz ou as dimensões do viewport.
| Unidade | Tipo | Relativa a |
|---|---|---|
px | Absoluta | Pixel CSS (independente do dispositivo) |
pt, cm | Absoluta | Medida física (impressão) |
rem | Relativa | Font-size de <html> |
em | Relativa | Font-size do elemento atual |
% | Relativa | Dimensão do elemento pai |
vh, vw | Relativa | Altura / largura do viewport |
dvh, dvw | Relativa | Viewport dinâmico (UI do browser incluída) |
Para design em tela, prefira unidades relativas para tipografia e espaçamento. Unidades absolutas são reservadas para elementos que nunca devem escalar: bordas, contornos e detalhes decorativos.
px — precisão de pixel
Um pixel CSS não é um pixel físico de tela. É uma unidade independente do dispositivo definida de modo que um pixel CSS equivale aproximadamente a 1/96 de polegada. Em telas de alta densidade (Retina), um pixel CSS corresponde a 2 ou 3 pixels físicos — mas da perspectiva do CSS continua sendo 1px.
Quando usar px
- Bordas e contornos:
border: 1px solid— nunca devem escalar - Box-shadow:
box-shadow: 0 2px 8px rgba(0,0,0,.15) - Tamanhos de ícones com sistemas de ícones de tamanho fixo
- Breakpoints de media query (embora em seja mais seguro — veja Guia de decisão)
Quando NÃO usar px
- font-size — ignora as preferências do usuário, falha no WCAG 1.4.4
- line-height — prefira sem unidade (
1.5) ou rem - padding e margin quando quiser que escalem com o tamanho de fonte
Regra de acessibilidade: se um usuário configura o navegador para 200% do tamanho de texto, as fontes em px ignoram isso. As fontes em rem respeitam. Não é opcional — é um requisito WCAG 2.1 Nível AA.
rem — escala relativa à raiz
rem significa root em. Sempre é relativo ao font-size definido no elemento <html>. O padrão do navegador é 16px, portanto 1rem = 16px a menos que você mude isso.
/* Padrão: 1rem = 16px */
h1 { font-size: 2rem; } /* 32px */
p { font-size: 1rem; } /* 16px */
.small { font-size: .75rem; } /* 12px */Como rem está ancorado à raiz, ele não se acumula quando os elementos estão aninhados — ao contrário do em. Isso o torna a escolha padrão para tamanhos de fonte e espaçamento em um projeto.
O truque dos 62.5%
Definir html { font-size: 62.5%; } faz com que 1rem = 10px, simplificando o cálculo mental (1.6rem = 16px). Hoje é considerado um anti-padrão porque:
- Substitui a preferência de tamanho de fonte do navegador do usuário
- Componentes de terceiros que dependem da base de 16px serão renderizados incorretamente
- Ferramentas CSS modernas (
clamp(), custom properties) eliminam a necessidade de cálculo em base 10
Use rem com a base padrão de 16px. Divida por 16 mentalmente ou use um conversor px-to-rem.
em — dimensionamento relativo ao contexto
em é relativo ao font-size do elemento atual. Se nenhum font-size está definido no elemento, ele é herdado do pai — por isso em pode se acumular quando os elementos estão aninhados.
/* Exemplo de acumulação */
.parent { font-size: 1.2em; } /* 19.2px se o pai é 16px */
.child { font-size: 1.2em; } /* 23.04px — 1.2 × 19.2px */Quando em brilha
Em é a unidade certa quando você quer que o espaçamento ou o tamanho escale proporcionalmente ao font-size do próprio componente, não à raiz global:
.btn {
font-size: 1rem;
padding: .5em 1.2em; /* escala com o font-size do btn */
}
.btn-large {
font-size: 1.25rem;
/* o padding escala automaticamente */
}Quando evitar em
- Tamanhos de fonte globais — use rem para evitar acumulações no DOM
- Dimensões de layout — use rem, % ou unidades viewport
vh e vw — unidades viewport
vh (altura do viewport) e vw (largura do viewport) equivalem cada um a 1% da dimensão correspondente do viewport. Ideais para layouts que precisam preencher a tela.
.hero {
height: 100vh;
width: 100vw;
}O problema de 100vh no mobile
Em navegadores mobile, a barra de endereços e o chrome de navegação ocupam espaço — mas não são subtraídos de 100vh. Isso faz com que um elemento 100vh seja mais alto que a tela visível, causando uma barra de rolagem indesejada.
A solução moderna: dvh
A unidade dvh (dynamic viewport height) foi criada para resolver isso. Ela se atualiza quando a UI do navegador aparece e desaparece:
.hero {
height: 100vh; /* fallback para navegadores mais antigos */
height: 100dvh; /* dinâmico — considera o chrome colapsável */
}Sempre inclua o fallback vh. Outras unidades viewport úteis: svh, lvh, vmin e vmax.
Tabela de conversão rápida (base 16px)
Quando você conhece o valor em pixels mas precisa do equivalente em rem, divida por 16:
| px | rem | em (1:1) |
|---|---|---|
| 8 | 0.5rem | 0.5em |
| 12 | 0.75rem | 0.75em |
| 14 | 0.875rem | 0.875em |
| 16 | 1rem | 1em |
| 18 | 1.125rem | 1.125em |
| 20 | 1.25rem | 1.25em |
| 24 | 1.5rem | 1.5em |
| 32 | 2rem | 2em |
| 48 | 3rem | 3em |
| 64 | 4rem | 4em |
Precisa converter uma folha de estilos inteira? Use o Conversor de Unidades CSS.
Guia de decisão
Em caso de dúvida, use esta tabela como referência rápida:
| Propriedade / Caso de uso | Unidade recomendada |
|---|---|
| Tamanho de fonte | rem |
| Padding / margin (global) | rem |
| Padding interno a um componente | em |
| Bordas, contornos, box-shadow | px |
| Colunas / larguras de layout | % ou fr (CSS Grid) |
| Seções hero / tela cheia | dvh com fallback vh |
| Breakpoints de media query | em (mais acessível) ou rem |
| Line-height | Sem unidade (1.5) ou rem |
| Tamanho de fonte responsivo (fluido) | clamp() com valores rem |
Tipografia fluida com clamp() é um padrão poderoso. Use o Gerador Font Size Clamp para construir esses valores visualmente.