Conversor de unidades CSS
Converta valores de CSS entre px, rem, em, pt, vw e vh, ajustando a fonte raiz, a fonte do elemento e o tamanho da janela.
Experimente outra ferramenta
Escolhidas para acompanhar estaEste conversor transforma um valor de CSS entre as unidades absolutas, px e pt, e as relativas, rem, em, vw e vh. Você digita o valor, escolhe a unidade de origem e vê todas as equivalências ao mesmo tempo. As unidades relativas dependem do contexto, então dá para ajustar o tamanho da fonte raiz (para rem), o da fonte do elemento (para em) e a largura e a altura da janela (para vw e vh). O padrão é 16 px, o tamanho de fonte base dos navegadores, com uma janela de 1920 × 1080 px. É a conta que se faz ao passar um layout do Figma para o código.
Como usar esta ferramenta
- 01Digite o valorO número que você quer converter, por exemplo 24.
- 02Escolha a unidadepx, rem, em, pt, vw ou vh. As outras equivalências aparecem na hora.
- 03Ajuste o contextoMude a fonte raiz, a fonte do elemento ou o tamanho da janela se o seu projeto não usa os valores padrão.
Quando isso é útil?
- Do protótipo para o CSSTraduzir as medidas em px de um layout para rem, deixando a tipografia escalável.
- Folhas de estilo para impressãoConverter entre pt e px ao preparar estilos de impressão.
- Layout responsivoSaber quantos pixels um tamanho em vw ou vh ocupa em uma tela específica.
Exemplos
- 24 px para remCom a fonte raiz em 16 px, 24 px são 24 ÷ 16 = 1,5 rem. Em uma janela de 1920 px de largura, equivalem a 1,25 vw.
- 1,5 rem com outra fonte raizSe o html tem fonte de 20 px, 1,5 rem são 30 px; com 16 px, seriam 24 px.
- 12 pt para pxComo 1 px equivale a 0,75 pt, 12 pt são 12 ÷ 0,75 = 16 px.
- 10 vw em um notebookEm uma janela de 1366 px de largura, 10 vw são 136,6 px.
Dicas para um resultado melhor
- Fixe a fonte raizSe o seu CSS muda o tamanho da fonte do html, informe esse valor para que os rem saiam certos.
- Cuidado com em aninhadoUm em dentro de outro em multiplica os tamanhos; com rem isso não acontece.
Como cada unidade é convertida
Tudo passa por pixels. 1 rem vale o tamanho da fonte raiz (16 px por padrão) e 1 em o tamanho da fonte do elemento. 1 px equivale a 0,75 pt, porque no CSS uma polegada tem 96 px e 72 pt. 1 vw é 1% da largura da janela e 1 vh, 1% da altura.
rem ou em: qual usar
O rem é sempre medido em relação à fonte do html, então é previsível na página inteira. O em é medido em relação à fonte do próprio elemento, que herda a do elemento pai, e se acumula quando um componente fica dentro de outro. Por isso o rem é o mais comum para tipografia e espaçamentos, e o em para componentes que devem crescer junto com o próprio texto.
Acessibilidade e tamanho da fonte
Definir tamanhos em rem respeita a fonte que cada pessoa escolhe no navegador: se ela sobe de 16 para 20 px, tudo o que está em rem cresce na mesma proporção, enquanto o que foi definido em px fica fixo.
Perguntas frequentes
Quantos px tem 1 rem?
16 px com o tamanho de fonte padrão dos navegadores. Se o html tiver outro tamanho, 1 rem vale esse tamanho.
Como converter px para rem?
Divida os pixels pelo tamanho da fonte raiz: 24 px ÷ 16 = 1,5 rem.
Qual é a diferença entre pt e px?
No CSS, 1 pt é 1/72 de polegada e 1 px é 1/96, então 1 px equivale a 0,75 pt e 12 pt a 16 px. O pt aparece mais em estilos de impressão.
Para que servem vw e vh?
Para medidas que dependem da janela: 100vw é toda a largura e 100vh toda a altura. São úteis em seções de tela cheia e em tipografia fluida.
Os valores digitados ficam guardados?
Não. A conversão acontece no navegador, sem envio de dados, e os campos voltam ao padrão quando a página é recarregada.