Texto de 14px com base 16
- Entrada
- 14px ÷ 16
- Saída esperada
- 0,875rem
Tamanho comum para texto secundário; o resultado tem três casas exatas.
Carregando ferramenta… / Loading tool…
converter px para rem
Converter px para rem é uma divisão: pixels divididos pelo font-size do elemento raiz. Como os navegadores usam 16px por padrão, 1rem vale 16px. A ferramenta abaixo faz a conta, mostra o passo a passo, aceita outra base e troca px por rem em um bloco de CSS inteiro.
Tamanho comum para texto secundário; o resultado tem três casas exatas.
Metade a mais que o texto corrido de 1rem.
É o caso do html em 62,5% no padrão do navegador: a base muda, e o número em rem também.
Multiplicar pela base devolve o valor em pixels.
Divida os pixels pelo font-size da raiz. Com a base de 16px: 24px ÷ 16 = 1,5rem, 14px ÷ 16 = 0,875rem e 10px ÷ 16 = 0,625rem. Para o caminho inverso, multiplique: 1,25rem × 16 = 20px.
Depende do font-size do elemento html. Na configuração padrão dos navegadores é 16px, então 1rem = 16px. Se o usuário aumentar o tamanho de fonte padrão no navegador ou o seu CSS mudar a raiz, o valor muda.
Não. Tamanhos de fonte e espaçamentos que devem acompanhar a preferência de leitura do usuário são bons candidatos. Bordas finas, sombras e dimensões de imagem costumam ficar em px. Revise o resultado em vez de converter às cegas.
Dividir por 16 só é exato para múltiplos de 1/16 de pixel. 13px dá 0,8125rem, mas 11px dá 0,6875rem e 10px dá 0,625rem; já raízes como 12px ou 14px geram dízimas em vários casos. A ferramenta deixa escolher de 0 a 6 casas e cortar os zeros finais.
Aqui, % é porcentagem do font-size de referência (como em font-size: 150%). Em width, padding e outras propriedades o % se refere a outra coisa, então esta conversão não vale para elas.
Para rem: 24 ÷ 16 = 1.5 rem
Cole um bloco de CSS e troque todos os valores de uma unidade por outra, sem mexer no resto. Comentários, strings, url() e números dentro de nomes (classes, variáveis, cores) ficam intactos.
Cole um bloco de CSS acima para converter. O resultado aparece aqui na hora.
Referência rápida com font-size da raiz de 16px. Clique em um valor em rem para copiar. A coluna Tailwind mostra o passo n em que n × 0,25rem dá o mesmo tamanho.
| px | rem | Tailwind (n) |
|---|---|---|
| 4px | 1 | |
| 6px | 1,5 | |
| 8px | 2 | |
| 10px | 2,5 | |
| 12px | 3 | |
| 14px | 3,5 | |
| 16px | 4 | |
| 18px | - | |
| 20px | 5 | |
| 24px | 6 | |
| 28px | 7 | |
| 32px | 8 | |
| 36px | 9 | |
| 40px | 10 | |
| 48px | 12 | |
| 56px | 14 | |
| 64px | 16 | |
| 72px | - | |
| 80px | 20 | |
| 96px | 24 | |
| 112px | 28 | |
| 128px | 32 |
| n | rem | px |
|---|---|---|
| 0 | 0 | 0 |
| 0,5 | 0,125 | 2 |
| 1 | 0,25 | 4 |
| 1,5 | 0,375 | 6 |
| 2 | 0,5 | 8 |
| 2,5 | 0,625 | 10 |
| 3 | 0,75 | 12 |
| 3,5 | 0,875 | 14 |
| 4 | 1 | 16 |
| 5 | 1,25 | 20 |
| 6 | 1,5 | 24 |
| 7 | 1,75 | 28 |
| 8 | 2 | 32 |
| 9 | 2,25 | 36 |
| 10 | 2,5 | 40 |
| 11 | 2,75 | 44 |
| 12 | 3 | 48 |
| 14 | 3,5 | 56 |
| 16 | 4 | 64 |
| 20 | 5 | 80 |
| 24 | 6 | 96 |
| 28 | 7 | 112 |
| 32 | 8 | 128 |
| 36 | 9 | 144 |
| 40 | 10 | 160 |
| 44 | 11 | 176 |
| 48 | 12 | 192 |
| 52 | 13 | 208 |
| 56 | 14 | 224 |
| 60 | 15 | 240 |
| 64 | 16 | 256 |
| 72 | 18 | 288 |
| 80 | 20 | 320 |
| 96 | 24 | 384 |
No Tailwind, o espaçamento é n × 0,25rem (a variável --spacing vale 0,25rem por padrão), então p-4 é 1rem. A coluna px segue o font-size da raiz informado acima. Os passos listados são os da escala clássica; a tabela da esquerda mostra - quando o tamanho não cai em um deles.
Gere um clamp() que faz o tamanho crescer de forma linear entre dois viewports e travar nos extremos. A saída usa rem + vw, com a fórmula mostrada passo a passo.
O tamanho máximo é menor que o dobro do mínimo. Adrian Roselli aponta que, com vw ou clamp() limitando o tamanho, o usuário pode não conseguir chegar a 200% (WCAG 1.4.4, nível AA), e sugere nunca deixar o máximo abaixo do dobro do tamanho base. Isto não garante conformidade em nenhum caso: teste com zoom de 200% e 300%.
1) Inclinação = (24 - 16) ÷ (1280 - 320) = 0,008333 px de fonte por px de tela
2) Em vw: 0,008333 × 100 = 0,8333vw
3) Termo fixo = 16 - 0,008333 × 320 = 13,3333px = 0,8333rem (÷ 16)
4) Valor preferido = 0.8333rem + 0.8333vw, travado entre o mínimo e o máximo pelo clamp()
vw puro ignora a preferência de tamanho de fonte do usuário e pode quebrar o zoom do texto. Por isso o termo fixo sai em rem: ele acompanha a preferência, e só a parte que cresce com a tela usa vw.
| Viewport | px | rem |
|---|---|---|
| 320px | 16 | 1 |
| 375px | 16,46 | 1,029 |
| 414px | 16,78 | 1,049 |
| 768px | 19,73 | 1,233 |
| 1024px | 21,87 | 1,367 |
| 1280px | 24 | 1,5 |
| 1440px | 24 | 1,5 |
| 1920px | 24 | 1,5 |
Tipografia fluida muda de tamanho com a tela
Tamanho agora: 20px (1,25rem)
A caixa usa a mesma fórmula com cqw (unidade de container) no lugar de vw, então o navegador resolve o clamp() de verdade. Em telas estreitas a caixa não passa da largura da tela.
Cada passo é o tamanho base multiplicado pela razão elevada ao número do passo. Escolha a razão, veja a escala em rem e px e exporte como variáveis CSS ou Tailwind.
As amostras param em 72px para caber na tela; os valores da tabela são os reais.
:root {
--text-7xl: 5.9605rem;
--text-6xl: 4.7684rem;
--text-5xl: 3.8147rem;
--text-4xl: 3.0518rem;
--text-3xl: 2.4414rem;
--text-2xl: 1.9531rem;
--text-xl: 1.5625rem;
--text-lg: 1.25rem;
--text-base: 1rem;
--text-sm: 0.8rem;
--text-xs: 0.64rem;
}Converta breakpoints de px para em e gere as media queries. Cole uma lista (um por linha, ou separados por vírgula) em px, em ou rem.
| px | em | Condição | Copiar |
|---|---|---|---|
| 640 | 40 | (min-width: 40em) | |
| 768 | 48 | (min-width: 48em) | |
| 1024 | 64 | (min-width: 64em) | |
| 1280 | 80 | (min-width: 80em) | |
| 1536 | 96 | (min-width: 96em) |
@media (min-width: 40em) {
/* ... */
}
@media (min-width: 48em) {
/* ... */
}
@media (min-width: 64em) {
/* ... */
}
@media (min-width: 80em) {
/* ... */
}
@media (min-width: 96em) {
/* ... */
}A especificação de Media Queries diz que unidades relativas em media queries são baseadas no valor inicial, nunca em declarações da página. No HTML, o em vale o font-size inicial definido pelo navegador ou pela preferência do usuário, e não o que o seu CSS declara.
Consequência prática: em e rem valem o mesmo dentro de uma media query, e um html com font-size: 62.5% não muda os breakpoints. Se o usuário aumentar o tamanho de fonte padrão, os breakpoints em em sobem junto e o layout muda mais cedo, o que costuma ser o desejado para texto maior.
A sintaxe de intervalo (width >= 48em, width < 48em) dispensa o truque do 0,02px, porque o limite superior é exclusivo. Ela só funciona em navegadores recentes; confira o suporte antes de usar em produção.
rem é múltiplo do font-size do elemento raiz, que por padrão é o tamanho de fonte configurado no navegador (16px na configuração padrão). Se a pessoa aumenta esse tamanho nas configurações, tudo em rem cresce junto. Um valor em px fica fixo, não importa a preferência. Escolha o padrão do navegador abaixo e compare.
O texto se ajusta ao leitor?
font-size: 16px resulta em 16px, sempre
O texto se ajusta ao leitor?
font-size: 1rem resulta em 16px
O zoom do navegador (Ctrl e +) amplia a página inteira, inclusive o que está em px. A preferência de tamanho de fonte, disponível em navegadores como Chrome, Edge e Firefox, só afeta o que é relativo (rem, em, %).