Conversor de Tipografia

Conversor de Tipografia

Converta entre pixels, pontos, paicas, em, rem, polegadas, centímetros e milímetros -- as unidades que designers e desenvolvedores encontram todos os dias. Este conversor faz a ponte entre o design para impressão (pontos, paicas) e o desenvolvimento web (px, em, rem), ajudando você a manter os tamanhos de fonte consistentes esteja trabalhando no Figma, no InDesign ou em uma folha de estilo CSS.

Como a Conversão de Tipografia É Calculada

Todas as unidades passam pelos pixels (px) como base interna, pressupondo uma resolução de tela padrão de 96 DPI e um tamanho de fonte raiz de 16 px. A conversão funciona em duas etapas: primeiro converte a entrada em pixels usando seu fator e depois converte de pixels para a unidade de destino.

Principais fatores de conversão (para pixels):

• 1 pt = 1.3333 px (porque 1 pt = 1/72 pol., e 1 pol. = 96 px)
• 1 pc (paica) = 16 px (1 pc = 12 pt = 12 x 1.3333)
• 1 pol. = 96 px
• 1 cm = 37.795 px
• 1 mm = 3.7795 px
• 1 em = 16 px (na raiz padrão de 16 px)
• 1 rem = 16 px (na raiz padrão de 16 px)

Exemplos Resolvidos

Cenário 1 -- Designer entregando especificações de impressão a um desenvolvedor web Um guia de estilo de marca especifica o texto de corpo em 10 pt e os títulos em 24 pt. O desenvolvedor web precisa dos equivalentes em px. 10 pt x 1.3333 = 13.33 px (arredonda para 13 px), e 24 pt x 1.3333 = 32 px. Defina o font-size do corpo como 13px e o h1 como 32px para corresponder à aparência da impressão.

Cenário 2 -- Convertendo um design do Figma de px para rem por acessibilidade Um arquivo do Figma usa 16 px para o texto de parágrafo, 20 px para os subtítulos e 28 px para os títulos. Dividindo cada um por 16 (o tamanho de fonte raiz padrão), obtêm-se 1 rem, 1.25 rem e 1.75 rem. Usar rem em vez de px permite que usuários que definem uma fonte padrão maior no navegador se beneficiem de um texto proporcionalmente maior.

Cenário 3 -- Verificando medidas em centímetros para uma exportação em PDF Um modelo de documento jurídico exige tamanhos de fonte em centímetros. O designer usa 0.42 cm para notas de rodapé e 0.635 cm para o texto de corpo. Convertendo: 0.42 cm x 37.795 = 15.87 px ≈ 12 pt; 0.635 cm x 37.795 = 24 px = 18 pt. Ambos são tamanhos de impressão padrão, confirmando que as medidas estão corretas.

Tabela de Referência de Unidades de Tipografia

Quando Usar Esta Ferramenta

• Traduzir um guia de estilo de impressão (em pontos) para uma folha de estilo CSS (em px ou rem) em uma reformulação de site
• Converter designs do Figma que usam px em valores rem para implementar layouts acessíveis e compatíveis com o zoom do navegador
• Verificar se os tamanhos de fonte de um documento PDF ou Word corresponderão à contraparte na web
• Ampliar um design: um cliente pede "deixe tudo 10% maior" -- converta para uma unidade comum, multiplique e converta de volta
• Verificar se o texto de corpo em 16 px corresponde à expectativa padrão de texto de corpo impresso de 12 pt

Erros Comuns

1. Usar em em vez de rem para tamanhos de texto globais. Como o em é relativo ao elemento pai, o aninhamento de componentes causa acúmulo. Um elemento de 1.2 em dentro de outro de 1.2 em é renderizado com 1.44x o tamanho da raiz -- muitas vezes de forma não intencional. Use rem para um dimensionamento global previsível.
2. Supor que 1 px = 1 pt. Os pontos são maiores: 1 pt = 1.333 px. Definir uma regra CSS como 12px quando um designer especificou 12pt produzirá um texto 25% menor do que o pretendido.
3. Ignorar que em e rem mudam quando o tamanho de fonte raiz muda. Se você definir html { font-size: 18px; }, então 1 rem = 18 px, e não 16 px. Sempre declare a suposição de tamanho da raiz ao compartilhar valores em rem.
4. Usar pt para CSS web. Embora os navegadores aceitem pt, é uma unidade de impressão que se mapeia de forma inconsistente entre densidades de tela e níveis de zoom. Fique com px para tamanhos fixos e rem para texto redimensionável na web.

Contexto e Aplicações

A conversão de unidades de tipografia surge em três fluxos de trabalho principais. Na migração de impressão para web, uma marca pode ter décadas de materiais de impressão definidos em pontos e paicas que precisam ser transferidos para um sistema de estilo digital. Fazer o texto de corpo impresso de 10 pt corresponder ao texto de corpo web de 13.33 px mantém a consistência visual. Na conformidade de acessibilidade, a diretriz 1.4.4 da WCAG 2.1 exige que o texto seja redimensionável em até 200% sem perda de conteúdo. Usar rem em vez de px permite que o navegador respeite a preferência de tamanho de fonte padrão do usuário, o que o px sobrepõe. Na tipografia web responsiva, a função clamp() do CSS exige valores específicos em px ou rem para os tamanhos mínimo e máximo -- este conversor ajuda você a definir esses limites com base nas especificações em pontos do designer.

Dicas

1. O atalho universal a memorizar: 16 px = 12 pt = 1 rem = 1 em (nas configurações padrão do navegador)
2. Divida qualquer valor em px por 16 para obter seu equivalente em rem -- 24 px / 16 = 1.5 rem
3. Multiplique qualquer valor em pt por 1.333 para obter px -- 18 pt x 1.333 = 24 px
4. Para documentos de impressão, 1 paica = 12 pontos, então uma medianiz de coluna de 3 paicas = 36 pt = 48 px
5. Ao construir um sistema de design tokens, defina todos os tamanhos em rem para que uma única mudança no tamanho de fonte raiz redimensione o sistema inteiro
6. Use px para bordas (1 px), sombras de caixa e detalhes finos que não devem ser dimensionados junto com o tamanho do texto