Pixels não são todos iguais

O pixel não é uma medida fixa

Pense comigo: você abre uma imagem de 1080 pixels de largura no seu monitor de 27 polegadas e ela parece normal. Abre a mesma imagem em um celular de 6 polegadas com a mesma resolução de 1080px e ela parece nítida, menor, mais densa. Por quê? Porque pixel não é uma medida fixa de tamanho. Pixel é um ponto de luz, e o tamanho físico dele depende da tela onde ele aparece.

E aqui entra um conceito que você precisa gravar: PPI (Pixels Per Inch, ou pixels por polegada). PPI é a densidade de pixels em uma tela. Quanto mais pixels você espreme em uma polegada, mais nítida a imagem fica, mas menor cada pixel individual se torna. Um monitor de desktop pode ter 96 PPI. Um iPhone pode chegar a cerca de 460 PPI. A mesma quantidade de pixels ocupa um espaço físico totalmente diferente.

E o que são DP, rem e em?

Se pixel muda de tamanho conforme a tela, o que acontece com o botão de 48 pixels do seu Figma no celular do usuário? A resposta curta é tranquilizadora: na web e no Figma, nada de ruim. O px do seu Figma é um pixel lógico, e o navegador compensa a densidade sozinho, então seu botão de 48px não vira uma lasquinha minúscula em tela densa nenhuma.

O problema real do px na web é outro: ele ignora o tamanho de fonte que o usuário configurou no navegador ou no sistema. É para respeitar essa preferência que existem rem e em. E foi exatamente isso, somado à tela dividida, que quebrou o layout no Galaxy A14 lá do início: fonte ampliada pelo usuário, não densidade de pixels. Vale conhecer as principais unidades de cada mundo:

• DP (Density-independent Pixels): é a unidade que o Android usa. 1 dp = 1 pixel em uma tela de 160 PPI. Em telas mais densas, o sistema multiplica automaticamente. Quando você projeta para Android, pense em dp, não em px.
• pt (Points): o equivalente da Apple. 1 pt = 1 pixel em uma tela de 163 PPI (o iPhone original). Retina displays usam 2x ou 3x esse valor por baixo dos panos.
• rem: unidade da web. 1 rem = o tamanho da fonte raiz do documento (geralmente 16px). Se você define um botão com padding: 1rem, ele se adapta proporcionalmente quando o usuário muda o tamanho de fonte no navegador.
• em: similar ao rem, mas relativo ao tamanho da fonte do próprio elemento, não à raiz. Se um botão está com fonte de 20px, 1em ali vale 20px; troque a fonte do botão e o em acompanha. Útil para componentes que precisam escalar internamente, mas mais difícil de controlar em hierarquias complexas.

Sim, são nomes estranhos. Mas cada um resolve um problema específico para o contexto onde é usado, e você não precisa decorar as fórmulas, só entender que existem e por quê.

Sei que esses conceitos podem soar um pouco técnicos e até intimidantes no início, mas garanto que, uma vez que você entende o que significam e como influenciam o design, eles se tornam parte natural do seu processo. O ponto central é: unidades relativas existem para que seu design respeite o contexto do usuário, não force o usuário a se adaptar ao seu layout.