Conversor de PT para PX

O Conversor de PT para PX transforma pontos em pixels — e pixels de volta em pontos — tanto para trabalho na tela quanto para impressão. A maioria dos conversores fornece um único número baseado na proporção fixa do CSS, 1pt = 1.3333px. Essa resposta está correta em um navegador e errada em quase todos os outros lugares, porque um ponto é uma unidade física e a quantidade de pixels dentro dele depende da resolução da saída. Esta ferramenta fornece os dois: o valor CSS que um navegador realmente renderizará e o valor em pixels do dispositivo a 72, 150, 300, 600 ou qualquer DPI personalizado, além do tamanho físico verdadeiro em milímetros e polegadas em uma régua real.

Fórmula de PT para PX

Um ponto é definido como exatamente um septuagésimo segundo de polegada. Uma polegada contém tantos pixels quanto a resolução de saída determina. Juntando esses dois fatos, a conversão resulta em:

Na web, a resolução não é uma variável. A especificação CSS fixa 1in = 96px por definição, então o navegador sempre usa 96 e a fórmula se reduz a uma constante:

É por isso que 12pt equivale a 16px em todos os navegadores e dispositivos, seja em um painel de laptop 1× ou em uma tela de celular 3×. O pixel CSS é uma unidade de referência, não um pixel de hardware.

Uma polegada, três nomes

A maneira mais fácil de manter as unidades organizadas é lembrar que todas descrevem a mesma distância física. Cada barra abaixo tem exatamente uma polegada de largura:

Tabela de conversão de PT para PX

A coluna da web é a que você deve usar para CSS. A coluna de 300 DPI é a indicada ao exportar um PDF para uma imagem rasterizada, preparar um arquivo de impressão ou dimensionar texto em um bitmap que será impresso.

Por que o mesmo tamanho em pontos gera diferentes quantidades de pixels

Esta é a única coisa que costuma confundir as pessoas, por isso vale a pena dizer claramente. O tamanho físico nunca muda: 12pt equivale sempre a um sexto de polegada. O que muda é o grau de detalhamento com que essa polegada é amostrada.

• 72 DPI — a resolução histórica das telas Macintosh, escolhida precisamente para que 1pt = 1px. Ainda é o padrão em alguns fluxos de imagem legados, por isso textos de 12pt às vezes são exportados com apenas 12 pixels.
• 96 DPI — o padrão do Windows e a resolução de referência contra a qual o CSS é definido. Esta é a resposta para a web e a usada pelo seu navegador.
• 150 DPI — qualidade de impressão de rascunho ou trabalhos de grande formato destinados à leitura à distância.
• 300 DPI — o padrão de impressão comercial. Uma legenda de 12pt em uma exportação a 300 DPI precisa de 50 pixels de altura, não 16.
• 600 DPI — arte de linhas finas, trabalhos gráficos de alta qualidade e saída a laser em que detalhes muito finos importam.

Se você já exportou uma arte no "tamanho certo" e descobriu que o texto ficou suave e pixelado, essa proporção quase sempre é a causa: o layout foi medido em pontos e o raster foi gerado a 72 ou 96 DPI em vez de 300.

O que um tamanho em pontos realmente mede

Uma fonte de 12pt não tem 12 pontos de letras visíveis. O tamanho em pontos descreve o quadrado em — a grade de design invisível sobre a qual uma família tipográfica é desenhada. Quanto desse quadrado as letras ocupam depende inteiramente do designer de tipos, por isso duas fontes definidas com o mesmo tamanho em pontos podem parecer muito diferentes em escala.

Você deve usar pt ou px no CSS?

Para estilos de tela, use px ou rem. Pontos são uma unidade absoluta no CSS, exatamente como px, portanto têm a mesma limitação de acessibilidade: textos dimensionados em pt ignoram a preferência de tamanho de fonte do navegador do visitante. Usar pt também pode causar confusão, porque um colega que leia a folha de estilos pode presumir que isso significa pontos físicos no dispositivo de saída, quando não significa.

Onde pt realmente tem seu lugar é em uma folha de estilos de impressão, porque a saída de fato é medida em polegadas:

@media print {
  body { font-size: 11pt; line-height: 1.45; }
  h1   { font-size: 24pt; }
  h2   { font-size: 18pt; }
  .no-print { display: none; }
}

Os navegadores mapeiam esses pontos com base no tamanho real do papel ao gerar o trabalho de impressão, então um corpo de 11pt realmente sai como 11pt na página — o mesmo tamanho que um processador de texto produziria.

Convertendo um documento do Word ou do InDesign para a web

1. Extraia os tamanhos em pontos diretamente da folha de estilos do documento — normalmente 11pt no corpo, 16pt nos subtítulos e 24pt nos títulos.
2. Cole todos de uma vez no campo de valores, separados por vírgulas, mantendo a resolução em 96.
3. Leia a coluna de pixels CSS. 11pt se torna 14.67px, 16pt se torna 21.33px e 24pt se torna 32px.
4. Arredonde para uma escala limpa antes de publicar. A tipografia impressa tolera frações incomuns; escalas tipográficas para a web ficam melhores em pixels inteiros ou pela metade, então 14.67px normalmente vira 15px ou 16px.
5. Converta os valores finais em pixels para rem se o seu sistema de design usar unidades relativas.

Unidades CSS absolutas relacionadas

Pontos são uma pequena família de unidades absolutas que o CSS define com base na mesma polegada de 96 pixels. Conhecer a família inteira torna as conversões triviais:

• 1in = 96px = 72pt = 6pc = 25.4mm
• 1pc (pica) = 12pt = 16px
• 1cm = 37.795px ≈ 28.35pt
• 1mm = 3.7795px ≈ 2.835pt
• 1Q (um quarto de milímetro) = 0.945px

Como usar este conversor

1. Escolha uma direção: pt → px ou px → pt.
2. Insira seus valores: um número ou uma escala tipográfica inteira separada por vírgulas ou espaços (até 20 por vez). Unidades finais como 12pt são aceitas e ignoradas.
3. Defina a resolução de saída: mantenha 96 DPI para CSS e trabalho na web, ou toque em um chip para 72, 150, 300 ou 600 DPI.
4. Clique em Converter: leia o resultado, a comparação de DPI, a prévia tipográfica no tamanho real, a régua em milímetros e a escala de referência.
5. Copie o CSS: um botão copia todas as declarações font-size mantendo o valor original em pontos dentro de um comentário.

Perguntas frequentes

Como converto pt para px?

Multiplique o valor em pontos pela resolução de saída e divida por 72, porque um ponto equivale a um septuagésimo segundo de polegada. Na web, a resolução é fixa em 96 DPI, então px = pt × 1.3333. Por exemplo, 12pt equivale a 16px.

Quantos pixels são 12pt?

No CSS e em qualquer navegador, 12pt equivale exatamente a 16px. Em uma impressão ou arquivo de imagem a 300 DPI, o mesmo texto de 12pt tem 50 pixels de altura, e a 600 DPI tem 100 pixels, porque a quantidade de pixels varia com a resolução enquanto o tamanho físico permanece igual.

1pt é sempre 1.3333px?

No CSS, é sempre 1.3333px, porque a especificação CSS fixa uma polegada em exatamente 96 pixels. Isso não vale para saída rasterizada: a 300 DPI, um ponto equivale a 4.1667 pixels do dispositivo, e a 72 DPI equivale exatamente a um pixel.

Qual é a diferença entre pt e px?

Um ponto é uma unidade tipográfica física equivalente a um septuagésimo segundo de polegada, usada em impressão, processadores de texto e editoração eletrônica. Um pixel é uma unidade de exibição. No CSS, o pixel também é vinculado a uma referência física de um nonagésimo sexto de polegada, por isso as duas unidades são convertidas por uma proporção fixa na web, mas não em arquivos de imagem.

Devo usar pt ou px no CSS?

Use px ou rem para estilos de tela e reserve pt para folhas de estilo de impressão. Pontos são uma unidade física absoluta, então texto definido em pt ignora a preferência de tamanho de fonte do navegador do visitante. Dentro de um bloco @media print, pt é a unidade natural porque a saída realmente é medida em polegadas.

Qual DPI devo usar para impressão?

300 DPI é o padrão para impressão comercial e saída com qualidade fotográfica, 150 DPI é aceitável para rascunhos e trabalhos de grande formato vistos à distância, e 600 DPI é usado para arte de linhas finas e trabalhos gráficos de alta qualidade. Defina o campo de resolução com o valor esperado pela sua impressora ou pela caixa de diálogo de exportação.

Por que o texto de 12pt não tem 12 pontos de altura na tela?

O tamanho em pontos descreve o quadrado em da fonte, que é a grade de design sobre a qual as letras são desenhadas, não a altura de cada glifo. A altura das maiúsculas normalmente é cerca de 70% do tamanho em em e a altura-x das minúsculas, cerca de 50%, então as maiúsculas de 12pt medem aproximadamente 8.4pt de altura.

A proporção de pixels do dispositivo altera a conversão de pt para px?

Não. Em uma tela 2× ou 3×, o navegador ainda informa 12pt como 16 pixels CSS e depois renderiza esses 16 pixels CSS usando 32 ou 48 pixels de hardware. O pixel CSS é uma unidade de referência, então os números da sua folha de estilos nunca mudam — os pixels extras de hardware apenas fazem o mesmo tamanho parecer mais nítido.

Recursos adicionais

• Unidades de comprimento CSS - MDN
• Comprimentos absolutos - Valores CSS do W3C