Conversor Unidades CSS Online
Converta entre px, rem, em, vw, vh e outras unidades CSS, direto no seu navegador.
Click any value to copy
Por que usar
Design responsivo sem cálculos manuais
Todas as unidades CSS
px, rem, em, %, vw, vh, pt e muito mais. Conversão instantânea entre qualquer par.
Base configurável
Ajuste o tamanho de fonte base para calcular valores precisos de rem e em para o seu projeto.
Instantâneo
Resultados em tempo real conforme você digita. Sem botões, sem espera.
Sem cadastro
Ferramenta de uso diário disponível instantaneamente, sem contas ou instalações.
Como funciona
Três passos, sem complicação
Insira o valor
Digite o valor numérico e selecione a unidade de origem (por exemplo, 24px). Ajuste o tamanho de fonte base se for diferente de 16px.
Obtenha todos os equivalentes
O conversor calcula instantaneamente o equivalente em rem, em, %, vw, pt e outras unidades CSS comumente usadas.
Use o valor no seu CSS
Copie o valor que você precisa diretamente para a sua folha de estilos. Sem cálculos manuais, sem erros.
Perguntas frequentes
Ficou com dúvidas?
Use px para valores que não devem escalar com as preferências do usuário: bordas finas (1px), sombras, posições absolutas. Use rem para tamanhos de fonte e espaçamentos que devem respeitar as preferências de acessibilidade do usuário: se um usuário aumentar o tamanho de fonte base no navegador (como a maioria dos leitores de tela e usuários com baixa visão fazem), os valores em rem escalam automaticamente. Use em para valores relativos ao tamanho de fonte do elemento pai: útil em componentes que precisam manter suas proporções internas independentemente do contexto.
O 16px como tamanho de fonte base foi estabelecido pelos navegadores web no final dos anos 1990, derivado das resoluções típicas de monitores da época (72 a 96 DPI) e dos padrões de legibilidade de texto para leitura em tela. É aproximadamente equivalente a 12 pontos tipográficos (12pt), o tamanho padrão para texto de corpo em documentos impressos desde a era de Gutenberg. O W3C o adota como valor inicial da propriedade font-size.
A especificação WCAG 1.4.4 (Redimensionar Texto) exige que o texto possa ser aumentado em até 200% sem perda de conteúdo ou funcionalidade. Se você usar px para tamanhos de fonte, o texto não escala quando o usuário muda o tamanho base nas configurações do navegador (Configurações > Aparência > Tamanho da fonte no Chrome e Firefox). Se você usar rem, o texto escala automaticamente. Por isso as diretrizes de acessibilidade recomendam rem para font-size e line-height, mas aceitam px para bordas e decorações.
vw (viewport width) e vh (viewport height) são percentuais do tamanho da janela do navegador. 1vw equivale a 1% da largura da janela. Para tipografia fluida, usa-se a função CSS clamp(): font-size: clamp(1rem, 2.5vw, 2rem) define um tamanho mínimo (1rem), um tamanho preferencial que escala com o viewport (2.5vw) e um máximo (2rem). Isso produz um texto que aumenta suavemente com o tamanho da tela sem saltos abruptos, eliminando a necessidade de media queries para tipografia.
O CSS tem unidades físicas absolutas: cm, mm, in, pt e pc. O problema é que em telas essas unidades não correspondem às suas medidas físicas reais. Em telas de alta densidade (Retina, 4K), 1cm no CSS pode medir 0,8cm ou 1,2cm fisicamente dependendo do dispositivo e do DPI declarado. Apenas em mídia impressa (media queries de impressão) é que cm e mm correspondem exatamente à medida física. Por isso os designers web usam px, rem, em e unidades relativas, reservando as unidades absolutas para estilos de impressão.
Unidades CSS: especificação, história e o truque dos 62,5%
A especificação CSS Units and Values (CSS Values Level 3) foi publicada pelo W3C em 2015 e padronizou as unidades de viewport (vw, vh, vmin, vmax) que os navegadores haviam começado a implementar experimentalmente desde 2012. As unidades de viewport resolvem um problema fundamental no design responsivo: criar layouts e tipografias que se adaptam ao tamanho da tela sem media queries. O CSS Values Level 4 (em rascunho avançado) introduz unidades de consulta de contêiner (cqw, cqh, cqi, cqb, cqmin, cqmax), que são percentuais do contêiner CSS mais próximo em vez do viewport, disponíveis em todos os principais navegadores desde o final de 2022.
O truque dos 62,5% é uma técnica histórica para simplificar o uso de rem: ao definir font-size: 62,5% no elemento html (equivalente a 10px assumindo uma base de 16px), os cálculos de rem se tornam triviais (1.6rem = 16px, 2.4rem = 24px). Foi popularizada por Jonathan Snook por volta de 2011 no contexto do crescente design responsivo. No entanto, essa técnica tem um problema de acessibilidade: se um usuário tiver um tamanho de fonte base diferente de 16px configurado no navegador, o 62,5% o ajusta incorretamente, quebrando o redimensionamento. Por isso as diretrizes modernas de acessibilidade desaconselham essa técnica em favor de deixar o font-size do html sem modificação e usar rem diretamente.
O CSS Values Level 4 também introduz unidades tipográficas relativas: cap (altura de maiúsculas), ch (largura do glifo 0), ic (largura do glifo CJK da água 水), lh (line-height do elemento), rlh (line-height da raiz) e ex (altura do x). Essas unidades permitem criar espaçamentos perfeitamente proporcionais à tipografia sem depender de valores numéricos fixos. A unidade ch é especialmente útil para definir larguras máximas de colunas de texto (max-width: 65ch é uma medida de legibilidade ideal segundo pesquisas tipográficas, aproximadamente equivalente a 65 caracteres por linha).