Régua de pixels

Medir em pixels, com exatidão

É a única ferramenta do site que dispensa calibração, e vale entender por quê. Todas as outras convertem pixels em unidades físicas, e essa conversão depende de saber a densidade real da sua tela. Uma régua de pixels pula a conversão: mede pixels em pixels, então a resposta é exata em qualquer tela, em qualquer densidade, sem nada para preparar.

As réguas das bordas superior e esquerda são graduadas a cada 10 px com um número a cada 100, e uma seleção estende linhas de guia para as duas calhas, de modo que dá para ler uma distância direto na escala.

Pixels CSS, pixels do aparelho, e por que os dois importam

Um pixel CSS é uma unidade de layout, não um ponto físico. Numa tela comum os dois coincidem. Em qualquer tela de alta densidade, um único pixel CSS é desenhado usando vários pixels do aparelho: quatro em 2× e nove em 3×. A proporção que liga os dois aparece abaixo da superfície, para a tela em que você está lendo isto.

Para trabalho de front-end a consequência é simples: você faz o layout em pixels CSS e exporta as imagens no tamanho em pixels do aparelho. Um ícone que ocupa 24 pixels CSS precisa de 48 px de dados reais para ficar nítido numa tela 2×, que é toda a razão de existirem srcset e arquivos @2x. Aqui os dois números ficam lado a lado, para você não fazer essa multiplicação de cabeça.

As porcentagens da área visível servem a um propósito parecido. Quando você converte um layout de largura fixa em CSS responsivo, saber que um elemento ocupa 20 % da largura é mais útil de imediato do que saber que ele tem 240 px, porque isso vira vw e vh direto.

Para que ela é realmente usada

Quase sempre para o mesmo punhado de tarefas, e todas são comparações mais do que medidas absolutas:

• Conferir se os espaçamentos são consistentes. Design systems se apoiam numa escala, normalmente múltiplos de 4 ou de 8. Um vão de 14 px num layout construído sobre oitavos é um erro, e aparece muito mais rápido com uma régua em cima do que lendo o código.
• Comparar a implementação com o design. Meça o mesmo elemento nos dois. Um título que deveria estar a 32 px da borda e está a 28 é exatamente o tipo de desvio que se acumula em silêncio ao longo de uma página.
• Dimensionar um arquivo antes de exportar. Meça o espaço que ele vai ocupar e exporte nesse tamanho multiplicado pela proporção de pixels que você quer atender.
• Encerrar uma discussão sobre um print. Solte uma guia numa borda e a pergunta de se duas coisas estão alinhadas deixa de ser questão de opinião.

O que uma régua de pixels não consegue fazer

Ela só mede dentro da própria página. Uma página web não enxerga outras janelas, outras abas nem a sua área de trabalho. Esse isolamento é uma fronteira de segurança deliberada e importante, não uma limitação a ser contornada. Medir a interface de um aplicativo nativo, ou qualquer coisa fora do navegador, exige um programa de desktop com as permissões certas.

O zoom do navegador também merece explicação. Ele não amplia a página pronta como faria uma lupa: muda quanto vale um pixel CSS, e a página é remontada no novo tamanho. Em 125 %, um pixel CSS é desenhado com 1,25 pixel do aparelho, então esta superfície continua informando pixels CSS honestos enquanto tudo aparece fisicamente maior. É o comportamento correto, porque o pixel CSS é a unidade em que você escreve os estilos.

Sobra o teclado, que é a parte que passa despercebida. Selecione a superfície e as setas redimensionam a seleção de um pixel por vez, ou de dez com Shift pressionado. O mouse serve para chegar perto; as setas são o que faz você parar num número exato, e não escorregam no último instante como um trackpad.

A armadilha das capturas de tela

Uma captura feita numa tela 2× contém o dobro de pixels do layout que mostra. Um botão de 200 px CSS sai como 400 px no arquivo. É a fonte de confusão mais comum quando duas pessoas comparam medidas: uma lê pixels CSS no navegador dela, a outra lê pixels de imagem num editor, e as duas estão certas sem saber.

Três hábitos evitam a discussão. Diga sempre a unidade ao dar um número, "200 px CSS" em vez de "200 px". Anote a proporção de pixels da máquina em que a captura foi tirada, porque é esse o fator de conversão. E quando a comparação realmente importa, meça os dois lados no mesmo lugar: esta superfície para a página viva e as réguas do seu editor para o arquivo, dividindo estas últimas pela proporção de pixels.

O mesmo raciocínio explica por que uma imagem exportada no tamanho CSS fica borrada numa tela de alta densidade. Ela não está borrada: só faltam dados, esticada sobre quatro vezes mais pontos do que contém.