Diferença entre rem e em?

rem é relativo à raiz do documento (html font-size, 16 px por padrão). em é relativo ao elemento pai. Coincidem só quando o pai usa o tamanho da raiz.

Por que 1pt = 1.333px?

CSS define 1 in = 96 px e 1 pt = 1/72 in, então 1 pt = 96/72 ≈ 1.333 px.

vw / vh são precisos?

Usam a largura e altura do viewport que você informa no painel de tamanhos base. O padrão 1440 × 900 é típico de desktop; ajuste ao seu canvas.

Em tipografia, % equivale ao em (relativo ao pai). Em outras propriedades CSS depende do containing block dessa propriedade.

Conversor de Unidades CSS

Converter

Digite um valor em qualquer unidade CSS e veja a conversão instantânea para as demais. Personalize o tamanho da fonte raiz (16 px por padrão) para rem, o tamanho da fonte do elemento pai para em e %, e as dimensões do viewport para vw e vh. Útil para passar designs para Tailwind / CSS, conferir tipografias responsivas ou lembrar quantos px valem 1rem em configurações não padrão.

—

ValorUnidade

Tamanhos base (raiz, pai, viewport)

Fonte raiz (rem)Fonte pai (em, %)Largura viewport (vw)Altura viewport (vh)

Todas as unidades

px16.000
rem1
em1
pt12.000
vw1.1111
vh1.7778
%100.00

Como usar

Digite um valor e escolha a unidade de origem (px, rem, em, pt, vw, vh, %).
As demais unidades atualizam instantaneamente.
Abra o painel 'tamanhos base' para mudar fonte raiz / pai ou viewport.
Copie o valor formatado ao lado de cada unidade.

Perguntas frequentes

Diferença entre rem e em?: rem é relativo à raiz do documento (html font-size, 16 px por padrão). em é relativo ao elemento pai. Coincidem só quando o pai usa o tamanho da raiz.
Por que 1pt = 1.333px?: CSS define 1 in = 96 px e 1 pt = 1/72 in, então 1 pt = 96/72 ≈ 1.333 px.
vw / vh são precisos?: Usam a largura e altura do viewport que você informa no painel de tamanhos base. O padrão 1440 × 900 é típico de desktop; ajuste ao seu canvas.
E o %?: Em tipografia, % equivale ao em (relativo ao pai). Em outras propriedades CSS depende do containing block dessa propriedade.