Passar a maqueta a código
O design dá 24 px de espaçamento e a folha de estilos deve receber 1,5rem. É o percurso mais frequente no trabalho diário com interfaces.
Converta píxeis em rem com qualquer base
Com a predefinição do navegador, 24 píxeis são 1,5rem e 14 píxeis são 0,875rem. Escreva a medida da maqueta, ajuste o tamanho de letra base e leve o resultado diretamente para a folha de estilos.
Loading tool editor...
PUBLICIDADE
Para que serve converter píxeis em rem?
O píxel passa a rem com uma única divisão: o número de píxeis a dividir pelo tamanho de letra base. Com a predefinição do navegador essa base vale 16 px, pelo que 24 píxeis dão 1,5rem e 14 píxeis dão 0,875rem. A unidade rem refere-se ao tamanho de texto do elemento html, a raiz do documento [1].
É o sentido mais frequente no dia a dia. A maqueta chega com medidas em píxeis, porque é assim que os programas de design contam, e a folha de estilos escreve-se em rem para que o layout responda às definições de quem lê.
O resultado traz quatro casas decimais, porque com base de 16 px um único píxel vale exatamente 0,0625rem e os tamanhos de texto produzem números como 0,875 ou 1,125.
Mais abaixo encontra uma tabela com 30 valores em três bases, como automatizar a conversão dentro do projeto e uma revisão de propriedades CSS com a resposta sobre quais passar a rem. O caminho inverso cabe ao conversor de rem para píxeis.
Como calcular píxeis em rem à mão? Fórmula e exemplo
A fórmula tem uma só operação: rem = píxeis ÷ tamanho de letra base. É a inversa da multiplicação que transforma rem em píxeis.
Exemplo com um espaçamento de 20 px: com base de 16 sai 20 ÷ 16 = 1,25rem. Esse mesmo valor com a base de 10 px da técnica dos 62,5% dá 2rem, porque dividir por dez faz-se de cabeça.
As medidas de uma maqueta costumam dar frações: 18 píxeis são 1,125rem, 30 píxeis são 1,875rem e 22 píxeis são 1,375rem. As três são exatas e a maioria dos design systems guarda-as assim, pelo que as escreve tal e qual na folha de estilos.
A unidade em calcula-se da mesma forma, dividindo pelo tamanho de letra do elemento pai em vez do da raiz: esse cálculo cabe ao conversor de píxeis para em. Se a medida seguir para o papel, o mesmo ficheiro cabe ao conversor de píxeis para polegadas.
PUBLICIDADE
Quantos rem valem os valores mais comuns em píxeis?
| Valor em píxeis | Base 16 px (predefinida) | Base 10 px (62,5%) | Base 20 px (texto ampliado) |
|---|---|---|---|
| 1 px | 0,0625 rem | 0,1 rem | 0,05 rem |
| 2 px | 0,125 rem | 0,2 rem | 0,1 rem |
| 4 px | 0,25 rem | 0,4 rem | 0,2 rem |
| 6 px | 0,375 rem | 0,6 rem | 0,3 rem |
| 8 px | 0,5 rem | 0,8 rem | 0,4 rem |
| 10 px | 0,625 rem | 1 rem | 0,5 rem |
| 12 px | 0,75 rem | 1,2 rem | 0,6 rem |
| 14 px | 0,875 rem | 1,4 rem | 0,7 rem |
| 16 px | 1 rem | 1,6 rem | 0,8 rem |
| 18 px | 1,125 rem | 1,8 rem | 0,9 rem |
| 20 px | 1,25 rem | 2 rem | 1 rem |
| 22 px | 1,375 rem | 2,2 rem | 1,1 rem |
| 24 px | 1,5 rem | 2,4 rem | 1,2 rem |
| 28 px | 1,75 rem | 2,8 rem | 1,4 rem |
| 30 px | 1,875 rem | 3 rem | 1,5 rem |
| 32 px | 2 rem | 3,2 rem | 1,6 rem |
| 36 px | 2,25 rem | 3,6 rem | 1,8 rem |
| 40 px | 2,5 rem | 4 rem | 2 rem |
| 44 px | 2,75 rem | 4,4 rem | 2,2 rem |
| 48 px | 3 rem | 4,8 rem | 2,4 rem |
| 56 px | 3,5 rem | 5,6 rem | 2,8 rem |
| 60 px | 3,75 rem | 6 rem | 3 rem |
| 64 px | 4 rem | 6,4 rem | 3,2 rem |
| 72 px | 4,5 rem | 7,2 rem | 3,6 rem |
| 80 px | 5 rem | 8 rem | 4 rem |
| 96 px | 6 rem | 9,6 rem | 4,8 rem |
| 128 px | 8 rem | 12,8 rem | 6,4 rem |
| 160 px | 10 rem | 16 rem | 8 rem |
| 192 px | 12 rem | 19,2 rem | 9,6 rem |
| 256 px | 16 rem | 25,6 rem | 12,8 rem |
As três bases cobrem três situações: 16 px é a predefinição do navegador, 10 px vem da técnica dos 62,5% e 20 px é um número típico em quem ampliou o texto nas suas definições.
Como converter píxeis em rem automaticamente num projeto?
Para um valor isolado basta o conversor acima. Para uma folha de estilos inteira o cálculo passa para uma ferramenta que o executa sempre que o projeto é compilado.
Num pré-processador escreve uma função que divide o número pela base. Em Sass fica assim: @function rem($px) { @return math.div($px, 16) * 1rem; }, e depois na regra coloca padding: rem(24) e obtém 1.5rem. A base passa a viver num único sítio e muda-se uma vez.
A segunda via trabalha sobre a folha já terminada e deixa intacta a sua forma de escrever. O plugin postcss-pxtorem, ligado ao passo de compilação, percorre o ficheiro de saída e troca os píxeis por rem conforme a base configurada. Nos últimos 30 dias o registo npm contabilizou mais de 870.000 transferências [2].
A terceira via são as variáveis CSS. Escreve --space-6: 1.5rem uma vez na folha e depois invoca o nome em vez do número. A conversão passa a acontecer uma só vez, ao definir a escala, e não em cada regra.
PUBLICIDADE
Que propriedades passar a rem e quais deixar em píxeis?
| Propriedade CSS | Passar a rem? | Porquê |
|---|---|---|
| font-size | Sim | O centro de todo o assunto: o tamanho de texto deve responder à definição do navegador |
| padding e margin | Sim | O espaço à volta do texto deve crescer com ele, senão um corpo maior fica apertado |
| largura de uma coluna de texto | Sim | O comprimento da linha mede-se em caracteres, pelo que a largura acompanha o tamanho de texto |
| line-height | Não, sem unidade | Um multiplicador nu como 1.5 herda-se bem em qualquer aninhamento |
| border-width | Não | Um filete deve continuar a ser um filete, seja qual for o tamanho de texto |
| box-shadow | Não | A sombra é um efeito gráfico sem relação com o tamanho do texto |
| border-radius | Normalmente não | O raio descreve a forma do elemento, não o seu conteúdo |
| pontos de rutura das media queries | Sim, mas em em | Dentro de uma media query o navegador conta a partir do tamanho de texto predefinido e não do elemento html, pelo que o em se comporta de forma previsível <a class="source-ref" href="#zrodlo-3">[3]</a> |
Reescrever uma folha de estilos existente não obriga a converter tudo. A troca de píxeis por rem compensa onde uma medida deva crescer junto com o texto de quem lê.
O píxel e o rem lado a lado
| Característica | px | rem |
|---|---|---|
| Ponto de referência | Nenhum, é um valor absoluto | Tamanho de letra do elemento html |
| Valor predefinido | 1 px = 1/96 de polegada | 1rem = 16 px |
| Reação às definições de quem lê | Mantém-se igual | Escala com elas |
| Onde é indicado | Maquetas, programas de design, ficheiros de imagem | Folhas de estilos, design systems |
| Uso habitual | Contornos, sombras, filetes | Tamanhos de texto, espaçamentos, larguras |
| Automatização | Valor escrito diretamente | Função no pré-processador ou plugin na compilação |
PUBLICIDADE
Quando vai precisar desta conversão?
Fixar a escala do projeto
Em vez de converter em cada regra, define uma vez variáveis CSS ou uma função no pré-processador e invoca os nomes.Reescrever uma folha antiga
Na migração de píxeis para rem converte tamanhos de texto e espaçamentos, enquanto contornos e sombras ficam como estão.Verificação de acessibilidade
Os valores escritos em rem crescem com a definição de quem lê, que é o que pede o critério WCAG 1.4.4 sobre ampliar o texto até 200% [4].
Converter Pixels para outras unidades
Explorar outros conversores de unidades
pt para pxrem para pxem para pxcm para pxmm para pxcm para polegadaspolegadas para cmmm para polegadaspolegadas para mmmilhas para kmkm para milhasmetros para péspés para metrospolegadas para péspés para polegadaslibras para onçasonças para librasml para onçasonças para mllitros para galõesgalões para litroskg para libraslibras para kgkg para gramasgramas para kgkg para stonestone para kgpolegadas para pxpés para pxpaicas para pxmetros para pxHEX para RGBRGB para CMYKbytes para KBKB para bytesKB para MBMB para KBMB para GBGB para MBKB para GBGB para KBGB para TBTB para GBKB para TBTB para KBUnix para dataDEC para BINDEC para HEXMbps para MB/s
Fontes
- CSS Values and Units Module Level 4 — W3C
- postcss-pxtorem — npm
- CSS values and units – length — MDN Web Docs
- Understanding SC 1.4.4: Resize Text (WCAG 2.2) — W3C
Todos os valores das tabelas foram calculados a partir das definições das unidades e verificados aritmeticamente antes da publicação. Os dados históricos e os nomes das unidades locais assentam nas fontes indicadas acima.
Última revisão do conteúdo: · escrito e verificado pela equipa Arteon
Perguntas frequentes
Quantos rem é 1 píxel?
Com a base predefinida de 16 px um píxel são 0,0625rem. Com a base de 10 px da técnica dos 62,5% esse mesmo píxel dá 0,1rem, e com o texto ampliado a 20 px dá 0,05rem.
Como se convertem px em rem?
Divida o número de píxeis pelo tamanho de letra base. Com os 16 px predefinidos sai 24 ÷ 16 = 1,5rem. O conversor acima faz essa divisão para qualquer base de 1 a 100 px.
Quantos rem são 24 px?
1,5rem com base de 16 px, 2,4rem com base de 10 px e 1,2rem com base de 20 px. O valor 1,5rem é um tamanho comum de título de secção.
Quantos rem são 14 px?
0,875rem com a base predefinida de 16 px. Este valor costuma aparecer nas etiquetas dos campos e no texto de ajuda que fica por baixo.
Quantos rem são 20 px?
1,25rem com base de 16 px. Com base de 10 px saem 2rem redondos, o que é um argumento a favor da técnica dos 62,5% em projetos com uma escala de espaçamento ampla.
Quantos rem são 12 px?
0,75rem com base de 16 px. É o menor tamanho de texto em uso corrente nas interfaces: abaixo disso a leitura torna-se incómoda.
Quantos rem são 40 px?
2,5rem com base de 16 px, 4rem com base de 10 px e 2rem com base de 20 px. Valores desta ordem descrevem espaçamentos entre secções em vez de tamanhos de texto.
Quantos rem são 80 px?
5rem com a base predefinida de 16 px. Com base de 10 px saem 8rem e com 20 px saem 4rem.
É preciso arredondar o resultado em rem?
Valores como 0,875 ou 1,875rem escrevem-se tal e qual, e é assim que a maioria dos design systems os guarda. O navegador calcula-os com exatidão, ao passo que arredondar para 0,88rem deslocaria o tamanho de texto uma fração de píxel.
Como converter píxeis em rem automaticamente?
Num pré-processador escreve uma função que divide pela base e depois coloca rem(24) em vez de um número. Sobre uma folha já terminada trata disso o plugin postcss-pxtorem no passo de compilação. A terceira via são as variáveis CSS com a escala definida uma vez.
É preciso passar toda a folha de estilos a rem?
Os tamanhos de texto, os espaçamentos e as larguras de coluna sim, porque devem crescer com a definição de quem lê. Contornos, sombras e filetes ficam em píxeis, e a altura de linha escreve-se sem unidade, como simples multiplicador.
Que unidade convém nas media queries?
O em. Dentro de uma media query o navegador resolve as unidades relativas face ao tamanho de texto predefinido e não face ao valor colocado no elemento html, pelo que um ponto de rutura escrito em em se comporta de forma previsível mesmo se o projeto usar a técnica dos 62,5%.
Ajude-nos a melhorar as nossas ferramentas
Tem uma ideia para uma função, encontrou um erro ou quer propor outra ferramenta? Escreva-nos, respondemos em menos de 24 horas.