Régua de pixels

O que é um pixel CSS?

Um pixel CSS é a unidade abstrata do navegador — o px da sua folha de estilos. Ele é deliberadamente não um tamanho físico: em um monitor comum, um pixel CSS corresponde a um pixel físico, enquanto em um monitor de alta densidade (“Retina”) vários pixels físicos se unem para desenhar um único pixel CSS com mais nitidez. A proporção é a taxa de pixels do dispositivo (DPR). O web design acontece em pixels CSS, que é exatamente o que esta régua conta.

Lendo a escala de px

No modo px, os tracinhos vêm a cada 10 px, os traços médios a cada 50 px e as marcas numeradas a cada 100 px. Medindo um botão: alinhe a borda esquerda com o zero e leia onde a borda direita cai — digamos, logo depois do 120, ou seja, cerca de 124 px de largura. Para trabalho exato, solte guias nas duas bordas e subtraia as leituras.

Por que o modo px dispensa calibração

A calibração responde a uma pergunta física: “quantos pixels CSS formam uma polegada real neste monitor?” O modo pixel nunca faz essa pergunta — ele simplesmente conta as próprias unidades do navegador, que a página conhece exatamente. É também por isso que medições em px não têm sentido como tamanhos físicos: 100 px são um número diferente de milímetros em cada monitor. Use px para design, e cm/mm/polegadas (depois da calibração) para o mundo físico.

Pixels vs. pontos de impressão

Você às vezes verá “1 px = 1/96 de polegada”. Isso é uma convenção de impressão do CSS, usada para que folhas de estilo convertam para unidades físicas no papel — não diz nada sobre sua tela. Na tela, a única afirmação honesta é: um pixel CSS tem o tamanho que a densidade do monitor lhe dá, e a régua calibrada é como você descobre.

Referências úteis de pixels

• Altura de caixa alta de texto comum (16 px) — cerca de 11 px
• Altura comum de botão — 36–48 px
• Favicon — 16 × 16 px
• Largura de viewport Full HD — 1920 px (px CSS, independente do DPR)

Perguntas frequentes

Qual o tamanho de um pixel na vida real?

Não há resposta fixa. Um pixel CSS não tem tamanho físico — é 1/96 de polegada só por convenção para impressão. Na tela, seu tamanho físico depende da densidade do monitor, e é exatamente por isso que a régua precisa de calibração para unidades físicas, mas não para o modo pixel.

A régua de pixels precisa de calibração?

Não. O modo pixel conta os próprios pixels CSS do navegador, que a página conhece exatamente sem nenhuma medição física. A calibração só importa para cm, mm e polegadas — as unidades com tamanhos no mundo real.

O que é taxa de pixels do dispositivo (DPR)?

O número de pixels físicos da tela usados para desenhar um pixel CSS. Um DPR de 2 (um monitor Retina) concentra quatro pixels físicos em cada pixel CSS para uma renderização mais nítida. O modo pixel da régua sempre mostra pixels CSS, que é com o que os web designers trabalham.