Converta px, em, rem, pt e % com tamanho de fonte base configurável — tabela de equivalência completa no seu navegador.
O CSS mede comprimento em várias unidades que todas acabam virando pixels na tela, e converter entre elas na mão é um incômodo diário do trabalho front-end. Este conversor pega um valor — em px, em, rem, pt ou porcentagem — e mostra o mesmo comprimento nas cinco unidades de uma vez, usando um tamanho de fonte base que você controla. A base padrão é 16 px, o tamanho de fonte inicial de todo navegador relevante, mas se o seu design system define html { font-size: 62.5% } ou qualquer outro tamanho raiz, mude a base e a tabela inteira se adapta.
As relações são lineares e a ferramenta mostra as fórmulas que aplica: valores em em e rem são multiplicados pelo tamanho de fonte base para chegar a pixels, pontos são convertidos na razão definida pelo CSS de 96 px por 72 pt (logo 1 pt = 1,333 px), e porcentagens são lidas em relação à base, exatamente como em. Uma ressalva honesta que a ferramenta exibe na tela: em e rem produzem resultados idênticos aqui porque uma única base é usada para ambos. Numa página real eles diferem — rem sempre se refere ao elemento raiz, enquanto em se refere ao tamanho de fonte do elemento atual, que pode estar escalado pelos pais.
Usos típicos: traduzir uma entrega de designer em pixels para os valores em rem que sua base de código padroniza, conferir a quanto dá 0,875 rem antes de escrever uma media query, converter tamanhos em pt de um guia de estilo voltado à impressão para unidades de tela, ou definir escalas tipográficas acessíveis que respeitam as configurações de navegador do usuário. A conversão roda 100% no seu navegador enquanto você digita — nada é enviado, e não há nada para instalar.
px = em × base; px = rem × base; px = pt × 96 ÷ 72; px = % ÷ 100 × base. Inverso: em = rem = px ÷ base; pt = px × 72 ÷ 96; % = px ÷ base × 100. Com a base padrão de 16 px: 1,5 em = 24 px = 18 pt = 150%.
rem é sempre relativo ao tamanho de fonte da raiz (html), enquanto em é relativo ao tamanho de fonte do elemento atual, que herda e se compõe pela árvore. Este conversor usa uma base única para os dois, então os números coincidem aqui; em elementos aninhados eles podem divergir.
Porque todo navegador relevante vem com tamanho de fonte inicial de 16 px, então 1 rem = 16 px numa página intocada. Se o seu CSS muda o tamanho da raiz — o popular truque de 62.5% faz 1 rem = 10 px —, informe esse valor no campo de base.
Multiplique por 72 e divida por 96: o CSS fixa a razão em 96 px por polegada e 72 pt por polegada, então 16 px = 12 pt. A unidade pt importa principalmente para folhas de estilo de impressão e documentos.
rem costuma ser o recomendado para tipografia porque escala quando o usuário muda o tamanho de fonte preferido do navegador, coisa que o px ignora. px continua bom para o que não deve escalar com o texto, como bordas e sombras.
Não. A conversão é um punhado de multiplicações feitas em JavaScript no seu dispositivo — nada é enviado a servidor nenhum nem armazenado em lugar algum.
O Vai.la transforma qualquer URL em um link curto com estatísticas de cliques, QR Code e seu próprio biolink.
O Vai.la não se responsabiliza pelo uso das ferramentas nem por decisões tomadas com base nos seus resultados.