ToolAtlasO Figma veio em 16 px e o stylesheet do time é rem. Esta aba faz a conta com a raiz que você declara — 16 px do navegador ou o 10 px do truque 62,5% — sem abrir o DevTools do site no ar.
O inspect do Figma grita 24 e o PR do time só aceita rem. O trabalho desta página é esta conta nesta aba, com a raiz e o pai que você informa. Não lê o CSS computado da landing no ar. Não é o conversor de km.
No Slack de front brasileiro a dúvida é sempre a mesma: “raiz 16 ou 10?”. UtiloKit documenta os dois presets. DIO ensina o truque html { font-size: 62,5%; } para 1rem ≈ 10 px. Nenhum dos dois é lei — e font-size: 16px no html ainda sobrescreve a preferência de quem aumentou o texto no navegador.
Raiz 16, raiz 10 e o que o Figma não conta
- Design em px →
remdo design system (Tailwind clássico assume 16:text-lg= 1,125 rem = 18 px). - Projeto legado com 62,5%:
24px→2,4rem, não1,5rem. emde botão cujo pai já está em 14 px — a conta muda.
É a ferramenta errada para vw/svh, para % do flex e para “quanto é isso em centímetros na gráfica”.
Fórmulas que a aba aplica (você escolhe a raiz):
rem = px ÷ raiz
px = rem × raizCom raiz 16: 14px = 0,875rem (o text-sm do Tailwind). Com raiz 10: 14px = 1,4rem.
Pai, em e o que não cabe
- Informe valor, unidade e raiz. Se for
em, informe o pai — senão você está mentindo para si mesmo. - Copie e cole no CSS. Anote a raiz no comentário do PR; o próximo dev agradece.
- Texto que precisa passar no AA: a unidade não salva contraste. Meça no verificador.
Sombra com blur em px: gerador de sombra. Hero: gradiente.
Acessibilidade sem teatro
WCAG 1.4.4 pede texto redimensionável até 200%. rem ajuda; px no texto trava. O truque 62,5% ainda escala se for porcentagem da preferência do usuário, mas comprime a faixa — por isso times de a11y pedem para não fixar a raiz em pixel. Esta aba não audita a página; só faz a aritmética.
Nada é enviado. 62,5% no html é convenção de time, não requisito de edital.