Tamanho Base (Root)
O valor de 1 REM/EM baseia-se no tamanho da fonte da raiz do navegador (padrão é 16px).
Conversor Simultâneo em Tempo Real
Digite um valor em qualquer campo abaixo. Todos os outros serão convertidos instantaneamente com base no Root PX configurado acima.
Gerador de Escala Tipográfica CSS
Crie um sistema visual harmonioso gerando variáveis CSS baseadas em uma proporção matemática.
| Nível (Variável CSS) | Preview Visual | Tamanho (REM / PX) |
|---|
/* Código gerado aparecerá aqui */Tutoriais em vídeo de como usar esta ferramenta
O que é o Conversor de Medidas Tipográficas?
O Conversor de Medidas Tipográficas é uma ferramenta essencial para desenvolvedores front-end, web designers e profissionais de UI/UX que buscam criar interfaces acessíveis, fluidas e responsivas. Em vez de calcular mentalmente as proporções entre diferentes unidades de tela, esta aplicação realiza a conversão simultânea entre Pixels (PX), Root EM (REM), Element EM (EM), Points (PT) e Porcentagem (%) em tempo real.
Além da conversão direta, a ferramenta se destaca por incluir um Gerador de Escala Tipográfica CSS avançado. Com ele, você pode criar um sistema visual harmonioso baseado em proporções matemáticas clássicas (como Major Third ou Golden Ratio), garantindo que todos os títulos e textos do seu layout mantenham uma hierarquia perfeita e consistente.
Privacidade e Segurança (100% Local)
Seu fluxo de trabalho está protegido. Esta ferramenta foi construída utilizando tecnologias modernas de navegador (Vanilla JavaScript), o que significa que todo o processamento matemático e geração de código ocorrem exclusivamente no seu dispositivo. Nenhum dado inserido, preferência ou código gerado é enviado para servidores externos. O funcionamento é imediato, seguro e pode ser utilizado até mesmo em redes restritas.
Principais Funcionalidades
-
Controle de Root Base
Ajuste o tamanho base do navegador (padrão 16px) deslizando o controle ou digitando o valor exato. Todas as conversões de REM se adaptam instantaneamente a essa raiz.
-
Conversão Multidirecional Real-Time
Esqueça os botões de "Converter". Digite em qualquer um dos campos (PX, REM, EM, PT ou %) e observe os outros quatro se autocompletarem com valores precisos no mesmo segundo.
-
Escalas Tipográficas Matemáticas
Gere variáveis CSS baseadas em escalas modulares profissionais, criando uma hierarquia perfeita do
--text-xsao--text-5xlcom pré-visualização visual instantânea. -
Exportação Inteligente de Código
Copie valores individuais com um clique ou baixe a estrutura de variáveis CSS completa e pronta para produção em um arquivo
.cssestruturado.
Como usar passo a passo
Defina o Tamanho Base
No topo da ferramenta, verifique se o tamanho base da fonte (Root) do seu projeto é 16px (padrão da web). Se o seu html { font-size: 62.5%; }, ajuste a base para 10px.
Converta Valores Individuais
Insira o valor na unidade que você já conhece (por exemplo, 24 no campo PX). A ferramenta imediatamente calculará os equivalentes em REM, EM, PT e Porcentagem. Use os ícones de cópia internos nos campos para transferir rapidamente para seu editor de código.
Crie seu Design System
Na seção de "Gerador de Escala", escolha uma proporção (Ratio) que combine com o estilo do seu site. Proporções menores como Minor Second (1.067) são ótimas para painéis densos, enquanto Perfect Fourth (1.333) ou maiores são excelentes para blogs e marketing.
Copie ou Baixe o CSS
Verifique a pré-visualização das fontes. Se estiver satisfeito, clique em "Copiar Código" ou use o botão flutuante "Baixar CSS" para salvar as variáveis geradas e importá-las diretamente na folha de estilos do seu projeto.
Ferramentas Complementares de Front-end
Se você está estruturando o visual de um novo projeto, pode precisar de utilitários rápidos para resolver outras partes da interface. Para conversões focadas em propósitos únicos e rápidos, confira o Conversor de PX para EM ou nossa variação focada em viewport, o Conversor de PX para REM e VW.
Para montar a estrutura das páginas e não apenas os textos, aproveite para estruturar seu layout de forma visual com o Gerador de Layout CSS Grid, e se você precisa fazer conversões fora do escopo web (como peso, tamanho ou temperatura), utilize nossa abrangente Tabela de Conversão de Medidas Interativa.
FAQ (Perguntas Frequentes)
Qual a diferença entre EM e REM?
A diferença central está na raiz do cálculo. O REM (Root EM) calcula seu valor exclusivamente com base no tamanho da fonte do elemento raiz da página (a tag <html>). Já o EM baseia seu tamanho no elemento pai imediato onde está inserido. O uso de REM é fortemente recomendado atualmente pois evita o "efeito cascata" indesejado de tamanhos de fonte crescendo descontroladamente quando os elementos são aninhados.
Por que o tamanho base padrão do navegador é 16px?
O tamanho de 16px foi estabelecido como padrão pelos navegadores primordiais baseando-se no tamanho de leitura confortável a uma distância padrão do monitor, refletindo também tamanhos históricos utilizados em mídia impressa padrão (similar ao tamanho pica ou proporções confortáveis em papel). Por motivos de acessibilidade, nunca force usuários a tamanhos menores via CSS no root, prefira usar REM para respeitar as escolhas do usuário no sistema operacional.
Como funciona a Escala Tipográfica Modular (CSS)?
Uma escala tipográfica modular funciona escolhendo um tamanho base (ex: 1rem) e multiplicando esse valor por uma proporção fixa (ratio) continuamente para gerar os tamanhos maiores, ou dividindo para gerar os menores. Semelhante às notas musicais, isso cria um ritmo e uma harmonia visual garantida que agrada ao cérebro humano, não importando o quão grande o título H1 fique em relação ao parágrafo padrão.
Esta ferramenta salva meus dados de código?
Não. Conforme explicitado em nossa seção de privacidade, o Conversor de Medidas Tipográficas opera estritamente via "Client-Side" (navegador do usuário). O único registro guardado é feito no localStorage do seu próprio navegador apenas para lembrar qual o seu tamanho base preferido (ex: 16px) e a proporção da escala, para que você não tenha que configurar tudo do zero na sua próxima visita.
