px, pt, mm, cm, em, rem, ppi, dpi — O Dicionário de Medidas Que Ninguém Te Deu Quando Você Começou a Usar Software de Design

Você estava criando um banner para impressão. Configurou o documento em pixels porque sempre fez assim. Mandou para a gráfica. Voltou errado. O impressor disse que estava em “baixa resolução”, mas o arquivo tinha 1920 pixels — parecia grande. Então você tentou em centímetros. Ficou com 67cm de largura sem querer. Aí veio o pânico: qual é a unidade certa? Por que existem tantas? E por que trocar uma pela outra às vezes parece quebrar tudo? Este post responde cada uma dessas perguntas — e te dá a tabela que você vai querer deixar aberta enquanto trabalha.

Por Que Existem Tantas Unidades (E Por Que Isso Não É Burocracia)

Unidades de medida em design existem porque design vive em dois mundos com física completamente diferente: o mundo digital, onde tudo é luz e pixels, e o mundo físico, onde tudo é tinta e milímetros.

No mundo digital, o que importa é a densidade de pontos na tela — quantos pixels cabem num centímetro de vidro. No mundo físico, o que importa é a dimensão real impressa — quantos milímetros de tinta se depositam no papel.

O problema é que os softwares de design transitam entre os dois mundos o tempo todo. Affinity Designer pode criar tanto um ícone SVG de 24px para web quanto um cartão de visita de 9×5cm para impressão. Inkscape também. Para fazer isso sem confusão, o software precisa falar os dois idiomas — e você precisa entender qual está sendo usado em cada contexto.

Quando você entende as unidades, as escolhas de documento deixam de ser arbitrárias. Cada unidade tem um contexto onde é a escolha certa — e contextos onde é a escolha errada.

O Mapa Completo: Todas as Unidades e Seus Mundos

🖥️ Mundo Digital — Unidades de Tela

px — Pixel

O que é: a menor unidade de tela. Um pixel é um ponto de luz individual num display. Em design digital, px é a unidade base — tudo se mede em pixels.

Onde usar: qualquer coisa destinada exclusivamente a tela. Ícones SVG, interfaces web e mobile, posts de redes sociais, banners digitais, apresentações que só existem em monitor.

A confusão que ninguém explica: pixel físico vs pixel CSS.

Um smartphone moderno com tela Retina tem densidade de 3x — cada “pixel CSS” (o que você define no código e no design) é renderizado por 3×3 pixels físicos reais na tela. Isso significa que um ícone de 24px CSS aparece nítido porque o dispositivo está usando 72 pixels físicos para renderizá-lo.

Para design, o que importa é o pixel CSS (ou “pixel de design”). Quando o Affinity ou o Inkscape mostram “24px”, estão falando do pixel de design — não do pixel físico da tela onde você está trabalhando.

Onde px falha: impressão. Um arquivo de 1920×1080px sem especificação de DPI vai para a gráfica como um arquivo de dimensão ambígua — o impressor não sabe se quer imprimir isso em 6cm ou em 67cm. Pixel sozinho não define tamanho físico. Por isso impressão usa mm/cm + DPI juntos.

ppi — Pixels Per Inch (Pixels Por Polegada)

O que é: medida de densidade de tela. Quantos pixels existem em uma polegada linear de display.

Valores de referência:

Por que importa para design: quando você exporta um SVG ou PNG para exibição em tela, o PPI do dispositivo alvo determina se a imagem vai aparecer nítida ou pixelada. Para telas de alta densidade (Retina, AMOLED moderno), exporte imagens em pelo menos 2x do tamanho de exibição pretendido.

PPI não é DPI — esse é um dos erros de nomenclatura mais comuns. PPI descreve telas; DPI descreve impressão. Softwares frequentemente usam “DPI” para os dois contextos, o que alimenta a confusão. Quando o Affinity ou o Inkscape perguntam “DPI do documento” num arquivo de tela, eles estão tecnicamente sendo imprecisos — mas o valor 72 ou 96 que você define ali é o PPI de referência para cálculos de tamanho em tela.

🖨️ Mundo Físico — Unidades de Impressão

mm e cm — Milímetros e Centímetros

O que são: unidades do sistema métrico. O que você mede com uma régua.

Onde usar: qualquer projeto destinado à impressão no Brasil. Cartão de visita, banner, embalagem, catálogo, flyer, etiqueta. O Brasil usa o sistema métrico — use mm ou cm para impressão, não polegadas.

Tamanhos de referência mais usados:

Como configurar no Affinity Designer:
File > New Document → em “Document Units” selecione mm ou cm → defina largura, altura e sangria. Para impressão, sempre adicione 3mm de sangria em cada lado.

Como configurar no Inkscape:
File > Document Properties (Shift+Ctrl+D) → aba “Display” → campo “Units” → selecione mm. As dimensões da página se atualizam imediatamente.

A armadilha da unidade escondida: o Inkscape guarda as dimensões internamente em pixels (unidade nativa do SVG) e converte para exibição na unidade que você escolheu. Se você abrir um arquivo .svg num editor de texto, vai ver as dimensões em px — isso é correto e esperado. Não significa que seu arquivo “está em pixels”.

in — Polegadas (Inches)

O que é: unidade imperial. 1 polegada = 25,4mm.

Onde usar no Brasil: raramente. Projetos para clientes norte-americanos, alguns formatos de papel americano (Letter = 8,5×11in), especificações de tela (monitores e TVs são medidos em polegadas por convenção).

Quando aparece inesperadamente: o Affinity Designer vem com configuração padrão em polegadas em algumas instalações (dependendo do locale do sistema operacional). Se você está criando um documento e vê “8.27 × 11.69 in”, está vendo o A4 em polegadas. Troque para mm antes de começar.

dpi — Dots Per Inch (Pontos Por Polegada)

O que é: medida de resolução de impressão. Quantos pontos de tinta uma impressora deposita por polegada linear de papel.

Não confunda com PPI (densidade de tela). DPI é fisicamente tinta no papel; PPI é pixel na tela. Softwares usam os dois termos de forma intercambiável por convenção histórica — mas a distinção importa quando você está debugando um problema de resolução.

Valores de referência para impressão:

A regra dos 300 DPI: “imagens para impressão precisam de 300 DPI” é uma simplificação útil, não uma lei absoluta. O que realmente determina a qualidade de impressão é a relação entre pixels totais da imagem e tamanho físico de impressão. Uma imagem de 3000×2000px impressa em 10×6,67cm tem 300 DPI. A mesma imagem impressa em 20×13,33cm tem 150 DPI — e vai parecer mais suave/turva.

Vetores e DPI: vetores puros (paths, formas, texto em curvas) não têm DPI — são matematicamente independentes de resolução. O DPI só importa para imagens rasterizadas embutidas dentro de um arquivo vetorial (uma foto dentro de um flyer no Affinity, por exemplo). Para essas imagens embutidas, 300 DPI no tamanho final de impressão é o mínimo.

📐 Mundo da Tipografia — Unidades de Texto

pt — Ponto Tipográfico

O que é: a unidade histórica da tipografia. 1pt = 0,352mm (sistema PostScript/DTP moderno). Ou, de forma prática: 72pt = 1 polegada.

Onde usar: tamanho de fonte em qualquer contexto. É a unidade nativa de tipografia em todos os softwares de design — Affinity, Inkscape, InDesign, qualquer software sério usa pt para fonte.

Conversão prática:

A confusão com px: no contexto web, 1pt = 1.333px (porque 96px = 1 polegada na web, e 72pt = 1 polegada). No contexto de impressão, pt e px são unidades de mundos diferentes e não têm conversão direta sem passar pelo DPI do documento.

No Affinity Designer: o painel de texto mostra tamanho de fonte em pt por padrão. Você pode mudar para px em Preferences > Units > Typography.

No Inkscape: Text > Text and Font mostra tamanho em px por padrão, mas você pode digitar valores em pt diretamente no campo (ex: 12pt) e o Inkscape converte automaticamente.

em e rem — Unidades Relativas do CSS

O que são: unidades tipográficas da web, não de softwares de design desktop. Mas aparecem quando você trabalha com SVG inline em HTML.

em: relativo ao tamanho de fonte do elemento pai. Se o pai tem font-size: 16px, então 1em = 16px naquele contexto. Se o pai muda, 1em muda junto.

rem (root em): relativo ao tamanho de fonte do elemento raiz do documento (geralmente <html>). Mais previsível que em porque não depende de aninhamento.

Quando importa para design vetorial: ao criar SVGs para web com texto, usar font-size em em ou rem faz o texto do SVG respeitar as preferências de tamanho de fonte do usuário no navegador — incluindo configurações de acessibilidade. Um usuário que aumentou o tamanho de fonte do sistema para 20px vai ver o texto do SVG escalar proporcionalmente se você usou em/rem — e vai ver texto fixo se você usou px.

Para acessibilidade: use em ou rem em textos funcionais de SVG inline (labels, legendas, textos informativos). Use px em textos decorativos onde a escala exata importa para o design.

📏 Unidades SVG — O Que o Arquivo Realmente Usa

A Unidade Sem Nome: User Units

O SVG tem uma unidade nativa chamada, tecnicamente, “user unit” — sem símbolo, sem nome popular. É simplesmente o número sem unidade dentro do código SVG.

<!-- Esses dois retângulos são idênticos em SVG puro -->
<rect width="100" height="50" />
<rect width="100px" height="50px" />

Quando você abre um SVG num browser sem especificar tamanho externo via CSS, 1 user unit = 1px CSS. Mas quando o SVG tem um viewBox definido, a relação entre user units e pixels na tela depende de como o SVG é renderizado e escalado.

Por que isso importa na prática:

Quando você exporta um ícone de 24×24px do Affinity e abre o arquivo SVG num editor de texto, vai ver algo como:

<svg width="24" height="24" viewBox="0 0 24 24">

Os valores 24 no width/height são pixels CSS. Os valores no viewBox são user units que definem o sistema de coordenadas interno. Se você mudar o width para 48 sem mudar o viewBox, o ícone dobra de tamanho mantendo toda a precisão vetorial — porque o conteúdo interno ainda é definido nas mesmas coordenadas.

viewBox: O Sistema de Coordenadas Interno

Não é uma unidade, mas é inseparável da conversa sobre medidas em SVG.

viewBox="min-x min-y largura altura" define o sistema de coordenadas interno do SVG — o “espaço de desenho” que será mapeado para qualquer tamanho externo que o SVG tiver.

<!-- Ícone desenhado num espaço de 24×24 user units -->
<!-- Exibido em 48×48px na tela -->
<!-- Escala automática sem perda de qualidade -->
<svg width="48" height="48" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="8"/>
</svg>

Para design: quando você exporta SVG do Affinity ou do Inkscape, eles definem o viewBox automaticamente baseado no artboard. O que você raramente precisa editar manualmente. Mas quando recebe um SVG de terceiro que “parece errado de tamanho”, o viewBox é o primeiro lugar para investigar.

A Tabela de Conversão Que Você Vai Querer Guardar

Conversões Fixas (Matemática — Não Dependem de Contexto)

Conversões por DPI (Dependem da Resolução do Documento)

A relação entre px e mm/cm depende do DPI configurado no documento.

Fórmula: px = (mm ÷ 25,4) × DPI

Leitura prática: uma imagem de 3000px de largura imprime com qualidade (300 dpi) em 254mm = 25,4cm. Na mesma imagem em 150 dpi (qualidade reduzida), imprime em 508mm = 50,8cm.

🖼️ [IMAGEM SUGERIDA: Infográfico de duas colunas — Mundo Digital (px, ppi) à esquerda com ícone de monitor, Mundo Físico (mm, cm, dpi, pt) à direita com ícone de impressora. Cada unidade com ícone representativo e frase de uma linha sobre quando usar. Paleta neutra, fundo escuro, texto claro. 800×1000px — ideal para Pinterest e compartilhamento.]

Como Cada Software Lida com Unidades

Affinity Designer

O Affinity tem dois contextos de documento: Pixel Persona (trabalho em tela) e Vector/Export Persona. As unidades seguem o contexto.

Configurar unidades do documento:
File > Document Setup > Units — define a unidade de trabalho. Muda a régua e os campos de posição/tamanho na interface. Não altera matematicamente os objetos — apenas a exibição.

Configurar unidades de tipografia:
Affinity Designer > Preferences > User Interface > Default units for typography — independente da unidade do documento. Você pode ter um documento em mm e tipografia em pt ao mesmo tempo (o mais comum em impressão).

Exportar com DPI específico:
File > Export → selecione o formato → campo “DPI” ou “Resolution” permite definir a densidade da exportação rasterizada. Para vetores puros (SVG, PDF vetorial), DPI não se aplica.

Dica importante: ao criar documento para impressão no Affinity, crie sempre com DPI 300 desde o início — mesmo que só use vetores. Se o projeto evoluir e precisar de imagens raster, elas já estarão na resolução correta.

Inkscape

O Inkscape usa pixels como unidade interna nativa (herança do SVG). Tudo que você configura em outras unidades é convertido para px internamente e reconvertido na exibição.

Configurar unidades de exibição:
File > Document Properties > Display → campo “Display units” → selecione mm, cm, px, pt ou qualquer outra. A régua e os campos de medida usarão essa unidade.

Unidades do documento vs exibição:
No Inkscape existe diferença entre “document units” (unidade interna do SVG — geralmente px) e “display units” (o que você vê na interface). Você pode trabalhar “em mm” na interface enquanto o SVG guarda tudo em px internamente. Isso é correto e esperado.

Resolução para exportação raster:
File > Export PNG Image (Shift+Ctrl+E) → campo “DPI” define a resolução da exportação. Para o mesmo arquivo, exportar a 72 dpi gera PNG menor e mais leve; exportar a 300 dpi gera PNG maior e com mais detalhes em tamanhos de impressão.

🖼️ [IMAGEM SUGERIDA: Diagrama de fluxo de decisão — “Meu projeto é para tela ou impressão?” → dois caminhos visuais com a unidade correta, DPI recomendado e configuração no software. Estilo fluxograma clean. 800×600px.]

O Guia de Decisão: Qual Unidade Usar em Cada Projeto

Projeto Digital (Tela)

UNIDADE DO DOCUMENTO → px
DPI DO DOCUMENTO → 72 ou 96 (convenção — não afeta vetores)
UNIDADE DE TIPOGRAFIA → px ou pt (converta: 16px = 12pt)
EXPORTAÇÃO → PNG em 1x (normal) ou 2x (telas Retina)
              SVG sem DPI (vetores são resolution-independent)

Projeto de Impressão (Gráfica)

UNIDADE DO DOCUMENTO → mm ou cm
DPI DO DOCUMENTO → 300 (mínimo profissional)
UNIDADE DE TIPOGRAFIA → pt (padrão tipográfico universal)
SANGRIA → 3mm em cada lado além do formato final
EXPORTAÇÃO → PDF com sangria, marcas de corte e DPI preservado

Projeto Híbrido (Digital + Impressão)

UNIDADE DO DOCUMENTO → mm (unidade física como referência)
DPI DO DOCUMENTO → 300 (garante qualidade se houver imagens)
TIPOGRAFIA → pt
EXPORTAÇÃO DIGITAL → PNG 2x (dobro das dimensões em px)
EXPORTAÇÃO IMPRESSÃO → PDF com sangria

SVG para Web

UNIDADE → px (ou sem unidade — user units)
VIEWBOX → definir sempre, mesmo para tamanho fixo
TIPOGRAFIA → em ou rem (acessibilidade) ou px (controle visual exato)
DIMENSÕES EXTERNAS → definidas via CSS, não no SVG

Os Erros Mais Comuns (E Como Evitá-los)

Erro 1 — Criar projeto de impressão em pixels:
Resultado: arquivo sem referência física. A gráfica recebe um PNG de 1920×1080px e não sabe se deve imprimir em 17cm ou em 67cm. Solução: sempre criar documentos de impressão em mm/cm + 300 DPI desde o início.

Erro 2 — Confundir PPI com DPI:
Resultado: exportar um banner digital “em 300 DPI” quando 72 DPI era suficiente — gerando arquivo 17x maior sem benefício visível na tela. Solução: 300 DPI é para impressão. Para tela, 72–96 DPI (ou exportação 2x em px) é o correto.

Erro 3 — Achar que vetor tem DPI:
Resultado: preocupar-se desnecessariamente com “resolução do logo”. Vetores puros são matematicamente independentes de resolução — o círculo continua perfeito em qualquer tamanho. DPI só afeta imagens raster embutidas no arquivo vetorial.

Erro 4 — Misturar pt e px em tipografia sem converter:
Resultado: tamanho de fonte inconsistente entre projetos. Um título de “24” no Affinity pode ser 24pt ou 24px dependendo das configurações — verifique a unidade de tipografia antes de qualquer projeto.

Erro 5 — Esquecer a sangria em impressão:
Resultado: bordas brancas no produto impresso onde deveria haver cor de fundo. Solução: sempre 3mm de sangria, sempre estender elementos de borda até o limite da sangria.

Checklist: Unidades Corretas Antes de Começar Qualquer Projeto

ANTES DE CRIAR O DOCUMENTO
[ ] Destino é tela ou impressão?
[ ] Se impressão: documento em mm/cm + 300 DPI + 3mm sangria?
[ ] Se tela: documento em px + 72/96 DPI?
[ ] Se híbrido: mm + 300 DPI como base?
[ ] Unidade de tipografia configurada (pt para impressão, px para tela)?

DURANTE O PROJETO
[ ] Imagens raster embutidas têm 300 DPI no tamanho final? (impressão)
[ ] Elementos de borda estendem até a sangria? (impressão)
[ ] Tipografia em pt legível no tamanho de impressão? (mínimo 8pt)

NA EXPORTAÇÃO
[ ] SVG para web: viewBox definido, dimensões via CSS?
[ ] PNG para tela: exportado em 2x para telas Retina?
[ ] PDF para gráfica: com sangria, marcas de corte, DPI preservado?
[ ] Fonte convertida em curvas antes de exportar para gráfica?

TL;DR

Unidades de medida em design existem porque design vive em dois mundos: tela (px, ppi) e impressão (mm, cm, dpi, pt). Confundir os mundos gera os problemas mais frustrantes do workflow.

px: unidade de tela. Use em qualquer projeto digital. Sozinho não define tamanho físico.

ppi: densidade de tela (pixels por polegada). Telas Retina modernas têm 250–460 ppi — exporte imagens em 2x para compensar.

mm / cm: unidade de impressão no Brasil. Use sempre para projetos que vão para a gráfica. Sempre com 3mm de sangria.

dpi: densidade de impressão. 300 dpi é o mínimo profissional. Vetores puros não têm dpi — só imagens raster embutidas.

pt: unidade tipográfica universal. Use para tamanho de fonte em qualquer contexto. 1pt = 0,352mm. 72pt = 1 polegada.

em / rem: unidades relativas do CSS. Use em SVG inline para acessibilidade tipográfica.

viewBox SVG: não é unidade, mas define o sistema de coordenadas interno. Sempre presente em SVGs para web.

A regra que resolve 80% dos problemas: impressão = mm + 300 dpi + 3mm sangria. Tela = px + exportação 2x para Retina.