O que é Conversor de unidades tipográficas?
O conversor de unidades tipográficas converte entre pixels (px), em, rem, pontos (pt), porcentagens (%) e unidades de viewport (vw, vh). Defina um tamanho de fonte base e um tamanho de viewport e digite um valor em qualquer campo para ver todas as outras unidades se atualizarem na hora.
As conversões seguem o padrão CSS: 1pt = 96/72 px, em e rem multiplicam pelo tamanho base da fonte, a porcentagem toma a base como 100%, e vw e vh são frações da largura e altura do viewport. Edite qualquer campo e os outros seis recalculam em tempo real. O tamanho base padrão é 16px (a raiz mais comum), mas dá pra mudar pra 14, 18, ou qualquer raiz que seu design system use, e o viewport padrão é 1920×1080 para que vw e vh fiquem exatos.
Como usar
- Passo 1 — Defina o tamanho base da fonte em pixels (padrão 16px), que determina como as unidades relativas como em, rem e % são calculadas.
- Passo 2 — Insira um valor numérico em qualquer um dos sete campos de unidade (px, em, rem, pt, %, vw ou vh) para ver todas as outras unidades atualizarem instantaneamente.
- Passo 3 — Copie qualquer valor convertido para usar no seu CSS, especificações de design ou layouts de impressão.
Quando usar
- Traduzir specs em pt de um designer gráfico para os valores em pixels CSS que uma folha de estilo realmente aplica.
- Auditar um design system pra ver se um heading de 1.25rem dá mesmo os 20px previstos no root escolhido.
- Escolher o em ou % certo dentro de um pai que já altera o tamanho de fonte herdado.
Resultado
Um designer entrega especificações em pontos (texto corpo 14pt). Insira 14 no campo pt com base de 16px para ver instantaneamente que equivale a 18,67px, 1,167em, 1,167rem e 116,7% — pronto para usar na sua folha de estilos.
Perguntas frequentes
- Por que 1pt vira 1.333px e não 1px?
- O CSS define 1pt como exatamente 1/72 de polegada e 1in como 96px, então 1pt = 96/72 = 1.333px. É a conversão que todo navegador usa. Tamanhos em pt parecem maiores na tela do que o número sugere por causa desse multiplicador 4/3.
- Qual a diferença entre em e rem?
- rem sempre referencia o tamanho de fonte do root (o elemento <html>). em referencia o do elemento pai mais próximo. Então 2em dentro de um pai de 20px é 40px, mas 2rem é sempre 2 × root, não importa o pai aninhado.
- Como o tamanho base afeta as conversões?
- Muda o valor em px de 1rem e 1em. O default de 16px bate com a maioria dos navegadores, então 1rem = 16px. Se seu root for 18px, 1rem = 18px e um heading 1.25rem vira 22.5px em vez de 20px. A conversão de pt não muda, pt é absoluto.
- Devo usar px, rem ou em no meu stylesheet?
- rem pra tamanhos de fonte (o usuário consegue alterar via zoom do navegador ou acessibilidade), px pra bordas e espaços pequenos onde precisão importa, e em pra espaçamentos relativos ao tamanho do próprio elemento (como padding interno de um botão).
- Por que a porcentagem não é 100% quando px iguala o base?
- Ela é, teste. Se px for igual ao seu base (ex. 16 com base 16) o campo % mostra 100. Se aparecer outro número, o px não está exatamente igual ao base, talvez por arredondamento em outro campo, ou porque você mudou o base depois de digitar o px.
Ferramentas relacionadas
Conversor de unidades de tempo
Converta unidades de tempo instantaneamente
Conversor de timestamp
Converta timestamps Unix em datas
Conversor de torque
Converta entre unidades de torque
Conversor de ângulos
Converta entre graus, radianos, gradianos, voltas, minutos e segundos de arco e notação DMS
Conversor de area
Converta unidades de area
Conversor de Tamanhos de Roupa
Converta tamanhos de roupa entre US, UK, EU, AU, JP e CN — pela etiqueta ou pelas medidas do corpo, com França, Itália e Coreia a um toque