PX para REM: O Guia do Desenvolvedor para Tipografia Escalável
Aprenda por que as unidades rem melhoram a acessibilidade, como calculá-las e as melhores práticas para tipografia responsiva em CSS.
A escolha entre px e rem em CSS não é apenas uma preferência estilística — tem consequências diretas na acessibilidade, controlo do utilizador e design responsivo. Milhões de utilizadores definem um tamanho de fonte personalizado nas preferências do browser, e uma folha de estilos escrita inteiramente em px ignora completamente essa configuração.
Este guia explica a mecânica de cada unidade, a fórmula para converter px em rem e as regras práticas para saber quando usar cada uma numa base de código CSS real.
Entendendo as unidades CSS (px, rem, em, vh)
CSS oferece múltiplas unidades de comprimento para diferentes casos de uso. px (pixels) é uma unidade absoluta. rem (root em) é uma unidade relativa baseada no font-size do elemento raiz (<html>). em é uma unidade relativa baseada no font-size do elemento atual. vh e vw são relativas ao viewport: 1vh = 1% da altura do viewport. Cada unidade tem casos de uso apropriados e inapropriados.
Ferramenta gratuita Conversor PX para REM Converta instantaneamente valores em pixels para rem com qualquer tamanho basePor que px é problemático para acessibilidade
Os browsers permitem que os utilizadores definam um tamanho de fonte predefinido nas preferências (tipicamente 16px por padrão, mas os utilizadores podem definir 20px, 24px ou mais). Quando define font-size: 16px em CSS, isso substitui a preferência do utilizador. Isso viola o Critério de Sucesso WCAG 2.1 1.4.4 (Redimensionar Texto), que exige que o texto possa ser redimensionado até 200% sem perda de conteúdo ou funcionalidade.
Como rem funciona (root font-size)
A unidade rem é sempre relativa ao font-size do elemento <html>. Por padrão, os browsers definem isso como 16px. Se um utilizador aumentar o tamanho de fonte do browser para 20px, então 1rem = 20px — todos os valores baseados em rem escalam proporcionalmente. Nunca defina font-size em <html> em pixels (ex. html { font-size: 16px }) pois isso derrota o propósito. Use uma percentagem: html { font-size: 112.5% } define a base como 18px num browser padrão de 16px.
Ferramenta gratuita Verificador de Contraste de Cores Verifique as taxas de contraste WCAG 2.1 juntamente com a acessibilidade do tamanho de fonteFórmula PX para REM
A fórmula é simples: rem = px / tamanho-fonte-base. Com a base padrão de 16px: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 24px = 1.5rem, 32px = 2rem. Em pré-processadores CSS (Sass, Less), pode definir uma função. Em CSS moderno, propriedades personalizadas e calc() podem automatizar isso sem pré-processador.
/* Função Sass */
@function rem($px) {
@return #{$px / 16}rem;
}
/* Uso */
font-size: rem(18); /* → 1.125rem */
/* CSS puro */
:root {
--base: 16;
}
.text {
font-size: calc(18 / var(--base) * 1rem);
}Quando usar rem vs em vs px
Use rem para tipografia global (texto do corpo, títulos, etiquetas) e para espaçamento que deve escalar com a preferência de tamanho de fonte do utilizador. Use em para espaçamento ao nível do componente proporcional ao próprio font-size (padding dentro de um botão). Use px para bordas, sombras e elementos de layout que não devem escalar com o texto. Use unidades viewport (vh, vw) para elementos de layout relacionados com o viewport.
Propriedades CSS personalizadas para a base rem
Um padrão comum é definir uma propriedade CSS personalizada para o tamanho de fonte base. Defina font-size como percentagem em <html> para respeitar as preferências do utilizador, depois use rem em todo o lado. A função clamp() cria tipografia fluida que escala entre valores mínimo e máximo baseado na largura do viewport, sem breakpoints de media query.
/* Base acessível */
html {
font-size: 100%;
}
body {
font-size: 1rem;
}
h1 {
font-size: 2rem;
}
/* Tipografia fluida com clamp */
.hero-title {
font-size: clamp(1.5rem, 4vw, 3rem);
}