Conversor de Unidades CSS - Ferramenta online gratuita

Funcionalidades

Tamanho da fonte raiz configurável

px ↔ rem ↔ em ↔ pt

Gera o fragmento de CSS pronto a usar

Como Usar

1. Defina o tamanho da fonte raiz (padrão 16px).

2. Digite um valor em qualquer campo de unidade.

3. Todas as outras unidades são atualizadas automaticamente.

Sobre esta ferramenta

Pixels são fáceis de entender, mas unidades rem acompanham o tamanho de fonte preferido pelo usuário, o que importa para a acessibilidade. Este conversor mantém px, rem, em e pt sincronizados com base num tamanho de fonte raiz que você escolhe — 16px por padrão, o padrão dos navegadores. Digite um valor em qualquer campo e os outros se atualizam, para você passar para rem um design entregue em pixels ou conferir quanto um tamanho de impressão de 12pt vale na tela. A conversão supõe que em é medido em relação ao mesmo tamanho base que rem, o que vale para elementos cujo pai usa o tamanho de fonte raiz; componentes aninhados com tamanho de fonte próprio terão valores diferentes.

Perguntas Frequentes

Qual a diferença entre rem e em?

rem é relativo ao tamanho de fonte do elemento raiz, então 1rem é igual em toda a página. em é relativo ao tamanho de fonte do pai do elemento atual, então se acumula em elementos aninhados. Este conversor trata em como relativo ao tamanho raiz que você informar.

Por que usar rem em vez de px para tamanhos de fonte?

Se um visitante aumentar o tamanho de fonte padrão nas configurações do navegador, o texto em rem cresce junto, enquanto o texto em px ignora essa preferência. Usar rem para tipografia e espaçamento torna o site mais confortável para pessoas com baixa visão.

Como pontos são convertidos em pixels?

O CSS define 1 polegada como 96px e 72pt, então 1pt equivale a 4/3 px (cerca de 1,333px). Uma fonte de 12pt, portanto, tem 16px.

Devo mudar o tamanho de fonte raiz para 62.5%?

Definir html { font-size: 62.5% } faz 1rem valer 10px, o que simplifica as contas, mas diminui o texto padrão e precisa ser compensado em todo lugar. Muitas equipes hoje mantêm os 16px padrão e usam um conversor como este.

1px no CSS equivale a um pixel físico da tela?

Não em telas de alta densidade. Um pixel CSS é uma unidade de referência; num dispositivo com densidade de pixels 2, cada pixel CSS é desenhado com dois pixels físicos em cada direção.