Conversor de unidades CSS (px / rem / em / pt)

Como funciona

Um uso típico no lado de integração front-end: um layout do Figma expressa todos os tamanhos em pixels (16px, 24px, 32px...), mas as boas práticas de acessibilidade recomendam usar unidades relativas como rem para o CSS, para que o texto aumente corretamente quando um usuário aumenta o tamanho de fonte padrão do navegador. Informe o valor em pixels lido no layout, escolha "px" para "rem" com o tamanho de fonte base habitual do site (16px por padrão), e cole diretamente o resultado no seu CSS.

Por que o tamanho de fonte base é necessário?

rem e em são unidades relativas: 1rem equivale ao tamanho de fonte do elemento raiz (html), enquanto 1em equivale ao tamanho de fonte do elemento atual. Sem conhecer esse tamanho de referência (geralmente 16px por padrão em um navegador, mas às vezes modificado por uma folha de estilo), é impossível converter para ou a partir de px. É por isso que esta ferramenta pede para você informar o tamanho de fonte base a ser usado como referência.

Qual é a diferença entre rem e em?

rem ("root em") é sempre calculado em relação ao tamanho de fonte do elemento raiz do documento, o que o torna previsível em qualquer parte de uma página. em é calculado em relação ao tamanho de fonte do elemento pai mais próximo, o que pode se acumular. Esta ferramenta trata os dois da mesma forma, usando o tamanho base que você informa como referência comum.

A conversão é executada inteiramente no seu navegador graças ao WebAssembly: seus valores nunca são transmitidos a um servidor.