Régua de pixels gratuita
Meça distâncias em pixels na sua tela.
Como usar
- Clique e arraste na régua para medir uma distância. A régua exibe incrementos em pixels.
- Os pontos de partida e chegada são móveis, pegue-os para ajustar a medida.
- Ative o modo vertical para medir distâncias verticais em vez de horizontais.
- Visualize seu número de pixels e o tamanho físico estimado abaixo da régua.
Perguntas frequentes
Qual é a precisão do cálculo do tamanho físico ?
O tamanho físico depende da razão de pixels do seu dispositivo e de um DPI suposto de 96. O DPI real dos monitores varia, portanto, é uma aproximação. Para medidas precisas em documentos impressos, use uma régua física.
Posso medir distâncias verticais ?
Sim. Ative o modo vertical para medir distâncias verticais em pixels em vez de horizontais.
O que significa a razão de pixels do dispositivo ?
As telas de alta densidade (como as telas Retina) têm uma razão de pixels superior a 1, ou seja, vários pixels físicos representam um pixel CSS. Esta ferramenta mede em pixels CSS.
O que esta régua mede (e o que não consegue)
Esta é uma régua de forma livre que vive dentro da aba do seu navegador. Arraste pelo canvas acima para obter uma leitura em pixels CSS. Ela funciona em qualquer coisa pintada dentro da viewport do navegador (uma captura de tela aberta em uma aba, uma exportação do Figma vista embutida, uma página web ao vivo em uma segunda aba), mas não consegue medir janelas de desktop, a interface de apps nativos, a barra de tarefas, ou qualquer coisa pintada pelo compositor em nível de SO fora do navegador. Ela também não consegue detectar automaticamente os limites dos elementos como o Chrome DevTools ou o Page Ruler Redux conseguem. Esse é um tipo diferente de ferramenta. O enquadramento honesto importa: esta régua é a resposta certa quando você quer uma medição rápida, sem instalação, dentro do navegador.
Pixels CSS não são pontos de hardware
O pixel que o JavaScript e o CSS usam é um pixel de referência definido pelo W3C: «o ângulo visual de um pixel em um dispositivo com uma densidade de pixels de 96 dpi e uma distância do leitor equivalente ao comprimento de um braço.» Para um comprimento de braço nominal de cerca de 28 polegadas, esse ângulo visual é de aproximadamente 0,0213°, ou cerca de 0,26 mm na superfície da tela. O pixel CSS é uma unidade de ângulo visual, não um ponto de hardware, intencionalmente independente de dispositivo, de modo que uma fonte de 16 px aparece com aproximadamente o mesmo tamanho físico em um telefone, um laptop e uma TV.
Todos os outros comprimentos absolutos do CSS estão ancorados nele: 1in = 2.54cm = 96px, 1mm ≈ 3.78px, 1pt ≈ 1.333px. Essa tabela de conversão fixa é exatamente o que faz a leitura de «mm a 96 DPI» ser uma estimativa em vez de uma medição verdadeira, veja abaixo.
Três palavras de pixel que os designers confundem
| Termo | O que conta | Onde vive |
|---|---|---|
| Pixel CSS | O pixel de referência do W3C; a unidade que o JS e o CSS usam para o layout | window.innerWidth, getBoundingClientRect(), todo comprimento CSS |
| Pixel de dispositivo | O ponto endereçável real no painel | screen.width × devicePixelRatio, resolução nativa do monitor |
| Pixel de imagem | A resolução intrínseca de um arquivo raster | naturalWidth / naturalHeight em um <img> |
A relação em uma frase: resolução física da tela ≈ tamanho da viewport CSS × razão de pixels do dispositivo, e uma imagem nítida precisa de uma largura intrínseca ≥ largura CSS renderizada × DPR. Um logo dimensionado em CSS a 100 px em um telefone com DPR 3 precisa de uma imagem de origem de pelo menos 300 pixels de largura para parecer nítido.
Razão de pixels do dispositivo
A leitura de DPR no painel de informações relata o window.devicePixelRatio: «a razão entre a resolução em pixels físicos e a resolução em pixels CSS para o dispositivo de exibição atual.» Valores comuns:
- 1,0: telas clássicas de 96 DPI (monitores mais antigos, máquinas Windows em escala de 100%).
- 2,0: a maioria dos MacBooks Retina, muitos monitores 4K em escala de 200%.
- 2,5-3,5: telefones modernos. Os modelos iPhone Pro relatam 3,0; os topos de linha Android frequentemente ficam em 2,625 / 2,75 / 3,5.
Dois comportamentos que vale a pena conhecer: o zoom de página (Ctrl/Cmd + e −) de fato muda o DPR, então a leitura vai saltar conforme você dá zoom. O zoom de pinça amplia a viewport renderizada sem mudar o tamanho subjacente do pixel CSS, então não muda. A Apple introduziu a tela Retina no iPhone 4 em 2010, e, para impedir que apps e páginas existentes encolhessem a um quarto do tamanho anterior quando os pixels do dispositivo dobraram em ambas as dimensões, o iOS introduziu os «points» (seu equivalente ao pixel CSS). A web herdou o mesmo modelo: um pixel CSS 2× mapeia para quatro pixels de dispositivo.
Padrões de tamanho de alvo de toque
Uma das coisas mais úteis que uma régua de pixels faz é verificar se botões, links e ícones atendem aos mínimos de alvo de toque de acessibilidade. Três padrões costumam aparecer juntos:
| Fonte | Mínimo | Unidade | ~Físico (96 DPI) |
|---|---|---|---|
| WCAG 2.2 SC 2.5.8 AA | 24 × 24 | CSS px | ~6,4 × 6,4 mm |
| WCAG 2.5.5 AAA | 44 × 44 | CSS px | ~11,6 × 11,6 mm |
| Apple HIG | 44 × 44 | pt | ~11,6 × 11,6 mm |
| Material Design / Android | 48 × 48 | dp | ~9 mm (referência de 160 dpi) |
A WCAG 2.2 acrescentou o critério AA de 24 × 24 em outubro de 2023. O teste de conformidade do W3C o formula assim: «Deve ser conceitualmente possível desenhar um quadrado sólido de 24 por 24 pixels CSS… inteiramente dentro do alvo.» Há cinco exceções (espaçamento, equivalente, em linha, controle do agente de usuário, essencial), mas em geral a UI de corpo precisa passar dessa marca. O critério AAA mais antigo (2.5.5) exige 44 × 44, correspondendo ao HIG da Apple e correspondendo aproximadamente aos 48 dp do Material.
A grade de design de 8 pixels
A maioria do design de UI moderno se apoia em uma unidade base de 8 pixels (a «grade de 8 pontos» ou «grade de 8 dp», dependendo da plataforma). O Material Design 2 e o 3 se constroem sobre ela, com ajustes menores de 4 dp para ícones e componentes densos. A escolha do 8 não é acidental: ele divide de forma limpa as larguras de tela comuns (320, 360, 375, 1280, 1440), escala por razões inteiras (8, 16, 24, 32, 40, 48) e combina naturalmente com a fonte de corpo padrão de 16 px. Uma subgrade de 4 pixels cuida do alinhamento fino.
Uso prático: quando você mede um vão como 14 px ou 17 px, provavelmente pegou um erro de unidade no CSS. O valor pretendido era quase certamente 16. A régua de pixels é a forma mais rápida de identificar espaçamentos fora da grade.
Quando você recorreria a uma régua de navegador
- QA de design em uma página publicada. Compare o resultado ao vivo com a especificação. O vão entre dois cartões é de 16 px ou 24 px?
- Verificação de alvo de toque. Coloque a régua sobre um botão para confirmar que ele atende ao piso AA de 24 px ou ao alvo AAA de 44 px.
- Auditoria de espaçamento em um mockup colado. Abra uma exportação do Figma em uma aba, coloque a régua sobre ela, verifique o ritmo.
- Verificações de sanidade de breakpoints responsivos. A leitura de Largura da viewport serve também como um indicador de breakpoint ao vivo enquanto você redimensiona a janela.
- Educação. Mostre a um desenvolvedor júnior o que o
devicePixelRatiorelata na máquina dele, e como muda quando ele aperta Cmd/Ctrl + para dar zoom. - Auditorias de acessibilidade. Verifique as áreas de clique de botões de ícone, o comprimento de linha em pixels CSS e os tamanhos mínimos de texto.
DevTools do navegador e outras réguas
Todo navegador moderno traz ferramentas de medição, mas elas ficam escondidas atrás dos painéis de desenvolvedor.
- Chrome DevTools: abra o Menu de Comandos (Cmd/Ctrl+Shift+P), digite «rulers», selecione Show rulers on hover. As réguas aparecem ao longo do topo e da esquerda da viewport quando você passa o mouse sobre um elemento. Vinculado à seleção de elementos, e não ao arrasto de forma livre.
- Firefox DevTools: Configurações → Botões de Caixa de Ferramentas Disponíveis → ative Toggle rulers for the page. Um botão de alternância de régua aparece na barra de ferramentas do DevTools; as réguas se sobrepõem nas bordas da página com as dimensões da viewport no canto superior direito.
- Figma / Sketch / Adobe XD: todos têm sobreposições de régua dentro do seu canvas. O Figma usa Shift+R para alternar. Eles são presos ao arquivo: medem dentro do seu próprio modelo de documento, não em uma página web implantada.
- Extensões de navegador: Page Ruler Redux, MeasureIt, PixelZoomer, Dimensions. Todas exigem instalação e permissões; todas ficam confinadas ao navegador. Úteis se você precisa de detecção automática de elementos.
Uma régua de aba de navegador como esta é a resposta para designers, revisores de QA e pessoal de conteúdo que querem um único clique em vez de painéis do DevTools ou instalações de extensão.
Mais perguntas
Qual é a precisão da leitura em milímetros?
É uma estimativa. A conversão usa a relação fixa do W3C de 1 pol = 96 px CSS, precisa apenas quando o seu monitor é realmente de 96 DPI, o zoom do navegador é de 100% e a escala do SO é de 100%. Os monitores reais variam muito: uma tela de 24 polegadas 1080p roda cerca de 92 ppi, uma de 27 polegadas 1440p cerca de 109 ppi, uma de 27 polegadas 4K cerca de 163 ppi. Trate o número em mm como uma estimativa de ordem de grandeza, nunca uma medição de qualidade de impressão. Para tamanhos físicos reais, encoste uma régua física na tela.
Por que a razão de pixels do dispositivo muda quando eu dou zoom?
O zoom de página (Cmd/Ctrl + ou −) literalmente muda o tamanho de um pixel CSS em relação ao pixel de dispositivo, então a razão entre eles se altera. O zoom de pinça em dispositivos de toque funciona de forma diferente. Ele amplia a viewport renderizada sem mudar o tamanho subjacente do pixel CSS, então não move o DPR.
Por que 1366 × 768 não é exatamente 16:9?
Porque não é, não exatamente. 1366 ÷ 768 = 1.7786; o verdadeiro 16:9 é 1.7778. A razão simplificada é, na verdade, 683:384. Muitas telas baratas de laptop usam essa resolução ligeiramente fora da especificação, o que é uma das razões pelas quais o vídeo 1080p às vezes é reduzido de forma imperfeita nelas.
Posso medir fora do navegador?
Não. Uma página web só pode ver e pintar dentro da sua própria aba do navegador. Para medir janelas de desktop, a interface de apps nativos ou qualquer outra coisa fora do navegador, você precisaria de um utilitário em nível de SO: o «Mostrar Inspetor» do Preview do macOS, a Ferramenta de Captura do Windows com a sobreposição de dimensões, ou uma régua de tela de terceiros.
Algo é enviado a um servidor?
Não. A régua é renderizada com a API canvas do HTML5; as dimensões da viewport e o DPR vêm do JavaScript localmente; a leitura da medição é calculada no seu navegador. A página funciona offline depois de carregada.