6XC

Conversor PX ↔ REM ↔ EM ↔ PT

Converta unidades CSS nos dois sentidos com um tamanho raiz configurável — px, rem, em e pt são atualizados juntos.

826 visualizações

Como Funciona

rem = px ÷ tamanho raiz (16px por padrão, então 24px = 1,5rem); em funciona da mesma forma, mas em relação ao tamanho de fonte herdado do próprio elemento — o campo "tamanho de contexto" do conversor; pt é a unidade de impressão, onde 1pt = 1,333px (96dpi ÷ 72). Digite em qualquer campo e os demais seguem automaticamente.

Exemplo prático: em uma base de 16px, um título de 1,25rem é renderizado a 20px. Aninhe um rótulo de 0,875em dentro de um componente cujo próprio tamanho de fonte é 1,125rem (18px), e ele será renderizado a 15,75px — porque o em se acumula em relação ao seu pai imediato, não à raiz.

O Que Saber

  • rem é relativo ao elemento raiz, não a um padrão fixo do navegador. A suposição de 16px só é válida se ninguém a alterou. Se um usuário aumenta o tamanho de fonte padrão do navegador nas configurações de acessibilidade — algo comum entre pessoas com baixa visão — todo valor baseado em rem cresce proporcionalmente junto com ele. Valores em pixels não: um parágrafo de 16px permanece em 16px independentemente da preferência do navegador do usuário.
  • É por isso que as diretrizes de acessibilidade favorecem rem para tamanho de fonte e espaçamento. Um layout construído em rem respeita a escolha de tamanho de texto do usuário de ponta a ponta — títulos, corpo do texto e o espaçamento ao redor crescem todos juntos, mantendo o design proporcional em vez de quebrar quando o texto aumenta.
  • em é relativo ao seu próprio aninhamento, o que se acumula. Um valor de 1,5em dentro de outro elemento de 1,5em é renderizado a 2,25× a raiz — útil para componentes que devem escalar com seu próprio contexto de tamanho de fonte (como o padding de um botão), arriscado para qualquer coisa aninhada em vários níveis.
  • O antigo "truque dos 62,5%" — definir a raiz para 10px para que 1rem = 10px, facilitando o cálculo mental — ainda funciona, mas vale evitar em projetos novos: a maioria das bibliotecas de componentes assume uma raiz de 16px, e sobrescrevê-la pode gerar dimensionamento inesperado em código de terceiros.
  • pt é definido em relação ao px, e não o contrário. O CSS fixa a proporção em 1in = 96px = 72pt, então 1pt = 96/72 = exatamente 1,333px. Isso importa principalmente ao exportar um design para impressão ou PDF, onde pt é a unidade nativa — a conversão mantém os tamanhos consistentes entre tela e impressão.

Perguntas Frequentes

Por que meu valor em em é diferente do em rem?

em se multiplica pelo tamanho de fonte definido mais próximo, e se acumula em cascata: um 1,5em dentro de um elemento de 1,5em equivale a 2,25× a raiz. rem sempre se refere à raiz — essa previsibilidade é o motivo do seu sucesso.

1pt é realmente 1,333px?

No CSS, sim, por definição: 1in = 96px = 72pt. PDFs de impressão e CSS concordam nessa proporção, embora o tamanho físico dependa do DPI real da tela.

Por que as diretrizes de acessibilidade recomendam rem em vez de px para texto?

Porque rem escala com a preferência de tamanho de fonte do usuário, e px não. Alguém que aumenta o tamanho de texto padrão do navegador — uma adaptação comum para baixa visão — vê todo tamanho de fonte e espaçamento baseado em rem crescer proporcionalmente, enquanto o texto baseado em pixels permanece travado em seu tamanho original, exatamente o tipo de falha que auditorias de acessibilidade apontam.

O que acontece com os valores em rem se um usuário mudar o tamanho de fonte padrão do navegador?

Eles escalam automaticamente. Se o tamanho de fonte raiz for deixado no padrão do navegador e um usuário definir esse padrão para, digamos, 20px em vez de 16px, cada 1rem no seu CSS agora equivale a 20px em vez de 16px — sem nenhuma mudança de código. Isso só funciona se o próprio tamanho de fonte raiz for deixado sem definir ou definido de forma relativa, não fixado em px.

Devo usar px alguma vez?

Sim, para coisas que genuinamente nunca devem escalar com o texto: bordas finas, ícones de tamanho fixo, ou sombras de 1px. A regra prática que a maioria das equipes usa é rem para tamanho de fonte e espaçamento de layout, em para padding relativo ao componente, e px apenas para detalhes que devem permanecer visualmente constantes independentemente da configuração de tamanho de texto do usuário.

Comentários

Ainda não há comentários — seja o primeiro a escrever um!

Ferramentas Semelhantes

Conversor de Moedas (Taxas do BCE em Tempo Real) Converta entre mais de 30 moedas — USD, EUR, GBP, TRY e outras — usando as taxas de referência diárias do Banco Central Europeu. Grátis, sem cadastro. Converter Conversor de Libras para Quilogramas Converta libras em quilogramas e quilogramas em libras instantaneamente — digite em qualquer um dos campos. 1 lb = 0,4536 kg. Converter Conversor de Pés e Polegadas para Cm Converta pés e polegadas para centímetros e vice-versa — conversões de altura como 5'9" para cm, instantaneamente. Converter Conversor de Fahrenheit para Celsius Converta °F para °C e Celsius para Fahrenheit instantaneamente — temperaturas de clima, forno e corpo com pontos de referência comuns. Converter